/* ═══════════════════════════════════════════════════════════
   Design tokens — GitHub × Spotify blend
   Dark is default; [data-theme="light"] overrides.
   Accent: refined indigo. Status: green / amber / red.
═══════════════════════════════════════════════════════════ */

:root,
[data-theme="dark"] {
  color-scheme: dark;

  /* surfaces */
  --bg:          #090b11;
  --bg-grid:     #0c0f17;
  --surface:     #0f1420;
  --surface-2:   #141a28;
  --surface-3:   #1a2233;
  --hover:       #1c2436;
  --inset:       #0a0e16;

  /* lines */
  --border:      #222b3d;
  --border-2:    #2d3a52;
  --border-soft: #1a2231;

  /* text */
  --text:        #e9edf6;
  --text-2:      #a7b1c4;
  --text-3:      #6a7488;
  --text-4:      #475065;

  /* brand accent (indigo) */
  --accent:      oklch(0.64 0.17 268);
  --accent-2:    oklch(0.58 0.18 268);
  --accent-3:    oklch(0.50 0.16 268);
  --accent-soft: color-mix(in oklch, var(--accent) 16%, transparent);
  --accent-line: color-mix(in oklch, var(--accent) 42%, transparent);
  --on-accent:   #ffffff;

  /* status */
  --ok:          oklch(0.74 0.16 152);
  --ok-soft:     color-mix(in oklch, var(--ok) 15%, transparent);
  --ok-line:     color-mix(in oklch, var(--ok) 40%, transparent);

  --warn:        oklch(0.80 0.14 78);
  --warn-soft:   color-mix(in oklch, var(--warn) 15%, transparent);
  --warn-line:   color-mix(in oklch, var(--warn) 40%, transparent);
  --orange:      oklch(0.78 0.16 50);
  --orange-soft: color-mix(in oklch, var(--orange) 18%, transparent);

  --danger:      oklch(0.66 0.20 22);
  --danger-soft: color-mix(in oklch, var(--danger) 16%, transparent);
  --danger-line: color-mix(in oklch, var(--danger) 42%, transparent);

  --info:        oklch(0.72 0.13 230);
  --info-soft:   color-mix(in oklch, var(--info) 15%, transparent);

  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 8px 28px rgba(0,0,0,.45);
  --shadow-pop: 0 20px 60px rgba(0,0,0,.6);
}

[data-theme="light"] {
  color-scheme: light;

  --bg:          #eef1f5;
  --bg-grid:     #e9edf2;
  --surface:     #ffffff;
  --surface-2:   #f6f8fa;
  --surface-3:   #eef1f5;
  --hover:       #f2f5f9;
  --inset:       #f6f8fa;

  --border:      #d6dde5;
  --border-2:    #c4cdd8;
  --border-soft: #e4e9ef;

  --text:        #1a1f29;
  --text-2:      #515b6b;
  --text-3:      #7a8494;
  --text-4:      #9aa3b2;

  --accent:      oklch(0.52 0.20 268);
  --accent-2:    oklch(0.47 0.21 268);
  --accent-3:    oklch(0.42 0.19 268);
  --accent-soft: color-mix(in oklch, var(--accent) 12%, transparent);
  --accent-line: color-mix(in oklch, var(--accent) 35%, transparent);
  --on-accent:   #ffffff;

  --ok:          oklch(0.58 0.15 150);
  --ok-soft:     color-mix(in oklch, var(--ok) 13%, transparent);
  --ok-line:     color-mix(in oklch, var(--ok) 38%, transparent);

  --warn:        oklch(0.66 0.14 70);
  --warn-soft:   color-mix(in oklch, var(--warn) 16%, transparent);
  --warn-line:   color-mix(in oklch, var(--warn) 42%, transparent);
  --orange:      oklch(0.68 0.17 50);
  --orange-soft: color-mix(in oklch, var(--orange) 18%, transparent);

  --danger:      oklch(0.55 0.21 25);
  --danger-soft: color-mix(in oklch, var(--danger) 12%, transparent);
  --danger-line: color-mix(in oklch, var(--danger) 38%, transparent);

  --info:        oklch(0.55 0.14 235);
  --info-soft:   color-mix(in oklch, var(--info) 12%, transparent);

  --shadow-1: 0 1px 2px rgba(16,24,40,.06);
  --shadow-2: 0 6px 22px rgba(16,24,40,.10);
  --shadow-pop: 0 24px 60px rgba(16,24,40,.22);
}

:root {
  --r1: 8px;
  --r2: 12px;
  --r3: 16px;
  --r-full: 999px;

  --font-sans: 'Heebo', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', 'JetBrains Mono', ui-monospace, monospace;

  --rail: 248px;
  --topbar-h: 64px;

  --ease: cubic-bezier(.2,.6,.2,1);
}