/* === base.css === */

/* ═══════════════════════════════════════════════
   THEME TOKENS — Dark (default) & Light
════════════════════════════════════════════════ */
:root, [data-theme="dark"] {
  --bg:        #0e0f11;
  --bg2:       #141619;
  --bg3:       #1c1e23;
  --bg4:       #232529;
  --border:    #2a2d33;
  --border2:   #363a43;
  --amber:     #f59e0b;
  --amber2:    #d97706;
  --amber-dim: rgba(245,158,11,0.12);
  --amber-glow:rgba(245,158,11,0.25);
  --red:       #ef4444;
  --red-dim:   rgba(239,68,68,0.12);
  --green:     #22c55e;
  --green-dim: rgba(34,197,94,0.12);
  --blue:      #3b82f6;
  --blue-dim:  rgba(59,130,246,0.12);
  --text:      #e8eaf0;
  --text2:     #9ca3af;
  --text3:     #6b7280;
  --shadow:    0 4px 24px rgba(0,0,0,0.4);
}

[data-theme="light"] {
  --bg:        #f4f5f7;
  --bg2:       #ffffff;
  --bg3:       #f0f1f4;
  --bg4:       #e8eaef;
  --border:    #d1d5db;
  --border2:   #b8bcc8;
  --amber:     #d97706;
  --amber2:    #b45309;
  --amber-dim: rgba(217,119,6,0.10);
  --amber-glow:rgba(217,119,6,0.20);
  --red:       #dc2626;
  --red-dim:   rgba(220,38,38,0.10);
  --green:     #16a34a;
  --green-dim: rgba(22,163,74,0.10);
  --blue:      #2563eb;
  --blue-dim:  rgba(37,99,235,0.10);
  --text:      #111827;
  --text2:     #4b5563;
  --text3:     #9ca3af;
  --shadow:    0 4px 24px rgba(0,0,0,0.10);
}

:root {
  --font-head: 'Barlow Condensed', sans-serif;
  --font-body: 'Barlow', sans-serif;
  --r:         8px;
  --r2:        12px;
  --chat-w:    360px;
  --nav-h:     56px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.5;
  overflow-x: hidden;
  transition: background .25s, color .25s;
}
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--amber); }