/* ============================================================ RivL design tokens — single source of truth for all surfaces. Values extracted from the approved design exports, 2026-07-23. Import into every prototype: ============================================================ */ :root { /* --- Brand accent ------------------------------------------------ */ --rivl-lime: #C8F542; /* primary accent — CTAs, highlights */ --rivl-lime-ink: #0C1210; /* text on lime */ --rivl-green: #1E6B44; /* secondary accent / success */ --rivl-green-ink: #FFFFFF; --rivl-gold: #B98A2F; /* editorial / championship accents */ /* --- Ink (dark greens, not neutral black) ------------------------ */ --ink-900: #0C1210; /* deepest — page background */ --ink-800: #121A16; --ink-700: #16211B; --ink-600: #1C3A2A; /* --- Sage scale (the workhorse greys) ---------------------------- */ --sage-700: #5C6B60; --sage-600: #6C746B; --sage-500: #7E8B80; --sage-400: #93A096; /* most-used value in the whole system */ --sage-300: #B9C2BA; --sage-200: #C3CDC4; --sage-100: #DDE1D8; /* --- Paper ------------------------------------------------------- */ --paper-100: #EEF0EC; --paper-50: #F2F5F0; --paper-25: #FAFBF7; --white: #FFFFFF; /* --- Feedback ---------------------------------------------------- */ --error: #B3423A; /* --- Type -------------------------------------------------------- */ --font-display: 'Anton', 'Archivo', sans-serif; /* headlines, all-caps */ --font-body: 'Archivo', system-ui, sans-serif; /* everything else */ --font-editorial: 'Instrument Serif', serif; /* pull quotes */ --font-accent: 'Bricolage Grotesque', 'Archivo', sans-serif; /* Google Fonts in use — keep this link in every prototype head: https://fonts.googleapis.com/css2?family=Anton&family=Archivo:wght@400;600;700&family=Instrument+Serif&family=Bricolage+Grotesque */ /* --- Radius ------------------------------------------------------ */ --radius-pill: 999px; /* buttons — the RivL signature shape */ --radius-card: 12px; --radius-card-lg: 14px; --radius-sm: 10px; /* --- Spacing ----------------------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 40px; --space-7: 64px; /* --- Layout widths (from the exports) ---------------------------- */ --w-prose: 560px; --w-form: 440px; --w-card: 420px; --w-wide: 900px; } /* ============================================================ ADMIN OVERRIDES The admin portal deliberately diverges: cooler greys instead of green-tinted ink, a duller green, and tighter radii. This is intentional density for a tooling interface — not drift. Scope by wrapping admin pages in . ============================================================ */ .admin { --admin-ink: #171A1D; /* cool near-black, replaces --ink-900 */ --admin-ink-soft: #34393F; /* labels, secondary text */ --admin-green: #9CC03A; /* muted accent, replaces --rivl-lime */ --admin-line: #DDE1D8; /* table borders, input outlines */ --admin-surface: #FAFBF7; --admin-surface-2: #F3F5F0; --radius-card: 8px; /* tighter than player-facing 12px */ --radius-input: 9px; --radius-sm: 6px; --admin-row-h: 34px; /* dense table rows */ --admin-font-size: 12px; --admin-label: 11px; /* uppercase field labels, 700 weight */ }