/* Iron & Ember — Design Tokens All CSS custom properties. Replace this file to apply a different theme. No selectors, no rules — tokens only. ========================================================================== */ /* * Breakpoints — canonical scale * sm: 480px (small mobile) * md: 768px (tablet+) complementary: max-width 767px / min-width 768px * lg: 1024px (desktop+) complementary: max-width 1023px / min-width 1024px * xl: 1280px (wide) matches --max-width token * * Note: CSS custom properties cannot be used inside @media queries. * These values are a documented convention, not CSS variables. */ :root { /* ── Surface ── */ --color-surface-page: #ffffff; /* Main content — docs, most pages */ --color-surface-warm: #fcf8f9; /* Homepage hero, Solved content zone */ --color-surface-subtle: #f5f2f3; /* Subtle card backgrounds on light */ --color-surface-cool: #f1f5f9; /* Cool neutral surface (bento cards) */ --color-surface-container: #f0edee; /* Mid-tone card, slightly deeper than subtle */ --color-surface-steel: #2e3038; /* Navbar */ --color-surface-dark: #111113; /* Developer sections, Devlog, footer */ --color-surface-code: #020617; /* Code block bg on dark surfaces */ /* ── Text ── */ --color-text-primary: #1b1b1c; /* Body text on light surfaces */ --color-text-inverse: #ffffff; /* Text on dark surfaces */ --color-text-muted: #6b6b6f; /* Secondary text, meta, captions */ --color-text-muted-warm: #5b4138; /* Muted text on warm surfaces (hero, solved) */ --color-text-muted-dark: #94a3b8; /* Muted text on dark surfaces (devlog, solved, footer) */ --color-text-on-accent: #ffffff; /* Text on orange backgrounds */ --color-text-code: #cbd5e1; /* Code syntax text on dark code blocks */ /* ── Accent ── */ --color-accent: #ff5f1f; /* Primary orange */ --color-accent-deep: #ab3600; /* Gradient start, hover */ --gradient-cta: linear-gradient(135deg, #ab3600, #ff5f1f); /* ── Interactive ── */ --color-interactive: #006493; /* Links, developer path, info callouts */ --color-interactive-dark: #4db3e8; /* Lightened for dark surfaces (dark mode / dark bg) */ /* ── Border ── */ --color-border: #e4e0e1; /* Dividers, card strokes on light */ --color-border-warm: #eae7e8; /* Dividers on warm surfaces (how-grid) */ --color-border-dark: #3a3a3f; /* Dividers on dark surfaces */ /* ── Feedback ── */ --color-info-bg: #e8f4fa; --color-info-border: #006493; /* ── Radius ── */ --radius-button: 12px; /* All buttons */ --radius-card: 4px; /* Content cards */ --radius-pill: 999px; /* Filter pills only */ --radius-callout: 8px; /* Info/warning callout boxes */ /* ── Typography ── */ --font-sans: 'Plus Jakarta Sans', system-ui, sans-serif; /* ── Spacing scale ── */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem; /* ── Layout ── */ --max-width: 1280px; --content-width: 960px; --nav-height: 64px; } /* ── Dark mode overrides ── Applied via [data-theme="dark"] on . Toggle JS and prefers-color-scheme media query in a future sprint. ======================================================================== */ [data-theme="dark"] { --color-surface-page: #1c1b1e; --color-surface-warm: #211e1f; --color-surface-subtle: #252224; --color-surface-steel: #2e3038; /* unchanged */ --color-surface-dark: #111113; /* unchanged */ --color-surface-code: #020617; --color-text-primary: #e6e4e5; --color-text-muted: #9b9ba0; --color-interactive: #4db3e8; --color-border: #3a3a3f; --color-border-dark: #3a3a3f; /* unchanged */ --color-info-bg: #0d2b3a; --color-info-border: #4db3e8; } /* ── Docs dark mode ── Scoped to body.docs-dark — applies only on /docs and /docs/{slug}. Does NOT affect home, devlog, or solved surfaces. ======================================================================== */ .docs-dark { --color-surface-page: #1c1b1e; --color-surface-warm: #211e1f; --color-surface-subtle: #252224; --color-surface-cool: #1a2332; --color-surface-steel: #2e3038; --color-surface-dark: #111113; --color-surface-code: #020617; --color-text-primary: #e6e4e5; --color-text-muted: #9b9ba0; --color-interactive: #4db3e8; --color-border: #3a3a3f; --color-border-warm: #3a3a3f; --color-info-bg: #0d2b3a; --color-info-border: #4db3e8; --color-surface-container: #2a2730; --color-text-muted-warm: #94a3b8; }