/* ============================================
   Spatial-Sandbox Design Tokens — variables.css
   ============================================ */

:root {
    /* Typography */
    --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

    /* Light Theme Colors */
    --bg:          #FAFAFA;
    --bg-alt:      #F4F4F5;
    --surface:     #FFFFFF;
    --surface-2:   #F4F4F5;
    --border:      #E4E4E7;
    --border-strong: #D4D4D8;

    --text:        #18181B;
    --text-muted:  #71717A;
    --text-subtle: #A1A1AA;

    --accent:      #2563EB;
    --accent-hover:#1D4ED8;
    --accent-light: rgba(37, 99, 235, 0.08);

    --success:     #16A34A;
    --success-bg:  rgba(22, 163, 74, 0.08);
    --danger:      #DC2626;
    --danger-bg:   rgba(220, 38, 38, 0.08);
    --warning:     #D97706;

    /* Ad Slots */
    --ad-bg:       #F0F0F2;
    --ad-text:     #C4C4C8;
    --ad-border:   #E4E4E7;

    /* Spacing (4px grid) */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-8: 32px;
    --sp-10: 40px;
    --sp-12: 48px;
    --sp-16: 64px;
    --sp-20: 80px;

    /* Sizing */
    --header-h:    56px;
    --ad-h:        60px;
    --footer-h:    36px;
    --sidebar-w:   300px;

    /* Radius */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-xs:   0 1px 2px rgba(0,0,0,0.05);
    --shadow-sm:   0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
    --shadow-md:   0 4px 6px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.05);
    --shadow-lg:   0 10px 25px rgba(0,0,0,0.10), 0 4px 10px rgba(0,0,0,0.06);
    --shadow-xl:   0 20px 50px rgba(0,0,0,0.15);

    /* Transitions */
    --t-fast:  100ms ease;
    --t-base:  150ms ease;
    --t-slow:  250ms ease;
}

/* Dark Theme */
.theme-dark {
    --bg:          #09090B;
    --bg-alt:      #111113;
    --surface:     #111113;
    --surface-2:   #18181B;
    --border:      #27272A;
    --border-strong: #3F3F46;

    --text:        #FAFAFA;
    --text-muted:  #A1A1AA;
    --text-subtle: #71717A;

    --accent:      #3B82F6;
    --accent-hover:#60A5FA;
    --accent-light: rgba(59, 130, 246, 0.12);

    --success:     #22C55E;
    --success-bg:  rgba(34, 197, 94, 0.10);
    --danger:      #EF4444;
    --danger-bg:   rgba(239, 68, 68, 0.10);
    --warning:     #F59E0B;

    --ad-bg:       #18181B;
    --ad-text:     #52525B;
    --ad-border:   #27272A;

    --shadow-xs:   0 1px 2px rgba(0,0,0,0.3);
    --shadow-sm:   0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
    --shadow-md:   0 4px 6px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.3);
    --shadow-lg:   0 10px 25px rgba(0,0,0,0.5), 0 4px 10px rgba(0,0,0,0.4);
    --shadow-xl:   0 20px 50px rgba(0,0,0,0.6);
}