/* ═══════════════════════════════════
   variables.css — Design tokens & reset
   ═══════════════════════════════════ */

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

:root {
  /* Backgrounds */
  --bg-0: #05060d;
  --bg-1: #0a0c18;
  --bg-2: #0f1120;
  --bg-3: #161828;
  --bg-hover: #1c1f30;

  /* Borders */
  --border: rgba(255, 255, 255, 0.06);
  --border-mid: rgba(255, 255, 255, 0.10);
  --border-bright: rgba(255, 255, 255, 0.18);

  /* Accent colors */
  --accent: #38bdf8;
  --accent-dim: rgba(56, 189, 248, 0.12);
  --accent-glow: 0 0 20px rgba(56, 189, 248, 0.28);
  --violet: #a78bfa;

  /* Role colors */
  --user-color: #60a5fa;
  --user-bg: rgba(96, 165, 250, 0.07);
  --ai-color: #34d399;
  --ai-bg: rgba(52, 211, 153, 0.07);
  --sys-color: #f472b6;
  --sys-bg: rgba(244, 114, 182, 0.07);

  /* Text */
  --text-1: #e1e4ee;
  --text-2: #8890a8;
  --text-3: #454d65;

  /* Semantic */
  --danger: #f87171;
  --danger-dim: rgba(248, 113, 113, 0.12);
  --success: #34d399;
  --warning: #fbbf24;

  /* Layout */
  --sidebar-w: 260px;
  --header-h: 52px;
  --input-area-h: 90px;

  /* Radii */
  --radius: 10px;
  --radius-sm: 6px;
  --radius-lg: 14px;

  /* Font stacks */
  --font-ui: 'Outfit', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
}

/* Light theme */
[data-theme="light"] {
  --bg-0: #f2f4f8;
  --bg-1: #fafbfc;
  --bg-2: #ffffff;
  --bg-3: #e6e9f0;
  --bg-hover: #eef0f5;

  --border: rgba(0, 0, 0, 0.06);
  --border-mid: rgba(0, 0, 0, 0.10);
  --border-bright: rgba(0, 0, 0, 0.18);

  --accent: #0284c7;
  --accent-dim: rgba(2, 132, 199, 0.10);
  --accent-glow: 0 0 18px rgba(2, 132, 199, 0.18);

  --user-color: #2563eb;
  --user-bg: rgba(37, 99, 235, 0.06);
  --ai-color: #059669;
  --ai-bg: rgba(5, 150, 105, 0.06);
  --sys-color: #be185d;
  --sys-bg: rgba(190, 24, 93, 0.06);

  --text-1: #181a25;
  --text-2: #555b6e;
  --text-3: #9ca0b0;

  --danger: #dc2626;
  --danger-dim: rgba(220, 38, 38, 0.08);
  --success: #16a34a;
  --warning: #d97706;
}

html, body {
  height: 100%;
  overflow: hidden;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.6;
  background: var(--bg-0);
  color: var(--text-1);
  -webkit-font-smoothing: antialiased;
  transition: background 0.3s ease, color 0.3s ease;
}

/* Scrollbars */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-mid); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-bright); }

/* Animations */
@keyframes blink    { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes fadeUp   { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideIn  { from { transform: translateY(10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes slideLeft { from { transform: translateX(-100%); } to { transform: translateX(0); } }