/* ── Design tokens ─────────────────────────────────────────── */
:root {
  --bg-base:       #0a0a0d;
  --bg-elevated:   #111115;
  --bg-card:       #16161c;
  --bg-hover:      #1e1e26;
  --bg-active:     #252530;

  --border:        rgba(255,255,255,0.07);
  --border-strong: rgba(255,255,255,0.13);

  --text-primary:   #f0f0f5;
  --text-secondary: #9898a8;
  --text-muted:     #55556a;

  --accent:         #7c6cf8;
  --accent-glow:    rgba(124,108,248,0.22);
  --accent-2:       #e8647a;

  --beta-green:     #30d158;
  --beta-glow:      rgba(48,209,88,0.30);

  --live-red:       #ff3b30;
  --live-glow:      rgba(255,59,48,0.35);

  /* ── Liquid glass tokens (dark) ────────────────────────── */
  --glass-bg:       rgba(255,255,255,0.04);
  --glass-bg-h:     rgba(255,255,255,0.07);
  --glass-bg-act:   rgba(124,108,248,0.13);
  --glass-border:   rgba(255,255,255,0.10);
  --glass-border-h: rgba(255,255,255,0.18);
  /* Specular: bright inset at top, depth at bottom */
  --glass-shine:    0 1px 0 rgba(255,255,255,0.12) inset,
                    0 -1px 0 rgba(0,0,0,0.20) inset;
  --glass-shadow:   0 8px 32px rgba(0,0,0,0.40),
                    0 1px 0 rgba(255,255,255,0.06) inset;
  --glass-blur:     blur(40px) saturate(200%);
  --glass-blur-sm:  blur(20px) saturate(160%);

  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   22px;
  --radius-pill: 999px;

  --shadow-sm:  0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.6);

  --transition: 180ms cubic-bezier(0.4,0,0.2,1);
  --font: "SF Mono", "JetBrains Mono", ui-monospace, monospace;
  --font-mono: "SF Mono", "JetBrains Mono", ui-monospace, monospace;

  --header-h: 56px;
}

/* ── Light theme ────────────────────────────────────────────── */
[data-theme="light"] {
  --bg-base:       #ececf2;
  --bg-elevated:   #f5f5fa;
  --bg-card:       #ffffff;
  --bg-hover:      rgba(0,0,0,0.04);
  --bg-active:     rgba(124,108,248,0.10);

  --border:        rgba(0,0,0,0.07);
  --border-strong: rgba(0,0,0,0.13);

  --text-primary:   #1c1c1e;
  --text-secondary: #636370;
  --text-muted:     #a0a0ae;

  --glass-bg:       rgba(255,255,255,0.60);
  --glass-bg-h:     rgba(255,255,255,0.78);
  --glass-bg-act:   rgba(124,108,248,0.12);
  --glass-border:   rgba(255,255,255,0.80);
  --glass-border-h: rgba(255,255,255,0.95);
  --glass-shine:    0 1px 0 rgba(255,255,255,0.95) inset,
                    0 -1px 0 rgba(0,0,0,0.04) inset;
  --glass-shadow:   0 8px 32px rgba(0,0,0,0.08),
                    0 1px 0 rgba(255,255,255,0.90) inset;

  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.10);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.12);
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { height: 100%; font-size: 15px; }

body {
  font-family: var(--font);
  /* Ambient light blobs that glass surfaces will blur over */
  background:
    radial-gradient(ellipse at 18% 65%, rgba(124,108,248,0.09) 0%, transparent 52%),
    radial-gradient(ellipse at 82% 18%, rgba(232,100,122,0.07) 0%, transparent 46%),
    radial-gradient(ellipse at 50% 90%, rgba(48,209,88,0.04) 0%, transparent 40%),
    var(--bg-base);
  background-attachment: fixed;
  color: var(--text-primary);
  height: 100dvh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

[data-theme="light"] body {
  background:
    radial-gradient(ellipse at 18% 65%, rgba(124,108,248,0.06) 0%, transparent 52%),
    radial-gradient(ellipse at 82% 18%, rgba(232,100,122,0.05) 0%, transparent 46%),
    var(--bg-base);
  background-attachment: fixed;
}

button { font-family: inherit; border: none; background: none; cursor: pointer; color: inherit; }
input  { font-family: inherit; outline: none; border: none; background: none; color: inherit; }
svg    { display: block; flex-shrink: 0; }

/* ── Scrollbar ─────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ── Utility ───────────────────────────────────────────────── */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }