/* Hallmark · genre: modern-minimal · theme: Cobalt (light + dark) * design-system: design.md · designed-as-app * paper-band: light (L 98.5, dark drop L 15) · display-style: grotesk-sans * accent-hue: electric cobalt oklch(58% 0.20 256) */ :root { color-scheme: light dark; --color-paper: oklch(98.5% 0.004 250); --color-paper-2: oklch(96% 0.005 250); --color-paper-3: oklch(93% 0.006 250); --color-ink: oklch(24% 0.02 258); --color-ink-2: oklch(34% 0.018 257); --color-muted: oklch(50% 0.012 255); --color-rule: oklch(88% 0.008 250); --color-rule-2: oklch(80% 0.01 250); --color-accent: oklch(58% 0.20 256); --color-accent-ink: oklch(98.5% 0.004 250); --color-focus: oklch(58% 0.20 256); --color-graphite: oklch(22% 0.016 260); --color-success: oklch(52% 0.13 160); --color-error: oklch(52% 0.18 25); --color-on-graphite: oklch(93% 0.008 258); --color-on-graphite-2: oklch(86% 0.01 258); --color-on-graphite-muted: oklch(72% 0.012 258); --color-on-graphite-rule: oklch(38% 0.014 260); --color-on-error: oklch(98% 0.005 25); --shadow-lg: 0 24px 60px -20px oklch(24% 0.02 258 / 0.35); --shadow-sm: 0 8px 24px -12px oklch(24% 0.02 258 / 0.4); --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; --font-body: "Inter", ui-sans-serif, system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace; --space-3xs: 0.125rem; --space-2xs: 0.25rem; --space-xs: 0.5rem; --space-sm: 0.75rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2.5rem; --space-2xl: 4rem; --space-3xl: 6rem; --space-4xl: 9rem; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-md: 1.25rem; --text-lg: 1.5625rem; --text-xl: 1.9531rem; --text-2xl: 2.4414rem; --text-3xl: 3.0518rem; --text-display: clamp(2.5rem, 4vw + 1rem, 3.75rem); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-micro: 120ms; --dur-short: 220ms; --dur-long: 420ms; --radius-sm: 6px; --radius-md: 10px; --z-base: 1; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-modal: 400; --z-toast: 500; --z-tooltip: 600; } @font-face { font-family: "Space Grotesk"; src: url("/assets/space-grotesk.var-dfda626c.woff2") format("woff2"); font-style: normal; font-weight: 400 700; font-display: swap; } @font-face { font-family: "Inter"; src: url("/assets/inter.var-496a588b.woff2") format("woff2"); font-style: normal; font-weight: 400 600; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url("/assets/jetbrains-mono.var-68dbce1c.woff2") format("woff2"); font-style: normal; font-weight: 400 600; font-display: swap; } @media (prefers-color-scheme: dark) { :root { --color-paper: oklch(15% 0.012 260); --color-paper-2: oklch(19% 0.014 260); --color-paper-3: oklch(23% 0.015 260); --color-ink: oklch(93% 0.008 258); --color-ink-2: oklch(86% 0.01 258); --color-muted: oklch(68% 0.012 258); --color-rule: oklch(30% 0.014 260); --color-rule-2: oklch(38% 0.016 260); --color-accent: oklch(72% 0.16 256); --color-accent-ink: oklch(15% 0.012 260); --color-focus: oklch(72% 0.16 256); --color-graphite: oklch(12% 0.012 260); --color-success: oklch(70% 0.13 160); --color-error: oklch(72% 0.17 25); color-scheme: dark; } } /* Manual override (header theme toggle). Higher specificity than the media-query :root, so a user-forced choice always wins over the OS. The element carries data-theme="light" | "dark"; when it is set to neither, the prefers-color-scheme default above applies. */ :root[data-theme="light"] { --color-paper: oklch(98.5% 0.004 250); --color-paper-2: oklch(96% 0.005 250); --color-paper-3: oklch(93% 0.006 250); --color-ink: oklch(24% 0.02 258); --color-ink-2: oklch(34% 0.018 257); --color-muted: oklch(50% 0.012 255); --color-rule: oklch(88% 0.008 250); --color-rule-2: oklch(80% 0.01 250); --color-accent: oklch(58% 0.20 256); --color-accent-ink: oklch(98.5% 0.004 250); --color-focus: oklch(58% 0.20 256); --color-graphite: oklch(22% 0.016 260); --color-success: oklch(52% 0.13 160); --color-error: oklch(52% 0.18 25); color-scheme: light; } :root[data-theme="dark"] { --color-paper: oklch(15% 0.012 260); --color-paper-2: oklch(19% 0.014 260); --color-paper-3: oklch(23% 0.015 260); --color-ink: oklch(93% 0.008 258); --color-ink-2: oklch(86% 0.01 258); --color-muted: oklch(68% 0.012 258); --color-rule: oklch(30% 0.014 260); --color-rule-2: oklch(38% 0.016 260); --color-accent: oklch(72% 0.16 256); --color-accent-ink: oklch(15% 0.012 260); --color-focus: oklch(72% 0.16 256); --color-graphite: oklch(12% 0.012 260); --color-success: oklch(70% 0.13 160); --color-error: oklch(72% 0.17 25); color-scheme: dark; }