/* AUTO-GENERATED by scripts/generate-tokens.js — DO NOT EDIT
   Edit design-tokens.json instead, then run: node scripts/generate-tokens.js */

:root {
  --color-bg-primary: #0a0a0e;
  --color-bg-secondary: #0f0f14;
  --color-bg-tertiary: #16161e;
  --color-border: rgba(255, 255, 255, 0.06);
  --color-border-hover: rgba(255, 255, 255, 0.12);
  --color-text-primary: #f0eff8;
  --color-text-secondary: #9a97ad;
  --color-text-tertiary: #5e5c70;
  --color-accent: #38bdf8;
  --color-accent-soft: rgba(56, 189, 248, 0.08);
  --color-accent-glow: rgba(56, 189, 248, 0.3);
  --color-warm: #a78bfa;

  --color-rose: #fb7185;

  --color-mint: #34d399;

  --gradient-text: linear-gradient(135deg, #f0eff8 0%, #38bdf8 35%, #a78bfa 65%, #fb7185 100%);
  --gradient-btn: linear-gradient(135deg, #38bdf8 0%, #818cf8 50%, #a78bfa 100%);
  --gradient-btn-hover: linear-gradient(135deg, #7dd3fc 0%, #a78bfa 50%, #c4b5fd 100%);
  --gradient-btn-shadow: 0 4px 24px rgba(56, 189, 248, 0.2), 0 0 60px rgba(167, 139, 250, 0.08);
  --gradient-btn-text: #0a0a0e;
  --gradient-border: linear-gradient(135deg, rgba(56,189,248,0.4) 0%, rgba(167,139,250,0.4) 50%, rgba(251,113,133,0.4) 100%);
  --grid-color: rgba(56, 189, 248, 0.018);
  --dot-color: rgba(167, 139, 250, 0.04);
  --btn-secondary-hover-border: rgba(56, 189, 248, 0.3);
  --btn-secondary-hover-bg: rgba(56, 189, 248, 0.04);
  --btn-secondary-hover-shadow: 0 0 24px rgba(56, 189, 248, 0.08);
  --glass-bg: rgba(10, 10, 14, 0.72);
  --glass-card-bg: rgba(22, 22, 30, 0.55);
  --glass-border: rgba(255, 255, 255, 0.08);
  --shadow-card: 0 1px 2px rgba(0,0,0,0.3), 0 4px 16px rgba(0,0,0,0.15);
  --shadow-card-hover: 0 4px 24px rgba(0,0,0,0.25), 0 0 0 1px rgba(255,255,255,0.06);
  --shadow-glow: 0 0 40px var(--color-accent-soft);
  --orb1: rgba(56, 189, 248, 0.06);
  --orb2: rgba(167, 139, 250, 0.05);
  --orb3: rgba(251, 113, 133, 0.04);

}

[data-theme="obsidian"] {
  --color-bg-primary: #07070b;
  --color-bg-secondary: #0c0c12;
  --color-bg-tertiary: #14141c;
  --color-border: rgba(255, 255, 255, 0.04);
  --color-border-hover: rgba(255, 255, 255, 0.10);
  --color-text-primary: #e8e6f0;
  --color-text-secondary: #8a869e;
  --color-text-tertiary: #524e62;
  --color-accent: #c084fc;
  --color-accent-soft: rgba(192, 132, 252, 0.08);
  --color-accent-glow: rgba(192, 132, 252, 0.35);
  --color-warm: #22d3ee;

  --color-rose: #f0abfc;

  --color-mint: #67e8f9;

  --gradient-text: linear-gradient(135deg, #e8e6f0 0%, #c084fc 30%, #22d3ee 65%, #f0abfc 100%);
  --gradient-btn: linear-gradient(135deg, #c084fc 0%, #22d3ee 50%, #c084fc 100%);
  --gradient-btn-hover: linear-gradient(135deg, #d8b4fe 0%, #67e8f9 50%, #d8b4fe 100%);
  --gradient-btn-shadow: 0 4px 24px rgba(192, 132, 252, 0.25), 0 0 60px rgba(34, 211, 238, 0.08);
  --gradient-btn-text: #07070b;
  --gradient-border: linear-gradient(135deg, rgba(192,132,252,0.4) 0%, rgba(34,211,238,0.4) 50%, rgba(240,171,252,0.4) 100%);
  --grid-color: rgba(192, 132, 252, 0.015);
  --dot-color: rgba(34, 211, 238, 0.03);
  --btn-secondary-hover-border: rgba(192, 132, 252, 0.3);
  --btn-secondary-hover-bg: rgba(192, 132, 252, 0.04);
  --btn-secondary-hover-shadow: 0 0 24px rgba(192, 132, 252, 0.08);
  --glass-bg: rgba(12, 12, 18, 0.75);
  --glass-card-bg: rgba(20, 20, 28, 0.55);
  --glass-border: rgba(255, 255, 255, 0.06);
  --shadow-card: 0 1px 2px rgba(0,0,0,0.4), 0 4px 16px rgba(0,0,0,0.2);
  --shadow-card-hover: 0 4px 24px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.06);
  --shadow-glow: 0 0 40px var(--color-accent-soft);
  --orb1: rgba(192, 132, 252, 0.06);
  --orb2: rgba(34, 211, 238, 0.05);
  --orb3: rgba(240, 171, 252, 0.04);

}

[data-theme="midnight-gold"] {
  --color-bg-primary: #09090e;
  --color-bg-secondary: #0e0e18;
  --color-bg-tertiary: #16162a;
  --color-border: rgba(255, 255, 255, 0.06);
  --color-border-hover: rgba(255, 255, 255, 0.12);
  --color-text-primary: #f0ece4;
  --color-text-secondary: #9e9890;
  --color-text-tertiary: #5e5a54;
  --color-accent: #d4a843;
  --color-accent-soft: rgba(212, 168, 67, 0.08);
  --color-accent-glow: rgba(212, 168, 67, 0.3);
  --color-warm: #c9873a;

  --color-rose: #e8a87c;

  --color-mint: #a8c256;

  --gradient-text: linear-gradient(135deg, #f0ece4 0%, #d4a843 40%, #e8a87c 70%, #c9873a 100%);
  --gradient-btn: linear-gradient(135deg, #d4a843 0%, #c9873a 100%);
  --gradient-btn-hover: linear-gradient(135deg, #e8c46a 0%, #d4a843 100%);
  --gradient-btn-shadow: 0 4px 24px rgba(212, 168, 67, 0.2), 0 0 60px rgba(201, 135, 58, 0.08);
  --gradient-btn-text: #09090e;
  --gradient-border: linear-gradient(135deg, rgba(212,168,67,0.4) 0%, rgba(201,135,58,0.4) 50%, rgba(232,168,124,0.4) 100%);
  --grid-color: rgba(212, 168, 67, 0.015);
  --dot-color: rgba(201, 135, 58, 0.04);
  --btn-secondary-hover-border: rgba(212, 168, 67, 0.3);
  --btn-secondary-hover-bg: rgba(212, 168, 67, 0.04);
  --btn-secondary-hover-shadow: 0 0 24px rgba(212, 168, 67, 0.06);
  --glass-bg: rgba(14, 14, 24, 0.75);
  --glass-card-bg: rgba(22, 22, 42, 0.55);
  --glass-border: rgba(255, 255, 255, 0.06);
  --shadow-card: 0 1px 2px rgba(0,0,0,0.35), 0 4px 16px rgba(0,0,0,0.18);
  --shadow-card-hover: 0 4px 24px rgba(0,0,0,0.25), 0 0 0 1px rgba(255,255,255,0.06);
  --shadow-glow: 0 0 40px var(--color-accent-soft);
  --orb1: rgba(212, 168, 67, 0.05);
  --orb2: rgba(201, 135, 58, 0.05);
  --orb3: rgba(232, 168, 124, 0.04);

}

[data-theme="neon-mint"] {
  --color-bg-primary: #050d0a;
  --color-bg-secondary: #091410;
  --color-bg-tertiary: #10201a;
  --color-border: rgba(255, 255, 255, 0.06);
  --color-border-hover: rgba(255, 255, 255, 0.12);
  --color-text-primary: #e8f5ef;
  --color-text-secondary: #88b8a4;
  --color-text-tertiary: #4a7a64;
  --color-accent: #34d399;
  --color-accent-soft: rgba(52, 211, 153, 0.08);
  --color-accent-glow: rgba(52, 211, 153, 0.3);
  --color-warm: #2dd4bf;

  --color-rose: #a7f3d0;

  --color-mint: #6ee7b7;

  --gradient-text: linear-gradient(135deg, #e8f5ef 0%, #34d399 40%, #2dd4bf 70%, #6ee7b7 100%);
  --gradient-btn: linear-gradient(135deg, #34d399 0%, #2dd4bf 100%);
  --gradient-btn-hover: linear-gradient(135deg, #6ee7b7 0%, #34d399 100%);
  --gradient-btn-shadow: 0 4px 24px rgba(52, 211, 153, 0.2), 0 0 60px rgba(45, 212, 191, 0.08);
  --gradient-btn-text: #050d0a;
  --gradient-border: linear-gradient(135deg, rgba(52,211,153,0.4) 0%, rgba(45,212,191,0.4) 50%, rgba(110,231,183,0.4) 100%);
  --grid-color: rgba(52, 211, 153, 0.015);
  --dot-color: rgba(45, 212, 191, 0.04);
  --btn-secondary-hover-border: rgba(52, 211, 153, 0.3);
  --btn-secondary-hover-bg: rgba(52, 211, 153, 0.04);
  --btn-secondary-hover-shadow: 0 0 24px rgba(52, 211, 153, 0.06);
  --glass-bg: rgba(9, 20, 16, 0.75);
  --glass-card-bg: rgba(16, 32, 26, 0.55);
  --glass-border: rgba(255, 255, 255, 0.06);
  --shadow-card: 0 1px 2px rgba(0,0,0,0.35), 0 4px 16px rgba(0,0,0,0.18);
  --shadow-card-hover: 0 4px 24px rgba(0,0,0,0.25), 0 0 0 1px rgba(255,255,255,0.06);
  --shadow-glow: 0 0 40px var(--color-accent-soft);
  --orb1: rgba(52, 211, 153, 0.05);
  --orb2: rgba(45, 212, 191, 0.05);
  --orb3: rgba(167, 243, 208, 0.04);

}

[data-theme="ember"] {
  --color-bg-primary: #0e0907;
  --color-bg-secondary: #14100d;
  --color-bg-tertiary: #1e1814;
  --color-border: rgba(255, 255, 255, 0.06);
  --color-border-hover: rgba(255, 255, 255, 0.12);
  --color-text-primary: #f5ece8;
  --color-text-secondary: #b89a88;
  --color-text-tertiary: #7a6454;
  --color-accent: #f97316;
  --color-accent-soft: rgba(249, 115, 22, 0.08);
  --color-accent-glow: rgba(249, 115, 22, 0.3);
  --color-warm: #ef4444;

  --color-rose: #fbbf24;

  --color-mint: #fb923c;

  --gradient-text: linear-gradient(135deg, #f5ece8 0%, #f97316 35%, #ef4444 65%, #fbbf24 100%);
  --gradient-btn: linear-gradient(135deg, #f97316 0%, #ef4444 100%);
  --gradient-btn-hover: linear-gradient(135deg, #fb923c 0%, #f97316 100%);
  --gradient-btn-shadow: 0 4px 24px rgba(249, 115, 22, 0.2), 0 0 60px rgba(239, 68, 68, 0.08);
  --gradient-btn-text: #0e0907;
  --gradient-border: linear-gradient(135deg, rgba(249,115,22,0.4) 0%, rgba(239,68,68,0.4) 50%, rgba(251,191,36,0.4) 100%);
  --grid-color: rgba(249, 115, 22, 0.015);
  --dot-color: rgba(239, 68, 68, 0.04);
  --btn-secondary-hover-border: rgba(249, 115, 22, 0.3);
  --btn-secondary-hover-bg: rgba(249, 115, 22, 0.04);
  --btn-secondary-hover-shadow: 0 0 24px rgba(249, 115, 22, 0.06);
  --glass-bg: rgba(14, 14, 20, 0.75);
  --glass-card-bg: rgba(26, 22, 18, 0.55);
  --glass-border: rgba(255, 255, 255, 0.06);
  --shadow-card: 0 1px 2px rgba(0,0,0,0.35), 0 4px 16px rgba(0,0,0,0.18);
  --shadow-card-hover: 0 4px 24px rgba(0,0,0,0.25), 0 0 0 1px rgba(255,255,255,0.06);
  --shadow-glow: 0 0 40px var(--color-accent-soft);
  --orb1: rgba(249, 115, 22, 0.05);
  --orb2: rgba(239, 68, 68, 0.05);
  --orb3: rgba(251, 191, 36, 0.04);

}

[data-theme="paper"] {
  --color-bg-primary: #faf8f5;
  --color-bg-secondary: #f0ece6;
  --color-bg-tertiary: #e6e0d8;
  --color-border: rgba(0, 0, 0, 0.08);
  --color-border-hover: rgba(0, 0, 0, 0.14);
  --color-text-primary: #1a1612;
  --color-text-secondary: #5c5347;
  --color-text-tertiary: #6b6054;
  --color-accent: #c2410c;
  --color-accent-soft: rgba(194, 65, 12, 0.08);
  --color-accent-glow: rgba(194, 65, 12, 0.2);
  --color-warm: #b45309;

  --color-rose: #9a3412;

  --color-mint: #78716c;

  --gradient-text: linear-gradient(135deg, #1a1612 0%, #c2410c 40%, #b45309 70%, #9a3412 100%);
  --gradient-btn: linear-gradient(135deg, #c2410c 0%, #b45309 100%);
  --gradient-btn-hover: linear-gradient(135deg, #ea580c 0%, #c2410c 100%);
  --gradient-btn-shadow: 0 4px 24px rgba(194, 65, 12, 0.15), 0 0 60px rgba(180, 83, 9, 0.06);
  --gradient-btn-text: #faf8f5;
  --gradient-border: linear-gradient(135deg, rgba(194,65,12,0.3) 0%, rgba(180,83,9,0.3) 50%, rgba(154,52,18,0.3) 100%);
  --grid-color: rgba(194, 65, 12, 0.025);
  --dot-color: rgba(180, 83, 9, 0.04);
  --btn-secondary-hover-border: rgba(194, 65, 12, 0.25);
  --btn-secondary-hover-bg: rgba(194, 65, 12, 0.04);
  --btn-secondary-hover-shadow: 0 0 24px rgba(194, 65, 12, 0.06);
  --glass-bg: rgba(250, 248, 245, 0.85);
  --glass-card-bg: rgba(240, 236, 230, 0.7);
  --glass-border: rgba(0, 0, 0, 0.06);
  --shadow-card: 0 1px 2px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04);
  --shadow-card-hover: 0 4px 24px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.08);
  --shadow-glow: 0 0 40px var(--color-accent-soft);
  --orb1: transparent;
  --orb2: transparent;
  --orb3: transparent;

}

/* ─── Utility classes (theme-specific overrides only — component styles in styles.css) ─── */
.noise { position: relative; }