/* ============================================================
   ПЕРЕМЕННЫЕ И ТЕМЫ ОФОРМЛЕНИЯ (DESIGN TOKENS & THEMES)
   ============================================================ */

:root {
  --neon-blue: #00d4ff;
  --neon-cyan: #00f0ff;
  --neon-purple: #b44dff;
  --neon-pink: #ff44cc;
  --neon-green: #22c55e;
  --neon-gold: #e5a93c;
  --neon-orange: #ff7700;
  --neon-red: #ff4655;

  --bg-dark: #050814;
  --bg-darker: #02040a;
  --bg-space-gradient: radial-gradient(ellipse at 50% -10%, #0f1d38 0%, #070d1d 45%, #03050d 100%);
  --bg-card: rgba(10, 18, 38, 0.72);
  --bg-card-hover: rgba(16, 28, 56, 0.88);
  --bg-capsule: rgba(10, 18, 36, 0.68);
  --bg-input: rgba(6, 12, 26, 0.7);

  --glass-bg: rgba(10, 18, 38, 0.72);
  --glass-bg-subtle: rgba(14, 24, 48, 0.55);
  --glass-bg-modal: rgba(8, 16, 34, 0.88);
  --glass-bg-input: rgba(6, 12, 26, 0.7);
  --glass-bg-panel: rgba(8, 16, 34, 0.94);
  --glass-border: rgba(0, 212, 255, 0.22);
  --glass-border-subtle: rgba(255, 255, 255, 0.12);
  --glass-border-highlight: rgba(0, 212, 255, 0.55);
  --glass-blur: blur(30px) saturate(190%);
  --glass-blur-modal: blur(36px) saturate(200%);
  --glass-shadow: 0 20px 60px rgba(0, 0, 0, 0.75), 0 0 30px rgba(0, 212, 255, 0.15), inset 0 1px 1px rgba(255, 255, 255, 0.25);

  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;

  --shadow-neon-cyan: 0 0 25px rgba(0, 212, 255, 0.3);
  --shadow-neon-gold: 0 0 25px rgba(229, 169, 60, 0.3);
  --shadow-neon-red: 0 0 25px rgba(255, 70, 85, 0.3);
  --shadow-card: 0 16px 45px rgba(0, 0, 0, 0.7);
  --shadow-dropdown: 0 24px 70px rgba(0, 0, 0, 0.85), 0 0 35px rgba(0, 212, 255, 0.2);

  --radius: 20px;
  --radius-sm: 12px;
  --radius-lg: 26px;
  --radius-pill: 9999px;
  --transition: all 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);

  --brand-start: #00d4ff;
  --brand-mid: #7928ca;
  --brand-end: #ff007a;
}

/* ============================================================
   ТЕМА 1: LOBBIVO (ULTRA LIQUID FROSTED GLASS)
   Премиальное жидкое кристальное стекло с глубоким преломлением
   ============================================================ */
