/* ══════════════════════════════════════════════
   tokens.css — Design System Variables
   CoolCDZ v7.0
   ══════════════════════════════════════════════ */

/* ─── DARK THEME (default) ─────────────────── */
:root,
[data-theme="dark"] {
  --clr-bg:          #0d0d12;
  --clr-surface:     #13131a;
  --clr-card:        #1a1a24;
  --clr-card-hover:  #1f1f2c;
  --clr-border:      #26263a;
  --clr-border-soft: #1e1e2d;
  --clr-text:        #eeeef5;
  --clr-text-2:      #b0b0cc;
  --clr-muted:       #6666a0;

  /* Brand — coral/orange from reference */
  --clr-accent:      #ff5533;
  --clr-accent-h:    #e04020;
  --clr-accent-glow: rgba(255,85,51,.18);
  --clr-accent2:     #ff8866;
  --clr-accent-rgb:  255,85,51;

  /* Semantic */
  --clr-green:       #22d37a;
  --clr-yellow:      #ffb01a;
  --clr-red:         #ff4455;
  --clr-blue:        #3b92ff;

  /* Gradients */
  --grad-hero:       radial-gradient(ellipse 80% 60% at 60% 20%, rgba(255,85,51,.12) 0%, transparent 70%);
  --grad-card:       linear-gradient(145deg, #1a1a24 0%, #16161e 100%);
  --grad-accent:     linear-gradient(135deg, #ff5533 0%, #ff8866 100%);

  /* Shadows */
  --shadow-card:     0 1px 3px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.25);
  --shadow-accent:   0 4px 24px rgba(255,85,51,.25);
  --shadow-float:    0 20px 60px rgba(0,0,0,.5);

  /* Nav */
  --nav-bg:          rgba(13,13,18,.88);

  /* Scrollbar */
  --scrollbar-track: #13131a;
  --scrollbar-thumb: #26263a;
}

/* ─── LIGHT THEME ───────────────────────────── */
[data-theme="light"] {
  --clr-bg:          #faf9f7;
  --clr-surface:     #ffffff;
  --clr-card:        #ffffff;
  --clr-card-hover:  #f5f4f2;
  --clr-border:      #e8e5e0;
  --clr-border-soft: #f0ede8;
  --clr-text:        #1a1814;
  --clr-text-2:      #4a4640;
  --clr-muted:       #888480;

  --clr-accent:      #e63d1f;
  --clr-accent-h:    #cc3318;
  --clr-accent-glow: rgba(230,61,31,.1);
  --clr-accent2:     #ff6644;
  --clr-accent-rgb:  230,61,31;

  --clr-green:       #16a35a;
  --clr-yellow:      #d4920a;
  --clr-red:         #d42233;
  --clr-blue:        #1a6fd4;

  --grad-hero:       radial-gradient(ellipse 80% 60% at 60% 20%, rgba(230,61,31,.07) 0%, transparent 70%);
  --grad-card:       linear-gradient(145deg, #ffffff 0%, #faf9f7 100%);
  --grad-accent:     linear-gradient(135deg, #e63d1f 0%, #ff6644 100%);

  --shadow-card:     0 1px 3px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.06);
  --shadow-accent:   0 4px 24px rgba(230,61,31,.2);
  --shadow-float:    0 20px 60px rgba(0,0,0,.12);

  --nav-bg:          rgba(250,249,247,.92);
  --scrollbar-track: #f0ede8;
  --scrollbar-thumb: #d0cdc8;
}

/* ─── TYPOGRAPHY ────────────────────────────── */
:root {
  --font-display: 'Syne', sans-serif;
  --font-body:    'Manrope', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  --radius-sm:  6px;
  --radius:     10px;
  --radius-lg:  16px;
  --radius-xl:  24px;

  --transition: .18s ease;
  --transition-slow: .35s cubic-bezier(.4,0,.2,1);

  --max-width: 1200px;
  --nav-h: 64px;
}

/* ─── SCROLLBAR ─────────────────────────────── */
* { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }