/* Cronyx Brand System — tokens.css The single source of truth. Every component reads from these. */ :root { /* ── Colour ── */ --ink: #141414; --ink-soft: #2a2420; --ink-mute: #6b635c; --bone: #F4EFE6; --bone-soft: #EDE6D9; --bone-mute: #E2D9C6; --brass: #B08754; --brass-light:#C9A063; --brass-deep: #8E6A3F; --rule: rgba(20,20,20,0.12); --rule-soft: rgba(20,20,20,0.06); --signal-success: #5C7A4F; --signal-warn: #C28E3A; --signal-error: #A24A3F; --signal-info: #4A6A7A; /* Semantic surfaces (light defaults) */ --surface: #F4EFE6; /* page bg */ --surface-soft: #EDE6D9; /* secondary panels */ --surface-mute: #E2D9C6; /* muted bands */ --surface-inverse:#141414; /* high-contrast bands */ --on-surface: #141414; --on-surface-soft: rgba(20,20,20,0.78); --on-surface-mute: rgba(20,20,20,0.55); --on-surface-inverse:#F4EFE6; --accent: #B08754; --accent-light: #C9A063; --accent-on: #F4EFE6; /* text on accent backgrounds */ /* Gold used ON inverse (high-contrast) bands. Light mode: band is dark, light gold reads fine. Dark mode: band inverts to cream, so this must darken or it disappears into the background. */ --accent-inverse: #C9A063; } /* ── Dark mode ── */ [data-theme="dark"] { --ink: #F4EFE6; --ink-soft: #DDD3C1; --ink-mute: #A8A099; --bone: #0E0E0E; --bone-soft: #181613; --bone-mute: #221E18; --brass: #C9A063; --brass-light:#DBB57A; --brass-deep: #8E6A3F; --rule: rgba(244,239,230,0.14); --rule-soft: rgba(244,239,230,0.07); --signal-success: #7CA46A; --signal-warn: #D8A14A; --signal-error: #C66A5E; --signal-info: #6A8FA0; --surface: #0E0E0E; --surface-soft: #181613; --surface-mute: #221E18; --surface-inverse:#F4EFE6; --on-surface: #F4EFE6; --on-surface-soft: rgba(244,239,230,0.78); --on-surface-mute: rgba(244,239,230,0.55); --on-surface-inverse:#141414; --accent: #C9A063; --accent-light: #DBB57A; --accent-on: #0E0E0E; --accent-inverse: #7A5A33; } /* System-pref default — applied only if user hasn't set a manual theme. theme.js sets data-theme on for either choice; this @media only kicks in when no data-theme is set. */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --ink: #F4EFE6; --ink-soft: #DDD3C1; --ink-mute: #A8A099; --bone: #0E0E0E; --bone-soft: #181613; --bone-mute: #221E18; --brass: #C9A063; --brass-light:#DBB57A; --brass-deep: #8E6A3F; --rule: rgba(244,239,230,0.14); --rule-soft: rgba(244,239,230,0.07); --signal-success: #7CA46A; --signal-warn: #D8A14A; --signal-error: #C66A5E; --signal-info: #6A8FA0; --surface: #0E0E0E; --surface-soft: #181613; --surface-mute: #221E18; --surface-inverse:#F4EFE6; --on-surface: #F4EFE6; --on-surface-soft: rgba(244,239,230,0.78); --on-surface-mute: rgba(244,239,230,0.55); --on-surface-inverse:#141414; --accent: #C9A063; --accent-light: #DBB57A; --accent-on: #0E0E0E; --accent-inverse: #7A5A33; } } /* Type / spacing / geometry / motion tokens. Must live inside :root — they were orphaned at top level after the dark-mode blocks were inserted, which silently dropped every one of them (the whole site fell back to Times New Roman). */ :root { /* ── Type ── */ --serif: 'Cormorant Garamond', 'Didot', 'Hoefler Text', Georgia, serif; --sans: 'Jost', 'Futura', 'Avenir Next', -apple-system, sans-serif; --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; --w-thin: 200; --w-light: 300; --w-regular: 400; --w-medium: 500; /* Type scale (modular, 1.25 ratio anchored at 16) */ --t-xs: 11px; --t-sm: 13px; --t-base: 15px; --t-md: 18px; --t-lg: 22px; --t-xl: 28px; --t-2xl: 36px; --t-3xl: 48px; --t-4xl: 64px; --t-5xl: 88px; --leading-tight: 1.05; --leading-snug: 1.25; --leading-body: 1.65; --leading-loose: 1.85; --tracking-tight: -0.015em; --tracking-base: 0em; --tracking-wide: 0.08em; --tracking-caps: 0.32em; --tracking-caps-wide: 0.44em; /* ── Spacing (4-base) ── */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px; --s-32: 128px; /* ── Geometry ── */ --r-none: 0; --r-sm: 2px; --r-md: 4px; --r-lg: 8px; --r-xl: 14px; --r-pill: 999px; /* ── Motion ── */ --d-fast: 120ms; --d-base: 200ms; --d-slow: 360ms; --ease-standard: cubic-bezier(0.2, 0.7, 0.3, 1); --ease-emphasis: cubic-bezier(0.34, 1.2, 0.4, 1); /* ── Elevation (used sparingly) ── */ --shadow-1: 0 1px 2px rgba(20,20,20,0.05); --shadow-2: 0 1px 3px rgba(20,20,20,0.06), 0 6px 16px rgba(20,20,20,0.06); --shadow-3: 0 2px 8px rgba(20,20,20,0.08), 0 24px 60px rgba(20,20,20,0.10); /* ── Layout ── */ --container: 1200px; --container-narrow: 720px; --header-h: 72px; } /* ── Base reset ── */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bone); color: var(--ink); font-family: var(--sans); font-weight: var(--w-light); font-size: var(--t-base); line-height: var(--leading-body); min-width: 1200px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background 300ms ease, color 300ms ease; } /* ── Type primitives ── */ .t-display { font-family: var(--serif); font-weight: var(--w-light); font-size: var(--t-5xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); } .t-h1 { font-family: var(--serif); font-weight: var(--w-light); font-size: var(--t-4xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); } .t-h2 { font-family: var(--serif); font-weight: var(--w-light); font-size: var(--t-3xl); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); } .t-h3 { font-family: var(--serif); font-weight: var(--w-light); font-size: var(--t-2xl); line-height: var(--leading-snug); } .t-h4 { font-family: var(--serif); font-weight: var(--w-regular); font-size: var(--t-xl); line-height: var(--leading-snug); } .t-lede { font-family: var(--sans); font-weight: var(--w-light); font-size: var(--t-md); line-height: var(--leading-body); opacity: 0.78; } .t-body { font-family: var(--sans); font-weight: var(--w-light); font-size: var(--t-base); line-height: var(--leading-body); } .t-small { font-family: var(--sans); font-weight: var(--w-light); font-size: var(--t-sm); line-height: var(--leading-body); } .t-eyebrow { font-family: var(--sans); font-weight: var(--w-regular); font-size: var(--t-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; opacity: 0.65; } .t-eyebrow-wide { font-family: var(--sans); font-weight: var(--w-regular); font-size: var(--t-xs); letter-spacing: var(--tracking-caps-wide); text-transform: uppercase; opacity: 0.6; } .t-mono { font-family: var(--mono); font-size: var(--t-sm); } /* ── Rules ── */ .rule { border: 0; border-top: 1px solid var(--rule); margin: 0; } /* ── Utility ── */ .muted { opacity: 0.7; } .tabular { font-variant-numeric: tabular-nums; }