[data-theme="lobbivo"],
[data-theme="finder"] {
  --neon-blue: #ffffff;
  --neon-cyan: #e2e8f0;
  --neon-purple: #c084fc;
  --neon-pink: #f472b6;
  --neon-green: #34d399;
  --neon-gold: #fbbf24;
  --neon-orange: #fb923c;
  --neon-red: #f87171;

  --bg-dark: #070709;
  --bg-darker: #030304;
  --bg-space-gradient: radial-gradient(ellipse at 50% -10%, #1a1a22 0%, #0d0d12 45%, #040406 100%);
  
  --bg-card: rgba(255, 255, 255, 0.06);
  --bg-card-hover: rgba(255, 255, 255, 0.12);
  --bg-capsule: rgba(255, 255, 255, 0.08);
  --bg-input: rgba(255, 255, 255, 0.08);

  --glass-bg: rgba(255, 255, 255, 0.07);
  --glass-bg-subtle: rgba(255, 255, 255, 0.04);
  --glass-bg-modal: linear-gradient(145deg, rgba(255, 255, 255, 0.16) 0%, rgba(18, 18, 26, 0.92) 100%);
  --glass-bg-input: rgba(255, 255, 255, 0.08);
  --glass-bg-panel: linear-gradient(145deg, rgba(255, 255, 255, 0.16) 0%, rgba(16, 16, 24, 0.94) 100%);

  --glass-border: rgba(255, 255, 255, 0.32);
  --glass-border-subtle: rgba(255, 255, 255, 0.18);
  --glass-border-highlight: rgba(255, 255, 255, 0.85);
  
  --glass-blur: blur(30px) saturate(180%) contrast(105%);
  --glass-blur-modal: blur(40px) saturate(190%) contrast(108%);
  --glass-shadow: 0 20px 50px rgba(0, 0, 0, 0.65), inset 0 1.5px 2px rgba(255, 255, 255, 0.6), inset 0 -1.5px 2px rgba(0, 0, 0, 0.35);

  --text-primary: #ffffff;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;

  --shadow-neon-cyan: 0 0 25px rgba(255, 255, 255, 0.3);
  --shadow-neon-gold: 0 0 25px rgba(251, 191, 36, 0.35);
  --shadow-neon-red: 0 0 25px rgba(248, 113, 113, 0.35);
  --shadow-card: 0 16px 45px rgba(0, 0, 0, 0.5), inset 0 1px 2px rgba(255, 255, 255, 0.4);
  --shadow-dropdown: 0 25px 70px rgba(0, 0, 0, 0.85), inset 0 1.5px 2px rgba(255, 255, 255, 0.5);

  --brand-start: #00f0ff;
  --brand-mid: #a855f7;
  --brand-end: #3b82f6;
}

/* ============================================================
   ТЕМА 2: DEEP NEBULA (КОСМИЧЕСКИЙ ФИОЛЕТОВЫЙ ТУМАН)
   Мистический ультрафиолет, яркая маджента, неоновый аметист
   ============================================================ */
[data-theme="nebula"] {
  --neon-blue: #c084fc;
  --neon-cyan: #f472b6;
  --neon-purple: #e879f9;
  --neon-pink: #ff44cc;
  --neon-green: #38bdf8;
  --neon-gold: #fbbf24;
  --neon-orange: #f43f5e;
  --neon-red: #fb7185;

  --bg-dark: #070414;
  --bg-darker: #03020a;
  --bg-space-gradient: radial-gradient(ellipse at 50% -10%, #2e0854 0%, #15062a 45%, #070312 100%);

  --bg-card: rgba(28, 12, 48, 0.72);
  --bg-card-hover: rgba(42, 18, 72, 0.88);
  --bg-capsule: rgba(26, 10, 44, 0.72);
  --bg-input: rgba(18, 7, 32, 0.75);

  --glass-bg: rgba(28, 12, 48, 0.72);
  --glass-bg-subtle: rgba(38, 16, 64, 0.55);
  --glass-bg-modal: rgba(20, 8, 36, 0.92);
  --glass-bg-input: rgba(18, 7, 32, 0.75);
  --glass-bg-panel: rgba(22, 9, 38, 0.95);

  --glass-border: rgba(217, 70, 239, 0.32);
  --glass-border-subtle: rgba(192, 132, 252, 0.18);
  --glass-border-highlight: rgba(232, 121, 249, 0.75);
  --glass-blur: blur(30px) saturate(200%);
  --glass-blur-modal: blur(36px) saturate(210%);
  --glass-shadow: 0 20px 60px rgba(0, 0, 0, 0.8), 0 0 35px rgba(192, 132, 252, 0.2), inset 0 1px 1px rgba(244, 114, 182, 0.3);

  --text-primary: #faf5ff;
  --text-secondary: #d8b4fe;
  --text-muted: #a855f7;

  --shadow-neon-cyan: 0 0 25px rgba(232, 121, 249, 0.4);
  --shadow-neon-gold: 0 0 25px rgba(251, 191, 36, 0.35);
  --shadow-neon-red: 0 0 25px rgba(244, 63, 94, 0.4);
  --shadow-card: 0 16px 45px rgba(0, 0, 0, 0.75);
  --shadow-dropdown: 0 24px 70px rgba(0, 0, 0, 0.9), 0 0 35px rgba(192, 132, 252, 0.25);

  --brand-start: #d946ef;
  --brand-mid: #8b5cf6;
  --brand-end: #06b6d4;
}

/* ============================================================
   ТЕМА 3: CRIMSON RED (РУБИНОВЫЙ ОБСИДИАН)
   Агрессивный рубин, темный обсидиан, огненный алый неон
   ============================================================ */
[data-theme="crimson"] {
  --neon-blue: #ff2a4b;
  --neon-cyan: #ff5722;
  --neon-purple: #ff1744;
  --neon-pink: #f43f5e;
  --neon-green: #fbbf24;
  --neon-gold: #ffaa00;
  --neon-orange: #ff6f00;
  --neon-red: #ff0033;

  --bg-dark: #120406;
  --bg-darker: #080102;
  --bg-space-gradient: radial-gradient(ellipse at 50% -10%, #3e0a12 0%, #1e0508 45%, #0a0102 100%);

  --bg-card: rgba(38, 10, 14, 0.72);
  --bg-card-hover: rgba(56, 14, 20, 0.88);
  --bg-capsule: rgba(36, 9, 13, 0.72);
  --bg-input: rgba(24, 6, 9, 0.75);

  --glass-bg: rgba(38, 10, 14, 0.72);
  --glass-bg-subtle: rgba(48, 12, 18, 0.55);
  --glass-bg-modal: rgba(28, 7, 10, 0.94);
  --glass-bg-input: rgba(24, 6, 9, 0.75);
  --glass-bg-panel: rgba(30, 8, 12, 0.96);

  --glass-border: rgba(255, 42, 75, 0.35);
  --glass-border-subtle: rgba(255, 87, 34, 0.2);
  --glass-border-highlight: rgba(255, 42, 75, 0.8);
  --glass-blur: blur(30px) saturate(200%);
  --glass-blur-modal: blur(36px) saturate(210%);
  --glass-shadow: 0 20px 60px rgba(0, 0, 0, 0.85), 0 0 35px rgba(255, 42, 75, 0.22), inset 0 1px 1px rgba(255, 87, 34, 0.3);

  --text-primary: #fff1f2;
  --text-secondary: #fca5a5;
  --text-muted: #f87171;

  --shadow-neon-cyan: 0 0 25px rgba(255, 42, 75, 0.45);
  --shadow-neon-gold: 0 0 25px rgba(255, 170, 0, 0.35);
  --shadow-neon-red: 0 0 25px rgba(255, 0, 51, 0.45);
  --shadow-card: 0 16px 45px rgba(0, 0, 0, 0.8);
  --shadow-dropdown: 0 24px 70px rgba(0, 0, 0, 0.95), 0 0 35px rgba(255, 42, 75, 0.3);

  --brand-start: #ff2a4b;
  --brand-mid: #ff5722;
  --brand-end: #ff8f00;
}

/* ============================================================
   ТЕМА 4: MATRIX EMERALD (КИБЕРНЕТИЧЕСКИЙ ИЗУМРУД)
   Кибернетический черный, фосфорный терминальный зеленый, мятный неон
   ============================================================ */
[data-theme="matrix"] {
  --neon-blue: #00ff88;
  --neon-cyan: #10b981;
  --neon-purple: #059669;
  --neon-pink: #34d399;
  --neon-green: #00ff9d;
  --neon-gold: #a3e635;
  --neon-orange: #84cc16;
  --neon-red: #ef4444;

  --bg-dark: #020e06;
  --bg-darker: #010603;
  --bg-space-gradient: radial-gradient(ellipse at 50% -10%, #063018 0%, #03180c 45%, #010804 100%);

  --bg-card: rgba(4, 28, 14, 0.72);
  --bg-card-hover: rgba(6, 42, 21, 0.88);
  --bg-capsule: rgba(3, 24, 12, 0.72);
  --bg-input: rgba(2, 16, 8, 0.75);

  --glass-bg: rgba(4, 28, 14, 0.72);
  --glass-bg-subtle: rgba(6, 36, 18, 0.55);
  --glass-bg-modal: rgba(3, 20, 10, 0.94);
  --glass-bg-input: rgba(2, 16, 8, 0.75);
  --glass-bg-panel: rgba(3, 24, 12, 0.96);

  --glass-border: rgba(0, 255, 136, 0.3);
  --glass-border-subtle: rgba(16, 185, 129, 0.2);
  --glass-border-highlight: rgba(0, 255, 157, 0.8);
  --glass-blur: blur(30px) saturate(200%);
  --glass-blur-modal: blur(36px) saturate(210%);
  --glass-shadow: 0 20px 60px rgba(0, 0, 0, 0.85), 0 0 35px rgba(0, 255, 136, 0.22), inset 0 1px 1px rgba(0, 255, 157, 0.3);

  --text-primary: #f0fdf4;
  --text-secondary: #86efac;
  --text-muted: #4ade80;

  --shadow-neon-cyan: 0 0 25px rgba(0, 255, 136, 0.45);
  --shadow-neon-gold: 0 0 25px rgba(163, 230, 53, 0.35);
  --shadow-neon-red: 0 0 25px rgba(239, 68, 68, 0.45);
  --shadow-card: 0 16px 45px rgba(0, 0, 0, 0.8);
  --shadow-dropdown: 0 24px 70px rgba(0, 0, 0, 0.95), 0 0 35px rgba(0, 255, 136, 0.3);

  --brand-start: #00ff88;
  --brand-mid: #10b981;
  --brand-end: #06d6a0;
}