/* ============================================================ RankForge — Design Tokens (Mission Control / Flight Deck) Drop into the FastAPI static bundle and reference via var(--token). Dark is the default; [data-theme="light"] is a full, AA-correct reskin. Toggle by setting data-theme="light" on or a root wrapper. ============================================================ */ :root { /* ---- Surfaces & ink (dark, default) ---- */ --bg: #0a0b0f; /* app background */ --panel: #101218; /* cards, sidebars, top bars */ --panel2: #14161c; /* nested / secondary fills */ --raised: #191c24; /* raised elements */ --line: rgba(120,140,170,.16); /* hairline borders */ --line2: rgba(120,140,170,.30); /* stronger borders/inputs */ --tx: #eef2f8; /* primary text / headings */ --tx2: #aab3c4; /* secondary text */ --tx3: #8b94a6; /* tertiary / labels */ --tx4: #5a6273; /* faint / decorative ticks */ /* ---- Brand & semantic ---- */ --cy: #38d2f0; /* brand / primary action ("instrument cyan") */ --cyink: #06181c; /* ink that sits ON cyan (button label) */ --cysoft: rgba(56,210,240,.08); /* cyan tint fill */ --cyline: rgba(56,210,240,.30); /* cyan border */ --amber: #f3a937; /* telemetry / low-pressure warning */ --ambersoft: rgba(243,169,55,.07); --amberline: rgba(243,169,55,.30); --green: #45d69a; /* "go" / success / real win */ --greensoft: rgba(69,214,154,.08); --red: #f2615c; /* stop / "Again" grade */ --violet: #9a8cf5; /* info / categorical accent */ /* ---- Elevation & glow ---- */ --shadow: 0 24px 56px -28px rgba(0,0,0,.7); --glow: 0 0 8px rgba(56,210,240,.6); /* ---- Type families ---- */ --font-display: 'Space Grotesk', system-ui, sans-serif; /* headings, UI, buttons */ --font-mono: 'IBM Plex Mono', ui-monospace, monospace; /* data, labels, scores */ /* ---- Spacing scale (px) ---- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; /* ---- Radii ---- */ --r-sm: 5px; --r-md: 8px; --r-lg: 12px; --r-xl: 14px; --r-pill: 999px; /* ---- Motion (named language, all reduced-motion-safe) ---- */ --motion-scan: 8s; /* radar sweep on presence/gauges (linear, loops 8–24s) */ --motion-pulse: 2.4s; /* "online" / live status ease-in-out */ --motion-ignite: .5s; /* a real win logged (pop) */ --motion-transition: .25s; /* theme & screen changes */ /* ---- Data-viz: sequential ramp (odds bar, gauges, heatmap) ---- */ --dv-0: #0a3a47; --dv-1: #127a96; --dv-2: #38d2f0; --dv-3: #9fe9f7; /* categorical: var(--cy), var(--amber), var(--green), var(--violet), var(--red) */ /* ---- Font-size scale (px, exact values in use — do NOT round) ---- */ /* micro tier (badge pips, very small data labels) */ --fs-m7: 6px; /* absolute minimum — chart tick pip */ --fs-m6: 6.5px; /* mini pip label */ --fs-m5: 7.5px; /* compact badge / score pip */ --fs-m4: 8px; /* small badge label */ --fs-m3: 8.5px; /* compact counter */ --fs-m2: 9px; /* data grid sub-value */ --fs-m1: 9.5px; /* tight label / sub-tag */ /* label tier (UI labels, chips, secondary metadata) */ --fs-l4: 10px; /* xs chip / faint decoration */ --fs-l3: 10.5px; /* tertiary label / deck chip */ --fs-l2a: 11px; /* between l3 and l2 — nav micro-label */ --fs-l2: 11.5px; /* secondary label / badge */ --fs-l1: 12px; /* primary label / section tag */ /* body tier (readable prose, UI body copy) */ --fs-b4: 12.5px; /* between label and body — compact read */ --fs-b3: 13px; /* small body / sub-paragraph */ --fs-b2a: 13.5px; /* between b3 and b2 — card body */ --fs-b2: 14px; /* default body copy */ --fs-b1: 15px; /* large body / comfortable read */ /* display tier (headings, section titles, hero numbers) */ --fs-d4: 17px; /* small heading / sub-section title */ --fs-d-sm: 21px; /* between d4 and d2 — compact heading */ --fs-d2: 22px; /* secondary display heading */ --fs-d-a: 23px; /* between d2 and d-b */ --fs-d-b: 24px; /* card display heading */ --fs-d-c: 28px; /* large section heading */ --fs-d1: 30px; /* primary display heading */ --fs-d0: 40px; /* hero number / big metric */ --fs-d3: 68px; /* XXL hero / full-bleed display number */ } [data-theme="light"] { --bg: #e9edf3; --panel: #ffffff; --panel2: #f4f7fb; --raised: #ffffff; --line: rgba(40,62,92,.14); --line2: rgba(40,62,92,.26); --tx: #0f141b; --tx2: #41505f; --tx3: #5d6b7b; --tx4: #8793a3; --cy: #0b86a6; /* darkened for AA on light surfaces */ --cyink: #ffffff; --cysoft: rgba(11,134,166,.07); --cyline: rgba(11,134,166,.32); --amber: #a96a08; --ambersoft: rgba(169,106,8,.07); --amberline: rgba(169,106,8,.30); --green: #15936a; --greensoft: rgba(21,147,106,.08); --red: #cc362f; --violet: #5d51b8; --shadow: 0 20px 44px -26px rgba(40,62,92,.30); --glow: 0 0 8px rgba(11,134,166,.45); --dv-0: #cdeaf2; --dv-1: #4bb6d2; --dv-2: #0b86a6; --dv-3: #075f78; } @media (prefers-reduced-motion: reduce) { * { animation: none !important; } }