/* ================================================================ IntrinsicIQ — Design Tokens (SINGLE SOURCE OF TRUTH) ──────────────────────────────────────────────────────────────── Every page loads this FIRST, before any other stylesheet. Palette, typography, spacing, radius, and layout metrics live here and nowhere else — app pages, marketing pages, and the landing hero all read the same variables, so the product can never drift into two looks again. Dark is the default (:root); the "Ivory" light theme re-declares the same token names under [data-theme="light"]. The pre-paint script in each page stamps data-theme before first paint. ================================================================ */ :root { /* ── Core palette ── Neutral near-black ground, zinc text, lemon gold #f2ca50/#D4AF37. Page and sidebar share the same deep black — one continuous ground with cards floating on it. */ --bg: #0e0e0e; --surface: #161616; --sidebar-bg: #0e0e0e; --surface-alt: #1c1c1c; --surface-hover: #222222; --border: rgba(212,175,55,0.16); --border-light: rgba(212,175,55,0.32); /* Hairlines have to survive the lighter card too: 7% white on a 3.0% card is 1.24:1 — barely there. 12% gets a legible 1.47:1. */ --border-zinc: rgba(255,255,255,0.07); /* Aliases kept so page-level stylesheets agree. */ --surface-2: var(--surface-alt); --surface-3: var(--surface-hover); /* ── Golden accent ── Three jobs only: hero value, active state, override. Large gold numerals use --gilt (gradient-clipped), buttons use the milled-metal gradient — never flat fills on big areas. */ --gold: #f2ca50; --gold-dim: #D4AF37; --gold-bg: rgba(242,202,80,0.08); --gold-glow: rgba(242,202,80,0.22); --gold-line: rgba(212,175,55,0.24); --gold-focus: 0 0 0 3px rgba(242,202,80,0.12); --amber: var(--gold); --amber-dim: var(--gold-dim); --amber-bg: var(--gold-bg); --amber-glow: var(--gold-glow); /* ── Text hierarchy ── zinc ramp; dim lifted to clear the 3:1 WCAG floor. */ --text: #e5e2e1; --text-muted: #a1a1aa; --text-dim: #6b6b74; /* ── Functional ── all pass WCAG on the card: green 7.9, red 4.8, blue 7.1. */ --green: #22c55e; --green-bg: rgba(34,197,94,0.12); --red: #ef4444; --red-bg: rgba(239,68,68,0.12); --blue: #60a5fa; --blue-bg: rgba(96,165,250,0.12); --purple: #c084fc; --warn: #fbbf24; /* ── Typography ── IBM Plex family (self-hosted in vendor/fonts, no CDN) + Cormorant Garamond for display. The data face is the loudest thing in the app. */ --mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace; --serif: 'IBM Plex Serif', Georgia, serif; /* Display face for verdicts and titles. Cormorant has a small x-height, so it is reserved for sizes >= 14px and never used on data. */ --display: 'Cormorant Garamond', 'IBM Plex Serif', Georgia, serif; --sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif; /* ── Gilt ── gold as metal: a gradient across thin elements — rules, borders, numerals — never a flat yellow fill. */ --gilt: linear-gradient(160deg, #f7dd7f 0%, #d4af37 50%, #9c7c22 80%, #d9b74a 100%); --gilt-button: linear-gradient(180deg, #f7dd7f 0%, #ecc959 55%, #d4af37 100%); /* Shared chrome and editorial surfaces. Public pages and the workspace remain different contexts, but they should feel cut from one material. */ --chrome-bg: rgba(14,14,14,0.92); --chrome-border: var(--border-zinc); --surface-glass: rgba(22,22,22,0.86); --ambient-gold: radial-gradient(700px 360px at 50% 0%, rgba(242,202,80,0.075), transparent 68%); --shadow-panel: 0 18px 60px rgba(0,0,0,0.22); /* ── Radius: panels sit softly (6px); controls slightly tighter. ── */ --r-panel: 6px; --r-ctl: 4px; /* ── Spacing scale ── */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; /* ── Layout ── */ --sidebar-w: 220px; /* Marketing/content max width (was redefined per-file; unified here). */ --max-w: 1100px; --reading-w: 760px; --chrome-h: 64px; /* Motion is deliberately quiet: the product should feel like an analytical instrument rather than an animated marketing template. */ --ease-out: cubic-bezier(.2,.8,.2,1); --transition-fast: 150ms var(--ease-out); } /* ═══════════════════════════════════════════════════════════════ LIGHT THEME — "Ivory" Quiet carved cards, gold scarce, data in mono, hairlines not shadows. Gold is recast as bronze ink — lemon gold is 1.6:1 on paper and cannot survive the inversion. All values WCAG-verified on the #faf8f2 card. ═══════════════════════════════════════════════════════════════ */ [data-theme="light"] { --bg: #f2f1ed; --surface: #fbfaf8; --sidebar-bg: #ecebe6; --surface-alt: #f0efea; --surface-hover: #e8e7e1; --border: rgba(24,24,22,0.14); --border-light: rgba(24,24,22,0.24); --border-zinc: rgba(24,24,22,0.08); --gold: #8a6a17; /* bronze ink */ --gold-dim: #a8842a; --gold-bg: rgba(138,106,23,0.10); --gold-glow: rgba(138,106,23,0.20); --gold-line: rgba(138,106,23,0.25); --gold-focus: 0 0 0 3px rgba(138,106,23,0.12); --text: #1a1a18; --text-muted: #68675f; --text-dim: #8b8a80; --green: #1a7a4a; --green-bg: rgba(26,122,74,0.10); --red: #b23527; --red-bg: rgba(178,53,39,0.08); --blue: #2d6cb0; --blue-bg: rgba(45,108,176,0.08); --purple: #7d509c; --warn: #8f5b12; --gilt: linear-gradient(160deg, #a8842a 0%, #7c5f14 55%, #96741e 100%); --gilt-button: linear-gradient(180deg, #b28b2f 0%, #9d781f 58%, #7c5f14 100%); --chrome-bg: rgba(242,241,237,0.92); --chrome-border: var(--border); --surface-glass: rgba(251,250,248,0.88); --ambient-gold: radial-gradient(700px 360px at 50% 0%, rgba(138,106,23,0.08), transparent 68%); --shadow-panel: 0 18px 60px rgba(32,28,20,0.08); }