/* ═══════════════════════════════════════════════
   NABLA — Theme System
   Dark (default) + Light theme via data-theme="light"
═══════════════════════════════════════════════ */

:root,
[data-theme="dark"] {
  --void: #08080A;
  --surface: #141414;
  --surface-raised: #1B1B1B;
  --surface-hover: #222222;
  --border: rgba(255, 122, 26, 0.12);
  --border-hover: rgba(255, 122, 26, 0.40);

  --orange: #FF6A1A;
  --orange-bright: #FF8A3D;
  --blood: #E8430F;
  --amber: #FFB454;
  --orange-dim: rgba(255, 106, 26, 0.14);
  --orange-glow: rgba(255, 106, 26, 0.35);

  --text-primary: #F5F5F4;
  --text-secondary: #ABABA8;
  --text-muted: #5C5C58;
  --text-code: #FFB454;

  --grad-brand: linear-gradient(135deg, #FF8A3D 0%, #E8430F 100%);
  --grad-card-hover: linear-gradient(135deg, rgba(255,106,26,0.07) 0%, rgba(232,67,15,0.03) 100%);
  --grad-glow-radial: radial-gradient(circle, rgba(255,106,26,0.22) 0%, transparent 70%);

  --shadow-card: 0 4px 24px rgba(0,0,0,0.4);
  --shadow-hover: 0 12px 40px rgba(255,106,26,0.12);

  --header-bg: rgba(8, 8, 10, 0.92);
  --scrollbar-thumb: rgba(255, 122, 26, 0.4);

  --font-mono: 'JetBrains Mono', monospace;
  --font-sans: 'Inter', system-ui, sans-serif;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;
}

[data-theme="light"] {
  --void: #F8F7F5;
  --surface: #FFFFFF;
  --surface-raised: #F2F0ED;
  --surface-hover: #EAE8E4;
  --border: rgba(180, 80, 10, 0.14);
  --border-hover: rgba(180, 80, 10, 0.40);

  --orange: #D45A10;
  --orange-bright: #C85208;
  --blood: #B83A08;
  --amber: #996000;
  --orange-dim: rgba(212, 90, 16, 0.10);
  --orange-glow: rgba(212, 90, 16, 0.25);

  --text-primary: #1A1A18;
  --text-secondary: #4A4A46;
  --text-muted: #8A8A82;
  --text-code: #8A5C00;

  --grad-brand: linear-gradient(135deg, #E8660A 0%, #B83A08 100%);
  --grad-card-hover: linear-gradient(135deg, rgba(212,90,16,0.05) 0%, rgba(184,58,8,0.02) 100%);
  --grad-glow-radial: radial-gradient(circle, rgba(212,90,16,0.12) 0%, transparent 70%);

  --shadow-card: 0 2px 12px rgba(0,0,0,0.08);
  --shadow-hover: 0 8px 28px rgba(212,90,16,0.10);

  --header-bg: rgba(248, 247, 245, 0.92);
  --scrollbar-thumb: rgba(180, 80, 10, 0.3);
}

/* Smooth theme transition */
*, *::before, *::after {
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

/* Disable transition on scroll for perf */
.no-transition * { transition: none !important; }