/* ============================================================
   Design Tokens
   ============================================================ */

:root {
  /* ── Backgrounds ──────────────────────────────────────────── */
  --bg:          #09090b;
  --bg-surface:  #111116;
  --bg-elevated: #18181f;
  --bg-card:     rgba(255, 255, 255, 0.03);
  --bg-card-hv:  rgba(255, 255, 255, 0.055);

  /* ── Accent — amber/gold (premium, distinctive, not generic) ── */
  --accent:        #f59e0b;
  --accent-deep:   #d97706;
  --accent-light:  #fcd34d;
  --accent-dim:    rgba(245, 158, 11, 0.1);
  --accent-border: rgba(245, 158, 11, 0.3);

  /* ── Text ─────────────────────────────────────────────────── */
  --txt:   #fafafa;
  --txt-2: #a1a1aa;
  --txt-3: #52525b;

  /* ── Borders ──────────────────────────────────────────────── */
  --border:    rgba(255, 255, 255, 0.07);
  --border-hv: rgba(255, 255, 255, 0.13);

  /* ── Semantic ─────────────────────────────────────────────── */
  --green: #4ade80;
  --amber: #fbbf24;
  --red:   #f87171;

  /* ── Radii ────────────────────────────────────────────────── */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-full: 9999px;

  /* ── Transitions ──────────────────────────────────────────── */
  --t-fast: 0.15s ease;
  --t-base: 0.22s ease;

  /* ── Typography ───────────────────────────────────────────── */
  --font-display: 'Syne', 'DM Sans', sans-serif;
  --font-body:    'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;
}

/* ── Light theme ──────────────────────────────────────────────── */
[data-theme="light"] {
  /* Backgrounds — warm paper palette */
  --bg:          #faf9f4;
  --bg-surface:  #f2f1e9;
  --bg-elevated: #eae9df;
  --bg-card:     rgba(0, 0, 0, 0.03);
  --bg-card-hv:  rgba(0, 0, 0, 0.06);

  /* Accent — deeper amber for readability on light */
  --accent:        #d97706;
  --accent-deep:   #b45309;
  --accent-light:  #f59e0b;
  --accent-dim:    rgba(217, 119, 6, 0.1);
  --accent-border: rgba(217, 119, 6, 0.35);

  /* Text — warm stone tones */
  --txt:   #1c1917;
  --txt-2: #44403c;
  --txt-3: #78716c;

  /* Borders */
  --border:    rgba(0, 0, 0, 0.08);
  --border-hv: rgba(0, 0, 0, 0.16);

  /* Semantic */
  --green: #16a34a;
  --amber: #d97706;
  --red:   #dc2626;
}

/* Scrollbar */
::-webkit-scrollbar             { width: 5px; }
::-webkit-scrollbar-track       { background: var(--bg); }
::-webkit-scrollbar-thumb       { background: var(--bg-elevated); border-radius: var(--r-full); }
::-webkit-scrollbar-thumb:hover { background: var(--txt-3); }