/* ABOUTME: CSS custom properties for dark and light themes.
   ABOUTME: Defines all color tokens, font stacks, and theme-specific overrides. */

:root {
  --mono: 'DM Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

/* ═══════════════════════════════════════
   DARK THEME
   ═══════════════════════════════════════ */
[data-theme="dark"] {
  --bg: #101014;
  --bg-panel: #18181e;
  --bg-raised: #222230;
  --bg-input: #1a1a24;
  --bg-hover: #26263a;

  --text-1: #f0f0f4;
  --text-2: #b0b0c0;
  --text-3: #707088;
  --text-4: #505066;

  --green: #34d399;
  --green-bg: rgba(52, 211, 153, 0.1);
  --green-border: rgba(52, 211, 153, 0.25);

  --blue: #60a5fa;
  --blue-bg: rgba(96, 165, 250, 0.1);
  --blue-border: rgba(96, 165, 250, 0.25);

  --amber: #fbbf24;
  --amber-bg: rgba(251, 191, 36, 0.08);
  --amber-border: rgba(251, 191, 36, 0.2);

  --red: #f87171;
  --red-bg: rgba(248, 113, 113, 0.1);

  --border: #2a2a38;
  --border-hi: #3a3a4a;
}

/* ═══════════════════════════════════════
   LIGHT THEME
   ═══════════════════════════════════════ */
[data-theme="light"] {
  --bg: #f0eeeb;
  --bg-panel: #faf9f7;
  --bg-raised: #e8e6e2;
  --bg-input: #eae8e4;
  --bg-hover: #dfddd8;

  --text-1: #111111;
  --text-2: #333338;
  --text-3: #555560;
  --text-4: #88888f;

  --green: #0d7a4a;
  --green-bg: rgba(13, 122, 74, 0.07);
  --green-border: rgba(13, 122, 74, 0.2);

  --blue: #1756b8;
  --blue-bg: rgba(23, 86, 184, 0.07);
  --blue-border: rgba(23, 86, 184, 0.2);

  --amber: #8a5100;
  --amber-bg: rgba(138, 81, 0, 0.06);
  --amber-border: rgba(138, 81, 0, 0.15);

  --red: #dc2626;
  --red-bg: rgba(220, 38, 38, 0.07);

  --border: #d4d2ce;
  --border-hi: #c0beb8;
}