@font-face { font-family: "Montserrat"; src: url("fonts/montserrat-latin-variable.woff2") format("woff2"); font-style: normal; font-weight: 100 900; font-display: swap; } @font-face { font-family: "Cabinet Grotesk"; src: url("fonts/cabinet-grotesk-400.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; } @font-face { font-family: "Cabinet Grotesk"; src: url("fonts/cabinet-grotesk-500.woff2") format("woff2"); font-style: normal; font-weight: 500; font-display: swap; } @font-face { font-family: "Cabinet Grotesk"; src: url("fonts/cabinet-grotesk-700.woff2") format("woff2"); font-style: normal; font-weight: 600 700; font-display: swap; } @font-face { font-family: "General Sans"; src: url("fonts/general-sans-400.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; } @font-face { font-family: "General Sans"; src: url("fonts/general-sans-500.woff2") format("woff2"); font-style: normal; font-weight: 500; font-display: swap; } @font-face { font-family: "General Sans"; src: url("fonts/general-sans-600.woff2") format("woff2"); font-style: normal; font-weight: 600 700; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url("fonts/jetbrains-mono-500-latin.woff2") format("woff2"); font-style: normal; font-weight: 500; font-display: swap; } :root { color-scheme: dark; --surface-deep: oklch(11% 0.018 255); --surface-raised: oklch(16% 0.025 255); --surface-active: oklch(21% 0.035 255); --surface-mist: oklch(92% 0.018 235); --ink-strong: oklch(95% 0.012 235); --ink-soft: oklch(78% 0.025 240); --ink-muted: oklch(64% 0.03 240); --ink-dark: oklch(15% 0.025 255); --rule: oklch(33% 0.045 250); --rule-soft: color-mix(in oklch, var(--rule) 58%, transparent); --brand-blue: oklch(63% 0.17 242); --brand-blue-bright: oklch(74% 0.16 225); --brand-blue-action: oklch(49% 0.16 242); --brand-blue-action-hover: oklch(53% 0.16 238); --brand-blue-ink: oklch(15% 0.025 255); --action-ink: oklch(95% 0.012 235); --brand-blue-dark-label: oklch(46% 0.16 242); --particle-fallback: oklch(74% 0.16 225); --signal-violet: oklch(68% 0.21 295); --focus: oklch(80% 0.16 215); --danger: oklch(68% 0.2 28); --font-display: "Cabinet Grotesk", "Avenir Next", sans-serif; --font-heading: "Montserrat", "Segoe UI", sans-serif; --font-body: "General Sans", "Segoe UI", sans-serif; --font-data: "JetBrains Mono", monospace; --font-header: var(--font-heading); --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4.5rem; --space-9: 7rem; --space-10: 10rem; --radius-sm: 0; --radius-md: 0; --shell: min(90rem, calc(100% - 3rem)); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); } /* Light mode — toggled via [data-theme="light"] on (see ThemeToggle.astro). Surfaces/ink invert; --surface-mist + --ink-dark (a light "highlight chip" pairing meant to stand out against the dark page) invert roles too, so callouts like .walkthrough / .handoff keep contrasting with their now-light surroundings instead of disappearing into them. */ :root[data-theme="light"] { color-scheme: light; --surface-deep: oklch(97% 0.006 235); --surface-raised: oklch(93% 0.012 235); --surface-active: oklch(88% 0.02 235); --surface-mist: oklch(19% 0.03 250); --ink-strong: oklch(18% 0.02 255); --ink-soft: oklch(34% 0.03 250); --ink-muted: oklch(48% 0.025 245); --ink-dark: oklch(96% 0.012 235); --rule: oklch(75% 0.025 240); --rule-soft: color-mix(in oklch, var(--rule) 58%, transparent); --brand-blue: oklch(50% 0.17 242); --brand-blue-bright: oklch(44% 0.17 235); --brand-blue-dark-label: oklch(72% 0.16 225); --particle-fallback: oklch(42% 0.15 235); --focus: oklch(52% 0.18 220); }