/* ============================================
   CraigClaw Theme System
   All colors via CSS variables — no hardcoding
   ============================================ */

:root {
  /* Shared */
  --font-ui: 'DM Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Consolas', monospace;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.15);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.2);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.25);
  --transition: 150ms ease;
  --sidebar-width: 240px;
  --topbar-height: 52px;

  /* Space colors */
  --space-p: #c084fc;
  --space-p-dim: #7c3aed;
  --space-w: #38bdf8;
  --space-w-dim: #0284c7;

  /* Brand */
  --brand: #f0883e;
  --brand-hover: #f4a261;
  --brand-dim: #3d2200;
}

/* ---- DARK (default) ---- */
[data-theme="dark"] {
  --bg-primary: #080b12;
  --bg-secondary: #0d1117;
  --bg-tertiary: #131920;
  --bg-elevated: #1a2030;
  --bg-hover: #1f2738;
  --bg-active: #283042;
  --border: #21262d;
  --border-light: #30363d;

  --text-primary: #e6edf3;
  --text-secondary: #8b949e;
  --text-tertiary: #484f58;
  --text-inverse: #080b12;

  /* Semantic */
  --green: #3fb950;
  --green-dim: #0d2818;
  --green-glow: rgba(63, 185, 80, 0.15);
  --amber: #d29922;
  --amber-dim: #2d1f00;
  --amber-glow: rgba(210, 153, 34, 0.15);
  --red: #f85149;
  --red-dim: #3d0c0c;
  --red-glow: rgba(248, 81, 73, 0.15);
  --blue: #58a6ff;
  --blue-dim: #0c2d6b;
  --blue-glow: rgba(88, 166, 255, 0.15);
  --purple: #bc8cff;
  --purple-dim: #1e0a3e;
  --purple-glow: rgba(188, 140, 255, 0.15);
  --cyan: #39d2c0;
  --cyan-dim: #0a2d28;
  --cyan-glow: rgba(57, 210, 192, 0.15);
  --orange: #f0883e;
  --orange-dim: #3d2200;
  --orange-glow: rgba(240, 136, 62, 0.15);

  /* Legacy compat */
  --accent: #58a6ff;
  --accent-hover: #79b8ff;
  --accent-dim: #0c2d6b;
  --success: #3fb950;
  --success-dim: #0d2818;
  --warning: #d29922;
  --warning-dim: #2d1f00;
  --danger: #f85149;
  --danger-dim: #3d0c0c;

  --sidebar-bg: #060810;
  --sidebar-text: #7d8590;
  --sidebar-text-active: #e6edf3;
  --sidebar-hover: #0d1117;
  --sidebar-active: #131920;
  --sidebar-border: #131920;

  --topbar-bg: #080b12;
  --topbar-border: #131920;

  --card-bg: #0d1117;
  --card-border: #21262d;
  --card-hover: #131920;

  --input-bg: #131920;
  --input-border: #21262d;
  --input-focus: #58a6ff;

  --badge-bg: #1a2030;
  --badge-text: #8b949e;

  --scrollbar-track: #0d1117;
  --scrollbar-thumb: #21262d;
}

/* ---- LIGHT ---- */
[data-theme="light"] {
  --bg-primary: #f6f8fa;
  --bg-secondary: #ffffff;
  --bg-tertiary: #f0f2f5;
  --bg-elevated: #ffffff;
  --bg-hover: #eaedf1;
  --bg-active: #dde1e6;
  --border: #d0d7de;
  --border-light: #dde1e6;

  --text-primary: #1f2328;
  --text-secondary: #57606a;
  --text-tertiary: #8b949e;
  --text-inverse: #f6f8fa;

  /* Semantic */
  --green: #16a34a;
  --green-dim: #dcfce7;
  --green-glow: rgba(22, 163, 74, 0.08);
  --amber: #ca8a04;
  --amber-dim: #fef9c3;
  --amber-glow: rgba(202, 138, 4, 0.08);
  --red: #dc2626;
  --red-dim: #fee2e2;
  --red-glow: rgba(220, 38, 38, 0.08);
  --blue: #2563eb;
  --blue-dim: #dbeafe;
  --blue-glow: rgba(37, 99, 235, 0.08);
  --purple: #7c3aed;
  --purple-dim: #f3e8ff;
  --purple-glow: rgba(124, 58, 237, 0.08);
  --cyan: #0891b2;
  --cyan-dim: #cffafe;
  --cyan-glow: rgba(8, 145, 178, 0.08);
  --orange: #ea580c;
  --orange-dim: #ffedd5;
  --orange-glow: rgba(234, 88, 12, 0.08);

  /* Legacy compat */
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --accent-dim: #dbeafe;
  --success: #16a34a;
  --success-dim: #dcfce7;
  --warning: #ca8a04;
  --warning-dim: #fef9c3;
  --danger: #dc2626;
  --danger-dim: #fee2e2;

  --sidebar-bg: #ffffff;
  --sidebar-text: #57606a;
  --sidebar-text-active: #1f2328;
  --sidebar-hover: #f0f2f5;
  --sidebar-active: #eaedf1;
  --sidebar-border: #dde1e6;

  --topbar-bg: #ffffff;
  --topbar-border: #dde1e6;

  --card-bg: #ffffff;
  --card-border: #d0d7de;
  --card-hover: #f6f8fa;

  --input-bg: #ffffff;
  --input-border: #d0d7de;
  --input-focus: #2563eb;

  --badge-bg: #eaedf1;
  --badge-text: #57606a;

  --scrollbar-track: #f0f2f5;
  --scrollbar-thumb: #d0d7de;
}