/* ============================================================================ tokens.css - canonical design tokens (design-system, modular refactor). Single documented source of truth for color + the radius / shadow / space / font scales. Loaded first in . TRANSITIONAL: the same color tokens are still ALSO defined inline in dashboard.html's first style block; because that inline :root loads AFTER this file, it currently WINS (identical values, so no visual change) and nothing depends on this file loading for existing tokens. The inline duplicates are removed in a later, separately-verified step once this file is proven. The NEW scales below are additive and become the vocabulary that new / migrated code uses (retiring the ~468 hardcoded #7c5cfc via --brand). ============================================================================ */ :root{ /* ---- surfaces ---- */ --bg:#05020e; --bg-2:#0a0420; --panel:#0c0622; /* ---- text ---- */ --text:#f9f6ff; --text-2:#d6cfee; --text-3:#ada3ce; --muted:#877ba8; --muted-soft:#6e6892; /* ---- accents (semantic) ---- */ --purple:#7c5cfc; --purple-bright:#b09cff; --magenta:#d946a8; --magenta-bright:#f472b6; --cyan:#06d6f5; --cyan-bright:#67e8f9; --gold:#e6b347; --green:#14b87f; --green-bright:#4ade80; --amber:#f59e0b; --red:#f56565; /* ---- lines ---- */ --border:rgba(124,92,252,0.14); --border-strong:rgba(255,255,255,0.10); --hairline:rgba(255,255,255,0.06); --card:linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012)); /* ===== NEW canonical primitives (additive) ===== */ /* brand: the single knob for the product accent; retires hardcoded #7c5cfc */ --brand:#7c5cfc; --brand-2:#d946a8; --gradient:linear-gradient(135deg, var(--brand), var(--brand-2)); /* Foreground for anything sitting ON a brand-coloured surface (gradient/purple buttons, badges). Deliberately NOT re-declared under [data-theme="light"]: the brand surface stays purple in both themes, so its text must stay light. Using --text there turns the label near-black on purple in light mode. */ --on-brand:#ffffff; /* Backdrop behind modals/overlays. Stays dark in both themes (its job is to dim the page), but lighter in light mode so it doesn't feel oppressive. */ --mv-scrim:rgba(5,2,14,0.66); /* radius scale */ --radius-xs:6px; --radius-sm:9px; --radius:12px; --radius-lg:16px; --radius-xl:20px; --radius-pill:999px; /* elevation scale (dark) */ --shadow-sm:0 1px 2px rgba(0,0,0,0.30); --shadow-md:0 8px 24px rgba(0,0,0,0.30); --shadow-lg:0 18px 40px -12px rgba(0,0,0,0.55); /* spacing scale */ --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px; /* typography */ --font:'Inter','Inter Tight',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --font-heading:'Inter Tight','Inter',system-ui,sans-serif; --font-mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace; } [data-theme="light"]{ --bg:#f6f4fc; --bg-2:#efeafa; --panel:#ffffff; --text:#1a1430; --text-2:#3a3358; --text-3:#5d557e; --muted:#7a7299; --muted-soft:#9a93b5; --purple:#7c5cfc; --purple-bright:#6d4ef0; --magenta:#c0379a; --magenta-bright:#cf3f9b; --cyan:#0891b2; --cyan-bright:#0aa6c9; --gold:#b07d0a; --green:#0f9d6b; --green-bright:#0f9d6b; --amber:#c2700a; --red:#dc3b56; --border:rgba(124,92,252,0.20); --border-strong:rgba(26,20,48,0.12); --hairline:rgba(26,20,48,0.08); --card:linear-gradient(180deg,#ffffff,#faf8ff); --mv-scrim:rgba(26,20,48,0.38); /* elevation scale (light) */ --shadow-sm:0 1px 2px rgba(26,20,48,0.06); --shadow-md:0 8px 24px rgba(26,20,48,0.10); --shadow-lg:0 18px 40px -14px rgba(26,20,48,0.16); }