/* ── Design tokens (CSS custom properties) ── */
:root {
  --accent:         #a78bfa;
  --bg:             #1a1a2e;
  --text:           #ffffff;
  --muted:          rgba(255,255,255,0.50);
  --subtle:         rgba(255,255,255,0.07);
  --glass-bg:       rgba(255,255,255,0.07);
  --glass-border:   rgba(255,255,255,0.12);
  --glass-shadow:   0 8px 32px rgba(0,0,0,0.28);
  --glass-blur:     20px;
  --danger:         rgba(239,68,68,1);
  --danger-bg:      rgba(239,68,68,0.12);
  --danger-border:  rgba(239,68,68,0.25);
  --danger-text:    #f87171;
  --success:        #4ade80;
  --warning:        #fbbf24;

  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  18px;
  --radius-xl:  9999px;

  --ease: cubic-bezier(0.4,0,0.2,1);
  --dur:  260ms;

  --dash-max-width-sm: 540px;
  --dash-max-width-md: 680px;
  --dash-max-width-lg: 860px;
  --dash-max-width-xl: 1080px;
}

/* ── Style presets ── */
[data-style="minimal"] {
  --accent:       #e5e5e5;
  --bg:           #111111;
  --glass-bg:     rgba(255,255,255,0.04);
  --glass-border: rgba(255,255,255,0.08);
  --glass-blur:   8px;
}
[data-style="glass"] {
  --accent:     #a78bfa;
  --bg:         #1a1a2e;
  --glass-bg:   rgba(255,255,255,0.07);
  --glass-blur: 22px;
}
[data-style="neon"] {
  --accent:       #00ffff;
  --bg:           #0a0e27;
  --glass-bg:     rgba(0,255,255,0.05);
  --glass-border: rgba(0,255,255,0.14);
}
[data-style="pastel"] {
  --accent:       #f9a8d4;
  --bg:           #fdf2f8;
  --text:         #1f1f1f;
  --muted:        rgba(0,0,0,0.45);
  --subtle:       rgba(0,0,0,0.05);
  --glass-bg:     rgba(255,255,255,0.65);
  --glass-border: rgba(0,0,0,0.09);
  --glass-shadow: 0 8px 32px rgba(0,0,0,0.1);
}
[data-style="forest"] {
  --accent:       #4ade80;
  --bg:           #0f172a;
  --glass-bg:     rgba(74,222,128,0.06);
  --glass-border: rgba(74,222,128,0.12);
}
[data-style="oled"] {
  --accent:     #00d9ff;
  --bg:         #000000;
  --glass-bg:   rgba(255,255,255,0.04);
  --glass-blur: 10px;
}

/* ── Light / dark / system mode ── */
@media (prefers-color-scheme: light) {
  [data-mode="system"] {
    --bg:           #f5f5f7;
    --text:         #1d1d1f;
    --muted:        rgba(0,0,0,0.45);
    --subtle:       rgba(0,0,0,0.055);
    --glass-bg:     rgba(255,255,255,0.70);
    --glass-border: rgba(0,0,0,0.10);
    --glass-shadow: 0 8px 32px rgba(0,0,0,0.10);
  }
}
[data-mode="light"] {
  --bg:           #f5f5f7;
  --text:         #1d1d1f;
  --muted:        rgba(0,0,0,0.45);
  --subtle:       rgba(0,0,0,0.055);
  --glass-bg:     rgba(255,255,255,0.70);
  --glass-border: rgba(0,0,0,0.10);
  --glass-shadow: 0 8px 32px rgba(0,0,0,0.10);
}
/* data-mode="dark" uses root defaults */