/* Hallberg IT · design-tokens (Hallmark · theme: Cobalt lys) */ :root { --color-paper: oklch(98% 0.004 250); --color-band: oklch(94% 0.015 255); --color-ink: oklch(22% 0.02 260); --color-ink-2: oklch(46% 0.02 260); --color-rule: oklch(86% 0.012 250); --color-accent: oklch(50% 0.19 262); --color-accent-hover: oklch(44% 0.18 262); --color-accent-ink: oklch(98% 0.004 250); --color-invert: oklch(30% 0.09 262); --color-invert-ink: oklch(96% 0.008 250); --color-invert-muted: oklch(80% 0.03 255); --color-invert-accent: oklch(72% 0.13 262); --color-focus: oklch(50% 0.19 262); --color-pill: oklch(98% 0.004 250 / 0.75); --color-open: oklch(70% 0.17 145); --color-closed: oklch(62% 0.19 25); --color-error: oklch(55% 0.19 25); --color-error-bg: oklch(95% 0.025 25); --color-success: oklch(45% 0.12 150); --color-success-bg: oklch(95% 0.03 150); --color-footer-bg: oklch(22% 0.02 260); --color-menu-bg: oklch(30% 0.09 262); --color-field: oklch(98% 0.004 250); --color-scrim: oklch(15% 0.02 260 / 0.5); --color-shadow: oklch(22% 0.02 260 / 0.06); --font-display: 'Space Grotesk', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; --space-2xs: 0.5rem; --space-xs: 0.75rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2rem; --space-xl: 3rem; --space-2xl: 4.5rem; --space-3xl: 6.5rem; --text-xs: 0.8125rem; --text-sm: 0.9375rem; --text-md: 1.0625rem; --text-lg: 1.375rem; --text-xl: 1.875rem; --text-display: clamp(2.75rem, 7vw, 5rem); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-short: 180ms; --dur-menu: 320ms; --radius-pill: 999px; --radius-input: 8px; } /* ===== DARK MODE ===== * Følger systemet som standard; brugerens valg via temaknappen * sætter data-theme på og vinder over systemet. */ /* Fælles mørke værdier – én gang pr. gate, hold de to blokke i sync */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-paper: oklch(16% 0.015 260); --color-band: oklch(21% 0.02 260); --color-ink: oklch(92% 0.008 250); --color-ink-2: oklch(68% 0.015 250); --color-rule: oklch(32% 0.015 255); --color-accent: oklch(72% 0.13 262); --color-accent-hover: oklch(80% 0.11 262); --color-accent-ink: oklch(16% 0.03 262); --color-invert: oklch(32% 0.09 262); --color-invert-accent: oklch(76% 0.12 262); --color-focus: oklch(72% 0.13 262); --color-pill: oklch(16% 0.015 260 / 0.75); --color-error: oklch(70% 0.16 25); --color-error-bg: oklch(24% 0.05 25); --color-success: oklch(78% 0.13 150); --color-success-bg: oklch(24% 0.05 150); --color-footer-bg: oklch(12% 0.012 260); --color-menu-bg: oklch(24% 0.06 262); --color-field: oklch(20% 0.018 260); --color-scrim: oklch(0% 0 0 / 0.55); --color-shadow: oklch(0% 0 0 / 0.3); color-scheme: dark; } } :root[data-theme="dark"] { --color-paper: oklch(16% 0.015 260); --color-band: oklch(21% 0.02 260); --color-ink: oklch(92% 0.008 250); --color-ink-2: oklch(68% 0.015 250); --color-rule: oklch(32% 0.015 255); --color-accent: oklch(72% 0.13 262); --color-accent-hover: oklch(80% 0.11 262); --color-accent-ink: oklch(16% 0.03 262); --color-invert: oklch(32% 0.09 262); --color-invert-accent: oklch(76% 0.12 262); --color-focus: oklch(72% 0.13 262); --color-pill: oklch(16% 0.015 260 / 0.75); --color-error: oklch(70% 0.16 25); --color-error-bg: oklch(24% 0.05 25); --color-success: oklch(78% 0.13 150); --color-success-bg: oklch(24% 0.05 150); --color-footer-bg: oklch(12% 0.012 260); --color-menu-bg: oklch(24% 0.06 262); --color-field: oklch(20% 0.018 260); --color-scrim: oklch(0% 0 0 / 0.55); --color-shadow: oklch(0% 0 0 / 0.3); color-scheme: dark; }