/* ============================================================
   base.css — Reset, CSS variables, themes, animations
   ============================================================ */

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

/* ---- Theme 1: Light (default) ---- */
[data-theme="light"] {
  --bg: #f5f6f8;
  --surface: #ffffff;
  --surface2: #fafbfc;
  --text: #1a1a2e;
  --muted: #6b7280;
  --fg3: #94a3b8;
  --border: #e5e7eb;
  --accent: #4338ca;
  --success: #16a34a;
  --warning: #b45309;
  --danger: #dc2626;
  --sidebar-bg: #ffffff;
  --accent-contrast: #ffffff;
}

/* ---- Theme 2: Dark ---- */
[data-theme="dark"] {
  --bg: #0f1117;
  --surface: #181b25;
  --surface2: #1f2330;
  --text: #e5e7ef;
  --muted: #9aa1b5;
  --fg3: #5d6478;
  --border: rgba(255,255,255,0.08);
  --accent: #818cf8;
  --success: #4ade80;
  --warning: #fbbf24;
  --danger: #f87171;
  --sidebar-bg: #0c0e13;
  --accent-contrast: #0f1117;
}

/* ---- Theme 3: Solarized ---- */
[data-theme="solarized"] {
  --bg: #fdf6e3;
  --surface: #fefbf0;
  --surface2: #f7f0dc;
  --text: #073642;
  --muted: #657b83;
  --fg3: #93a1a1;
  --border: #e8e0c8;
  --accent: #268bd2;
  --success: #859900;
  --warning: #b58900;
  --danger: #dc322f;
  --sidebar-bg: #f5eed7;
  --accent-contrast: #ffffff;
}

/* ---- Theme 4: Contrast (High Contrast) ---- */
[data-theme="contrast"] {
  --bg: #000000;
  --surface: #0a0a0a;
  --surface2: #141414;
  --text: #ffffff;
  --muted: #cfcfcf;
  --fg3: #8f8f8f;
  --border: #2e2e2e;
  --accent: #ffd400;
  --success: #00e676;
  --warning: #ffab00;
  --danger: #ff5252;
  --sidebar-bg: #000000;
  --accent-contrast: #000000;
}

:root {
  --mono: 'DM Mono', monospace;
  --sans: 'DM Sans', sans-serif;
  /* Derived from the active theme's accent/border */
  --accent-dim:    color-mix(in srgb, var(--accent) 16%, transparent);
  --accent-dim2:   color-mix(in srgb, var(--accent) 7%, transparent);
  --border-active: color-mix(in srgb, var(--accent) 45%, var(--border));
}

html, body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  transition: background 0.25s, color 0.25s;
}

/* ---- Animations ---- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes spin { to { transform: rotate(360deg); } }