/* ===========================================================
   DESIGN TOKENS
   (Colors, Type, Spacing — from UI/UX Design Documentation)
===========================================================*/

:root{

    /* Base Surfaces */
    --color-bg:#0B1220;
    --color-surface:#121B2E;
    --color-surface-alt:#1A2540;
    --color-surface-hover:#202D4D;
    --color-border:#23304D;

    /* Text */
    --color-text:#F5F7FA;
    --color-text-muted:#98A2B8;
    --color-text-faint:#64708A;

    /* Brand Accents */
    --color-gold:#E8AA3D;
    --color-gold-hover:#F4BC5C;
    --color-purple:#7C5CFC;
    --color-purple-hover:#9279FF;

    /* Semantic Status */
    --color-success:#22C55E;
    --color-danger:#EF4444;
    --color-warning:#F59E0B;
    --color-info:#3B82F6;
    --color-cyan:#22D3EE;

    /* Typography */
    --font-family:'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono:'Roboto Mono', monospace;

    --fs-display:2.75rem;
    --fs-h1:2rem;
    --fs-h2:1.5rem;
    --fs-h3:1.125rem;
    --fs-body:0.9375rem;
    --fs-small:0.8125rem;
    --fs-tiny:0.6875rem;

    --fw-bold:700;
    --fw-semibold:600;
    --fw-medium:500;
    --fw-regular:400;

    /* Spacing Scale */
    --space-1:4px;
    --space-2:8px;
    --space-3:12px;
    --space-4:16px;
    --space-5:24px;
    --space-6:32px;
    --space-7:48px;
    --space-8:64px;

    /* Radius */
    --radius-sm:6px;
    --radius-md:12px;
    --radius-lg:18px;
    --radius-pill:999px;

    /* Shadow */
    --shadow-card:0 4px 24px rgba(0, 0, 0, 0.35);
    --shadow-lift:0 8px 32px rgba(0, 0, 0, 0.45);

    /* Layout */
    --container-max:1800px;
    --header-height:72px;
    --sidebar-width:240px;

    /* Motion */
    --transition-fast:150ms ease;
    --transition-base:250ms ease;
}