/* ============================================================================ HENDERBURGH OS — Design Tokens ---------------------------------------------------------------------------- One source of truth for colour, type, radius, spacing, elevation and motion. WHY THIS EXISTS An audit of the templates found the system had drifted badly: 17 distinct border-radius values, ~15 near-identical dark greys drawn from THREE different Tailwind palettes (zinc + neutral + slate) mixed inside the same product, 3 different "accent greens", and ~19 font sizes including 8-9px text that is unreadable at arm's length. Individually every page looked fine; together they never felt like one crafted product. This file collapses that sprawl. HOW TO USE - Prefer a token over a raw hex/px value. Always. - Prefer a primitive class (.hb-card, .hb-label, .hb-stat) over re-styling. - Tailwind utilities still work; tokens are for anything Tailwind can't express consistently, and for the component primitives below. - Adding a NEW colour/size/radius should feel like a decision, not a reflex. If you need one, it probably belongs here rather than in a template. ACCESSIBILITY NOTE The old `text-zinc-500` (#71717a) on the near-black background measures ~3.0:1, which fails WCAG AA (4.5:1) for body text — and it was used 165 times, often at 10-11px where it matters most. --text-3 below is reserved for >=12px incidental text only; --text-2 is the smallest safe default for anything you must read. ========================================================================== */ :root { /* ── Colour ─────────────────────────────────────────────────────────────── Neutral charcoal, not navy — no blue hue in the background ramp, kept ominous/instrument-panel dark rather than tech-blue. Backgrounds are never pure #000: on OLED phones pure black smears during scroll and makes "off" states invisible. */ --navy-0: #0a0a0b; /* page */ --navy-1: #131316; /* card / panel */ --navy-2: #1a1a1f; /* raised, hover, input */ --navy-3: #232329; /* pressed / active well */ --bg: var(--navy-0); --surface: var(--navy-1); --surface-2: var(--navy-2); --surface-3: var(--navy-3); --line: rgba(255, 255, 255, 0.08); /* default hairline */ --line-strong: rgba(255, 255, 255, 0.14); /* emphasised border */ --text: #e8edf2; /* primary — headings, numbers */ --text-2: #a7b0bd; /* secondary — passes AA at all sizes */ --text-3: #7a8494; /* tertiary — >=12px incidental text ONLY */ /* ONE accent: emerald green. Cyan is gone. --accent (brand/link/focus/ active-nav) and --success (on/live/good state) are the same colour again — the split was overthinking it; the original site used one green for both and it read fine. Both tokens stay defined so nothing that already migrated onto var(--success) needs touching. */ --accent: #4ade80; /* emerald — the only accent */ --accent-rgb: 74, 222, 128; --accent-dim: rgba(74, 222, 128, 0.14); --accent-line: rgba(74, 222, 128, 0.32); --success: #4ade80; --success-rgb: 74, 222, 128; --success-dim: rgba(74, 222, 128, 0.14); --success-line: rgba(74, 222, 128, 0.32); --amber: #FFB454; /* second accent — highlight, secondary stat */ --violet: #8B7FFF; /* third accent — tertiary stat, rare use */ --info: #60a5fa; /* the one blue: links, secondary state */ --warn: #f59e0b; /* stale data, needs attention */ --danger: #f87171; /* failure, destructive */ /* ── Type ───────────────────────────────────────────────────────────────── Canonical stack (matches /vitals): sans = Inter — body, card titles, UI chrome display = Space Grotesk — hero / page identity, big stats mono = system mono — rare code-like bits only Labels on vitals are Inter uppercase + tracking, not mono. */ --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif; --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --t-label: 0.625rem; /* 10px — MONO UPPERCASE LABELS ONLY, never prose */ --t-xs: 0.75rem; /* 12px — smallest readable incidental text */ --t-sm: 0.8438rem; /* 13.5px — dense secondary copy */ --t-base: 0.9375rem; /* 15px — body */ --t-lg: 1.125rem; /* 18px — card titles */ --t-xl: 1.5rem; /* 24px — section headings */ --t-2xl: clamp(1.75rem, 4vw, 2.25rem); /* page headings */ --t-hero: clamp(2.25rem, 7vw, 3.75rem); /* the front-door statement */ --lh-tight: 1.1; --lh-snug: 1.35; --lh-body: 1.55; /* ── Radius ─────────────────────────────────────────────────────────────── Four values, replacing seventeen. */ --r-sm: 0.5rem; /* 8px — chips, inputs, small controls */ --r-md: 0.75rem; /* 12px — buttons, tiles */ --r-lg: 1rem; /* 16px — cards, panels */ --r-full: 999px; /* pills, dots, avatars */ /* ── Spacing (4px base) ──────────────────────────────────────────────────*/ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.25rem; --s-6: 1.5rem; --s-8: 2rem; --s-12: 3rem; /* ── Elevation ───────────────────────────────────────────────────────────*/ --shadow-sm: 0 1px 2px rgba(0,0,0,0.30); --shadow-md: 0 4px 12px -2px rgba(0,0,0,0.35); --shadow-lg: 0 16px 32px -12px rgba(0,0,0,0.45); /* ── Motion ────────────────────────────────────────────────────────────── Press is deliberately sub-100ms: on a control you tap constantly it must read as physical, not as an animation. Anything above ~150ms on an action feels like latency. Longer easing is reserved for decoration. */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-press: cubic-bezier(0.2, 0, 0, 1); --d-press: 80ms; --d-fast: 140ms; --d-base: 260ms; --d-slow: 400ms; /* Minimum comfortable touch target (audit found 26px toggles). */ --tap-min: 44px; } /* ============================================================================ PRIMITIVES — the small set of component classes pages should reach for. Prefixed `hb-` so they can be adopted incrementally without colliding with the existing .card / .live-card rules still in the templates. ========================================================================== */ /* ── Pointer-tracked spotlight glow ─────────────────────────────────────────── The homepage's signature card hover: a soft wash that follows the cursor plus a gradient hairline that lights up under it. Lives here (not in one page's