/* ═══════════════════════════════════════════════════════════════ FIDDLE — design tokens · 3.0 "HOLO" structure · "NEUTRAL SUBSTRATE" palette ─────────────────────────────────────────────────────────────── Source: fiddledarkdirections.html [data-dir="holo"] (2.0), then the 3.0e neutral-substrate candidate promoted to default (2026-07-24) after on-device A/B. Intent — neutral blue-black substrate with an elevation ladder; the accent is the ONLY thing that glows. Thin strokes; light type weights; generous air. 80% neutral, 20% vibrant — teal is the brand, not the wall paint. Layers: §1 primitives — raw values. App CSS must NOT reference these directly; go through §2+. §2 – §12 semantic + component tokens — the public API. §13 legacy bridge — every pre-2.0 "Fluid Dark" var name remapped to a Holo value, so all existing component CSS recolors without being touched. Retire these names as screens migrate. ═══════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap'); :root { /* ── §1 · PRIMITIVES ───────────────────────────────────────── The raw palette. Everything below derives from these. */ /* deep space — neutral blue-black substrate, never pure black */ --p-void-0: #06080C; /* deepest — grain / under-layers */ --p-void-1: #0A0D12; /* page background */ --p-void-2: #0D1118; /* raised background (nav, bars) */ /* panel tint — neutral slate the panels are "made of" */ --p-tint-1: 20, 27, 36; /* rgb triplet · panel fill */ --p-tint-2: 27, 36, 48; /* rgb triplet · raised panel fill */ /* ink — near-white ramp for text */ --p-ice-hi: #F4F7FA; /* primary text */ --p-ice-mid: #9AA8B7; /* secondary text */ --p-ice-lo: #66788C; /* tertiary / labels */ /* emitted light */ --p-cyan: #33E6C4; /* the accent. deeper teal, works harder */ --p-iceblue: #4EA7FF; /* second light — info blue, used sparingly */ --p-gold: #F5A524; /* true warning amber */ --p-coral: #EF4444; /* true error red */ /* accent alpha ramp — rgba(51,230,196,·) steps actually used. Fills at the low end, strokes mid, live edges high. */ --accent-a07: rgba(51,230,196,0.07); /* chip / tag fill */ --accent-a14: rgba(51,230,196,0.14); /* soft fill · CTA glass */ --accent-a20: rgba(51,230,196,0.20); /* hairline */ --accent-a34: rgba(51,230,196,0.34); /* strong hairline */ --accent-a48: rgba(51,230,196,0.48); /* live stroke */ --accent-a65: rgba(51,230,196,0.65); /* active edge */ /* second-light alpha steps */ --accent2-a09: rgba(78,167,255,0.09); /* substrate wash */ --accent2-a30: rgba(78,167,255,0.30); /* detail lines */ /* ── §2 · COLOR · SEMANTIC ─────────────────────────────────── */ --bg: var(--p-void-1); --bg-2: var(--p-void-2); /* solid surfaces = the elevation ladder (card → hover → selected), pre-composited over --bg. Used where translucency would hurt (over the camera feed). Panels use --panel-bg (§9) instead. */ --surface-solid-1: #141B24; --surface-solid-2: #1B2430; --surface-solid-3: #223445; --line: rgba(158,177,198,0.14); /* desaturated hairlines */ --line-2: rgba(158,177,198,0.25); --ink: var(--p-ice-hi); --muted: var(--p-ice-mid); --mute: var(--muted); /* sketch-compat alias */ --faint: var(--p-ice-lo); --accent: var(--p-cyan); --accent-2: var(--p-iceblue); --on-accent: #04211D; /* ink on a filled accent surface */ /* status */ --ok: var(--accent); /* success rides the accent */ --warn: var(--p-gold); --hot: var(--p-coral); --mod: #E8B84C; /* prestige gold — milestones, #1 rows, mods */ --mod-hi: #E8B84C; /* (folded into prestige gold at promotion) */ --gain: #22C55E; /* success green — gained horsepower */ --info: var(--p-iceblue); /* informational highlight — community intel */ /* status rgb triplets — component CSS derives its alpha'd fills/borders from these so the hue can move without touching alpha steps. --warn-rgb is caution; --mod-rgb is prestige (milestones, #1 rows). */ --accent-rgb: 51,230,196; --warn-rgb: 245,165,36; --mod-rgb: 232,184,76; --hot-rgb: 239,68,68; --gain-rgb: 34,197,94; --info-rgb: 78,167,255; --slate-rgb: 158,177,198; /* neutral pill fills */ --focus-ring: 2px solid var(--accent); /* ── §3 · PART-CATEGORY SPECTRUM ───────────────────────────── Encodes what a part is (AR dots, layers menu). Same hues as 1.0, retuned to projected light: lighter, less saturated. */ --cat-body: #6FA8FF; /* was #3B82F6 · body panels, doors */ --cat-light: #FFD37A; /* was #F5B301 · lighting */ --cat-glass: #79E3F7; /* was #22D3EE · glass */ --cat-elec: #C89BFF; /* was #A855F7 · electrical / charging */ --cat-drive: #FFB07A; /* was #FB923C · drive / intake */ --cat-wheel: #FF9AA8; /* was #FB7185 · wheels / brakes */ /* ── §4 · TYPOGRAPHY ───────────────────────────────────────── Three voices — Space Grotesk carries the display identity, Inter carries reading text, JetBrains Mono carries data. (2026-07-29: was Space Grotesk everywhere + Space Mono; swapped for small-size legibility on low-DPI screens.) */ --font-display: 'Space Grotesk', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; --fw-display: 400; /* big numbers & titles — 300 renders wispy on ClearType */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; /* ceiling for UI text — nothing heavier */ --fw-bold: 700; /* mono emphasis only */ --display-case: none; /* holo never shouts */ /* size scale */ --fs-2xs: 10px; /* nav labels, stat keys */ --fs-xs: 10.5px; /* eyebrows, captions */ --fs-sm: 11px; /* mono UI, meta */ --fs-md: 12px; /* callout labels */ --fs-body: 13.5px; /* running text */ --fs-ui: 14px; /* row titles */ --fs-lg: 15px; /* CTA */ --fs-xl: 17px; /* section heads */ --fs-2xl: 20px; /* stat values */ --fs-3xl: clamp(24px, 6vw, 32px); /* screen titles */ --fs-display: clamp(26px, 7vw, 38px); /* hero title */ --fs-readout: clamp(44px, 15vw, 58px); /* the big number */ /* tracking */ --track-display: -0.01em; /* regular weight tightens slightly */ --track-eyebrow: 0.18em; /* wide air — the holo eyebrow */ --track-caps: 0.12em; /* small caps labels */ --track-mono: 0.08em; /* mono UI text */ /* leading */ --lh-display: 1.02; --lh-tight: 1.15; --lh-ui: 1.25; --lh-body: 1.55; /* ── §5 · SPACE ────────────────────────────────────────────── Generous air is part of the direction. */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --pad: var(--sp-5); /* panel inset */ --gap: var(--sp-4); /* between panels */ /* ── §6 · RADIUS ───────────────────────────────────────────── */ --radius-sm: 9px; --radius: 14px; --radius-lg: 20px; --radius-pill: 999px; /* ── §7 · STROKE ───────────────────────────────────────────── Borders are thin, always. Weight comes from light, not width. */ --border: 1px solid var(--line); --border-strong: 1px solid var(--line-2); --border-accent: 1px solid var(--accent-a48); --border-live: 1px solid var(--accent); /* ── §8 · LIGHT ────────────────────────────────────────────── Glow = colored light leaking from the panel. Shadow = the dark drop that separates glass from what's behind it. */ /* elevation carries hierarchy — panels cast shadow, only LIVE things (active edges, glowing text) leak color */ --glow-panel: 0 10px 26px rgba(0,0,0,0.42); --glow-active: 0 0 22px var(--accent-a48); --glow-text: 0 0 12px var(--accent-a34); --glow-icon: drop-shadow(0 0 7px currentColor); --shadow-pop: 0 4px 18px rgba(0,0,0,0.55); /* floating cards */ --shadow-card: 0 10px 30px rgba(0,0,0,0.50); --shadow-soft: 0 4px 18px rgba(0,0,0,0.32); /* ── §9 · GLASS ────────────────────────────────────────────── The material. Fill + backdrop blur together, or use the pre-composited solids (§2) where blur is unaffordable. */ --glass-fill: rgba(var(--p-tint-1), 0.30); --glass-fill-2: rgba(var(--p-tint-2), 0.40); --blur-lite: 10px; /* CTA, chips */ --blur-glass: 14px; /* standard panel */ --blur-heavy: 20px; /* sheets over the camera feed */ --backdrop-glass: blur(var(--blur-glass)); --backdrop-glass-heavy: blur(var(--blur-heavy)) saturate(1.2); --panel-bg: var(--glass-fill); /* over-camera layers */ --scrim: rgba(6,8,12,0.64); /* dimming behind sheets */ --hud-bg: rgba(10,13,18,0.74); /* floating HUD chips */ /* ── §10 · SUBSTRATE ───────────────────────────────────────── A whisper of the two light sources — teal upper-left, info blue upper-right — over an otherwise neutral page. */ --page-substrate: radial-gradient(1000px 620px at 22% -8%, rgba(51,230,196,0.035), transparent 60%), radial-gradient(760px 520px at 92% 8%, rgba(78,167,255,0.03), transparent 62%), var(--bg); /* ── §11 · MOTION ──────────────────────────────────────────── */ --dur-fast: 0.18s; --dur-med: 0.25s; --dur-slow: 0.4s; --ease-out: cubic-bezier(0.2, 0.7, 0.3, 1); --ease-pop: cubic-bezier(0.2, 0.9, 0.3, 1.15); /* AR dot / callout pop-in */ /* ── §12 · COMPONENT ───────────────────────────────────────── */ /* CTA — glass, not filled: accent light through frosted panel */ --cta-fill: var(--accent-a14); --cta-ink: var(--accent); --cta-border: 1px solid var(--accent); /* eyebrow rule fades out — light diffusing along the line */ --eyebrow-rule: linear-gradient(90deg, var(--line-2), transparent); /* AR leader-line callout */ --callout-fill: rgba(10,13,18,0.85); --callout-line: var(--accent-a48); --callout-line-active: var(--accent); /* soft fills */ --chip-fill: var(--accent-a07); --accent-soft: var(--accent-a14); /* ── §13 · LEGACY BRIDGE — "Fluid Dark" (1.0) names ────────── Every var the existing component CSS consumes, remapped. Do not add new usages; retire as screens migrate to §2+. */ --bg-grain: var(--p-void-0); /* surfaces stay SOLID through the bridge so text over the camera feed keeps its contrast; panels go true-glass (--panel-bg + --backdrop-glass) in the structural pass. */ --surface: var(--surface-solid-1); --surface-2: var(--surface-solid-2); --surface-3: var(--surface-solid-3); --text: var(--ink); /* --muted / --faint / --line / --line-2 already canonical (§2) */ /* accent family — historic names from the orange era */ --orange: var(--accent); --orange-2: var(--accent-2); --orange-soft: var(--accent-a14); --orange-line: var(--accent-a48); /* success / price — folded into the accent */ --green: var(--accent); --green-soft: var(--accent-a14); /* warm + danger */ --hazard: var(--warn); --danger: var(--hot); /* coral, not crimson — heat diffused */ /* radii — one step tighter than 1.0 (10/16/22 → 9/14/20) */ --r-sm: var(--radius-sm); --r-md: var(--radius); --r-lg: var(--radius-lg); /* type — Jakarta/Inter/Plex out, Grotesk/Mono in. NOTE: 1.0 rules request wght 700/800; Grotesk tops out at 700 so they clamp. The structural pass brings display weights down to --fw-display (300). */ --ff-disp: var(--font-display); --ff-body: var(--font-body); --ff-mono: var(--font-mono); }