/* ── Design Tokens ── */
:root {
  /* Colors */
  --bg:          #0f1117;
  --surface:     #1a1d27;
  --surface2:    #22263a;
  --surface3:    #2a2f47;
  --border:      #2e3248;
  --border-soft: #252840;

  --accent:      #6366f1;
  --accent-dark: #4f52d6;
  --accent2:     #8b5cf6;
  --accent-glow: rgba(99,102,241,.2);

  --green:       #22c55e;
  --green-dim:   rgba(34,197,94,.15);
  --yellow:      #eab308;
  --yellow-dim:  rgba(234,179,8,.15);
  --red:         #ef4444;
  --red-dim:     rgba(239,68,68,.15);
  --blue:        #3b82f6;
  --blue-dim:    rgba(59,130,246,.15);
  --purple:      #a855f7;
  --orange:      #f97316;

  --text:        #e2e8f0;
  --text-soft:   #94a3b8;
  --muted:       #64748b;

  /* Spacing */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;

  /* Radii */
  --radius-sm: 6px;
  --radius:    12px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.4);
  --shadow:    0 4px 16px rgba(0,0,0,.5);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.6);

  /* Transitions */
  --t-fast: 120ms ease;
  --t:      200ms ease;
  --t-slow: 350ms ease;

  /* Header */
  --header-h: 60px;

  /* Sidebar */
  --sidebar-w: 220px;
}

/* ── Light theme (opt-in) ── */
[data-theme="light"] {
  --bg:       #f1f5f9;
  --surface:  #ffffff;
  --surface2: #f8fafc;
  --surface3: #f1f5f9;
  --border:   #e2e8f0;
  --border-soft: #f0f4f8;
  --text:     #0f172a;
  --text-soft:#475569;
  --muted:    #94a3b8;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
  --shadow:    0 4px 16px rgba(0,0,0,.1);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.15);
}