/* assets/css/01-tokens.css */
/* Design tokens — colors, typography, spacing, radii, shadows */

:root {
    --bg-void:        #080c10;
    --bg-deep:        #0d1117;
    --bg-surface:     #111620;
    --bg-raised:      #161d2a;
    --bg-overlay:     #1c2535;

    --border-subtle:  rgba(255,255,255,0.06);
    --border-muted:   rgba(255,255,255,0.10);
    --border-strong:  rgba(255,255,255,0.18);

    --teal:           #4ec9b0;
    --teal-dim:       rgba(78,201,176,0.15);
    --teal-glow:      rgba(78,201,176,0.35);

    --gold:           #e0a800;
    --gold-dim:       rgba(224,168,0,0.12);
    --gold-glow:      rgba(224,168,0,0.30);

    --blue:           #569cd6;
    --blue-dim:       rgba(86,156,214,0.12);
    --blue-glow:      rgba(86,156,214,0.30);

    --red:            #dc3545;
    --red-dim:        rgba(220,53,69,0.12);

    --fg-primary:     #e6edf3;
    --fg-secondary:   #8b949e;
    --fg-muted:       #484f58;

    --font-display:   'Syne', sans-serif;
    --font-body:      'DM Sans', sans-serif;
    --font-mono:      'JetBrains Mono', 'Fira Code', monospace;

    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;
    --space-32: 128px;

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 20px;

    --shadow-sm:   0 1px 4px rgba(0,0,0,0.3);
    --shadow-md:   0 4px 16px rgba(0,0,0,0.4);
    --shadow-lg:   0 12px 40px rgba(0,0,0,0.5);
    --shadow-teal: 0 0 24px rgba(78,201,176,0.15);
    --shadow-gold: 0 0 24px rgba(224,168,0,0.15);

    --transition-fast:   150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow:   400ms ease;
}