/* ========================================================================== Design tokens Light theme is the default; [data-theme="dark"] on overrides it. theme.js sets data-theme before first paint to avoid a flash of the wrong theme. ========================================================================== */ :root { /* ---- color: light (default) ---- */ --color-bg: #F6F5F1; --color-surface: #FFFFFF; --color-surface-raised: #FCFBF8; --color-border: #DEDBD2; --color-border-strong: #C7C3B6; --color-text: #1B1F1D; --color-text-muted: #5B615B; --color-text-faint: #8B9089; --color-accent: #B5502E; /* rust copper — primary */ --color-accent-strong: #953E22; --color-accent-contrast: #FBF4EE; --color-signal: #1E7A5F; /* deep teal — links, success, cursor */ --color-signal-contrast: #FFFFFF; --color-focus-ring: #1E7A5F; --color-code-bg: #1B1F1D; --color-code-text: #E8E6DE; /* ---- type ---- */ --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Roboto, 'Helvetica Neue', Arial, sans-serif; --step--1: clamp(0.83rem, 0.8rem + 0.14vw, 0.9rem); --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.1rem); --step-1: clamp(1.2rem, 1.13rem + 0.35vw, 1.4rem); --step-2: clamp(1.44rem, 1.32rem + 0.6vw, 1.75rem); --step-3: clamp(1.9rem, 1.65rem + 1.2vw, 2.5rem); --step-4: clamp(2.5rem, 2.05rem + 2.2vw, 3.6rem); --step-5: clamp(3.1rem, 2.4rem + 3.4vw, 4.6rem); --leading-tight: 1.12; --leading-snug: 1.35; --leading-normal: 1.6; /* ---- space ---- */ --space-3xs: 0.25rem; --space-2xs: 0.5rem; --space-xs: 0.75rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2.25rem; --space-xl: 3.5rem; --space-2xl: 5.5rem; --space-3xl: 8rem; --content-max: 72rem; --measure: 62ch; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --shadow-sm: 0 1px 2px rgba(27, 31, 29, 0.06), 0 1px 1px rgba(27, 31, 29, 0.04); --shadow-md: 0 8px 24px rgba(27, 31, 29, 0.08), 0 2px 6px rgba(27, 31, 29, 0.05); --ease: cubic-bezier(0.4, 0, 0.2, 1); --duration-fast: 120ms; --duration-base: 220ms; --duration-theme: 320ms; } [data-theme="dark"] { --color-bg: #0F1512; --color-surface: #161C19; --color-surface-raised: #1C2320; --color-border: #2A322D; --color-border-strong: #3A443E; --color-text: #E8E6DE; --color-text-muted: #9CA39C; --color-text-faint: #6C736C; --color-accent: #E0754A; --color-accent-strong: #F2925F; --color-accent-contrast: #17110C; --color-signal: #55D6A8; --color-signal-contrast: #0F1512; --color-focus-ring: #55D6A8; --color-code-bg: #0B0F0D; --color-code-text: #DCEAE2; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 12px 28px rgba(0, 0, 0, 0.45); } /* Respect the OS setting only until the visitor makes an explicit choice (theme.js removes this by writing data-theme once a choice is stored). */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { --color-bg: #0F1512; --color-surface: #161C19; --color-surface-raised: #1C2320; --color-border: #2A322D; --color-border-strong: #3A443E; --color-text: #E8E6DE; --color-text-muted: #9CA39C; --color-text-faint: #6C736C; --color-accent: #E0754A; --color-accent-strong: #F2925F; --color-accent-contrast: #17110C; --color-signal: #55D6A8; --color-signal-contrast: #0F1512; --color-focus-ring: #55D6A8; --color-code-bg: #0B0F0D; --color-code-text: #DCEAE2; } }