/* ============================================================
   SKANDALIST — Design System v3
   Палитра: бирюза + глубокий чёрный (по логотипу)
   ============================================================ */

:root {
  /* === ФОН === */
  --bg-void: #000000;
  --bg-0: #050708;
  --bg-1: #0a0d0f;
  --bg-2: #0f1315;
  --bg-3: #161a1c;
  --bg-4: #1e2225;

  /* === ПОВЕРХНОСТИ === */
  --surface: rgba(255, 255, 255, 0.03);
  --surface-2: rgba(255, 255, 255, 0.05);
  --surface-3: rgba(255, 255, 255, 0.08);
  --surface-hover: rgba(255, 255, 255, 0.05);
  --surface-card: #0a0d0f;
  --surface-inset: rgba(0, 0, 0, 0.25);
  --surface-inset-2: rgba(0, 0, 0, 0.3);

  /* === ГРАНИЦЫ === */
  --border: rgba(255, 255, 255, 0.06);
  --border-2: rgba(255, 255, 255, 0.1);
  --border-3: rgba(255, 255, 255, 0.15);

  /* === АКЦЕНТЫ === */
  --accent: #3fc7e0;
  --accent-2: #5dd4e8;
  --accent-3: #a8e6f0;
  --accent-glow: rgba(63, 199, 224, 0.4);
  --accent-dim: rgba(63, 199, 224, 0.1);
  --accent-border: rgba(63, 199, 224, 0.3);

  /* === ФОНЫ-ГРАДИЕНТЫ === */
  --accent-soft-bg: linear-gradient(135deg, rgba(63, 199, 224, 0.08) 0%, rgba(168, 230, 240, 0.02) 100%);
  --accent-soft-bg-2: linear-gradient(135deg, rgba(63, 199, 224, 0.12) 0%, rgba(168, 230, 240, 0.03) 100%);

  /* === СЕМАНТИКА === */
  --success: #4cd964;
  --success-dim: rgba(76, 217, 100, 0.12);
  --success-soft-bg: rgba(76, 217, 100, 0.08);
  --warning: #ffb340;
  --warning-dim: rgba(255, 179, 64, 0.12);
  --warning-soft-bg: rgba(255, 179, 64, 0.08);
  --danger: #ff4a5a;
  --danger-dim: rgba(255, 74, 90, 0.12);
  --danger-soft-bg: rgba(255, 74, 90, 0.08);
  --info: #5da3ff;
  --info-dim: rgba(93, 163, 255, 0.12);
  --info-soft-bg: rgba(93, 163, 255, 0.08);

  /* === ТЕКСТ === */
  --text: #f0f4f6;
  --text-2: #b6c0c5;
  --text-3: #7d888e;
  --text-4: #505a60;
  --text-5: #30383d;

  /* === ГРАДИЕНТЫ === */
  --grad-accent: linear-gradient(135deg, #3fc7e0 0%, #5dd4e8 50%, #a8e6f0 100%);
  --grad-accent-soft: linear-gradient(135deg, rgba(63, 199, 224, 0.15) 0%, rgba(168, 230, 240, 0.05) 100%);
  --grad-surface: linear-gradient(160deg, var(--bg-3) 0%, var(--bg-0) 100%);

  /* === ШРИФТЫ === */
  --font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-head: 'Unbounded', 'Montserrat', sans-serif;
  --font-brand: 'Nosifer', cursive;

  /* === РАЗМЕРЫ ШРИФТОВ === */
  --fs-xs: 10px;
  --fs-sm: 12px;
  --fs-base: 14px;
  --fs-md: 15px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 28px;
  --fs-3xl: 36px;
  --fs-4xl: 48px;
  --fs-hero: clamp(40px, 6vw, 72px);

  /* === РАДИУСЫ === */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-2xl: 32px;
  --r-full: 999px;

  /* === ТЕНИ === */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.6);
  --shadow-accent: 0 8px 32px rgba(63, 199, 224, 0.35);
  --shadow-photo: 0 20px 60px rgba(0, 0, 0, 0.5);

  /* === АНИМАЦИИ === */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 0.15s var(--ease-out);
  --t-base: 0.3s var(--ease-out);
  --t-slow: 0.5s var(--ease-out);

  /* === ОТСТУПЫ === */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 28px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-14: 56px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* === СЕКЦИИ === */
  --section-pad: 72px;
  --section-pad-sm: 56px;

  /* === Z-INDEX === */
  --z-base: 1;
  --z-header: 100;
  --z-dropdown: 200;
  --z-modal: 1000;
  --z-toast: 2000;
  --z-agegate: 3000;

  /* === ТЕМА-СПЕЦИФИЧНЫЕ === */
  --hero-glow-1: rgba(63, 199, 224, 0.35);
  --hero-glow-2: rgba(0, 0, 0, 0.6);

  --overlay-hero-top: rgba(0, 0, 0, 0.7);
  --overlay-hero-mid: rgba(0, 0, 0, 0.85);

  --overlay-header: rgba(0, 0, 0, 0.9);
  --overlay-modal: rgba(0, 0, 0, 0.85);
  --overlay-menu: rgba(0, 0, 0, 0.7);
  --overlay-agegate: rgba(0, 0, 0, 0.98);

  --on-accent: #ffffff;
  --on-photo: #ffffff;
  --overlay-photo-bottom: rgba(0, 0, 0, 0.75);

  /* Подложки под контентом */
  --bg-subtle-1: rgba(0, 0, 0, 0.2);
  --bg-subtle-2: rgba(0, 0, 0, 0.25);
  --bg-subtle-3: rgba(0, 0, 0, 0.3);
  --bg-subtle-4: rgba(0, 0, 0, 0.4);
  --bg-subtle-5: rgba(0, 0, 0, 0.5);
  --bg-subtle-6: rgba(0, 0, 0, 0.6);

  /* Карта */
  --map-filter: grayscale(1) invert(0.92) contrast(1.1) hue-rotate(180deg);

  /* Логотип */
  --logo-shadow-1: rgba(63, 199, 224, 0.3);
  --logo-shadow-2: rgba(63, 199, 224, 0.15);
  --logo-letter-shadow: rgba(255, 255, 255, 0.4);

  /* Hero SVG */
  --svg-body-top: #1a1a2e;
  --svg-body-bottom: #0a0b14;
  --svg-glass: rgba(255, 255, 255, 0.15);
  --svg-glass-2: rgba(255, 255, 255, 0.03);
  --svg-liquid-top: rgba(63, 199, 224, 0.6);
  --svg-liquid-bottom: rgba(168, 230, 240, 0.3);
  --svg-shadow: rgba(0, 0, 0, 0.6);
  --svg-glow-soft: rgba(63, 199, 224, 0.35);
  --svg-glass-highlight: rgba(255, 255, 255, 0.08);
  --svg-vapor: rgba(63, 199, 224, 0.15);
}

/* ============================================================
   СВЕТЛАЯ ТЕМА — тщательно проработана
   ============================================================ */
:root[data-theme="light"] {
  /* === ФОН === */
  --bg-void: #f0f2f4;
  --bg-0: #ffffff;
  --bg-1: #f8fafb;
  --bg-2: #f0f3f5;
  --bg-3: #e5eaed;
  --bg-4: #d8dee2;

  /* === ПОВЕРХНОСТИ === */
  --surface: rgba(0, 0, 0, 0.025);
  --surface-2: rgba(0, 0, 0, 0.05);
  --surface-3: rgba(0, 0, 0, 0.08);
  --surface-hover: rgba(0, 0, 0, 0.04);
  --surface-card: #ffffff;
  --surface-inset: rgba(0, 0, 0, 0.03);
  --surface-inset-2: rgba(0, 0, 0, 0.05);

  /* === ГРАНИЦЫ === */
  --border: rgba(0, 0, 0, 0.08);
  --border-2: rgba(0, 0, 0, 0.12);
  --border-3: rgba(0, 0, 0, 0.18);

  /* === АКЦЕНТЫ === */
  --accent: #0e8ba3;
  --accent-2: #17a0ba;
  --accent-3: #3bb4cb;
  --accent-glow: rgba(14, 139, 163, 0.25);
  --accent-dim: rgba(14, 139, 163, 0.1);
  --accent-border: rgba(14, 139, 163, 0.35);

  /* === ФОНЫ-ГРАДИЕНТЫ === */
  --accent-soft-bg: linear-gradient(135deg, rgba(14, 139, 163, 0.08) 0%, rgba(59, 180, 203, 0.02) 100%);
  --accent-soft-bg-2: linear-gradient(135deg, rgba(14, 139, 163, 0.12) 0%, rgba(59, 180, 203, 0.03) 100%);

  /* === СЕМАНТИКА === */
  --success: #1e7e34;
  --success-dim: rgba(30, 126, 52, 0.12);
  --success-soft-bg: rgba(30, 126, 52, 0.08);
  --warning: #b86e00;
  --warning-dim: rgba(184, 110, 0, 0.12);
  --warning-soft-bg: rgba(184, 110, 0, 0.08);
  --danger: #c11d2e;
  --danger-dim: rgba(193, 29, 46, 0.1);
  --danger-soft-bg: rgba(193, 29, 46, 0.06);
  --info: #1c5cc4;
  --info-dim: rgba(28, 92, 196, 0.12);
  --info-soft-bg: rgba(28, 92, 196, 0.08);

  /* === ТЕКСТ === */
  --text: #0a0d0f;
  --text-2: #2d3438;
  --text-3: #5a646a;
  --text-4: #8b959b;
  --text-5: #b5bcc1;

  /* === ГРАДИЕНТЫ === */
  --grad-accent: linear-gradient(135deg, #0e8ba3 0%, #17a0ba 50%, #3bb4cb 100%);
  --grad-accent-soft: linear-gradient(135deg, rgba(14, 139, 163, 0.12) 0%, rgba(59, 180, 203, 0.04) 100%);
  --grad-surface: linear-gradient(160deg, var(--bg-2) 0%, var(--bg-0) 100%);

  /* === ТЕНИ === */
  --shadow-sm: 0 2px 8px rgba(15, 30, 40, 0.06);
  --shadow-md: 0 8px 24px rgba(15, 30, 40, 0.08);
  --shadow-lg: 0 16px 48px rgba(15, 30, 40, 0.1);
  --shadow-xl: 0 24px 64px rgba(15, 30, 40, 0.12);
  --shadow-accent: 0 8px 32px rgba(14, 139, 163, 0.25);
  --shadow-photo: 0 20px 60px rgba(15, 30, 40, 0.15);

  /* === ТЕМА-СПЕЦИФИЧНЫЕ === */
  --hero-glow-1: rgba(14, 139, 163, 0.2);
  --hero-glow-2: rgba(255, 255, 255, 0.6);

  --overlay-hero-top: rgba(255, 255, 255, 0.6);
  --overlay-hero-mid: rgba(245, 247, 248, 0.8);

  --overlay-header: rgba(255, 255, 255, 0.95);
  --overlay-modal: rgba(15, 30, 40, 0.4);
  --overlay-menu: rgba(15, 30, 40, 0.35);
  --overlay-agegate: rgba(245, 247, 248, 0.98);

  --on-accent: #ffffff;
  --on-photo: #ffffff;
  --overlay-photo-bottom: rgba(0, 0, 0, 0.6);

  /* Подложки — почти прозрачные */
  --bg-subtle-1: rgba(0, 0, 0, 0.02);
  --bg-subtle-2: rgba(0, 0, 0, 0.03);
  --bg-subtle-3: rgba(0, 0, 0, 0.04);
  --bg-subtle-4: rgba(0, 0, 0, 0.05);
  --bg-subtle-5: rgba(0, 0, 0, 0.07);
  --bg-subtle-6: rgba(0, 0, 0, 0.09);

  /* Карта — без инверсии */
  --map-filter: none;

  /* Логотип */
  --logo-shadow-1: rgba(14, 139, 163, 0.3);
  --logo-shadow-2: rgba(14, 139, 163, 0.15);
  --logo-letter-shadow: rgba(10, 13, 15, 0.35);

  /* Hero SVG — светлое устройство */
  --svg-body-top: #e8f3f6;
  --svg-body-bottom: #d0e4ea;
  --svg-glass: rgba(255, 255, 255, 0.6);
  --svg-glass-2: rgba(200, 220, 225, 0.4);
  --svg-liquid-top: rgba(14, 139, 163, 0.5);
  --svg-liquid-bottom: rgba(59, 180, 203, 0.3);
  --svg-shadow: rgba(15, 30, 40, 0.15);
  --svg-glow-soft: rgba(14, 139, 163, 0.2);
  --svg-glass-highlight: rgba(255, 255, 255, 0.7);
  --svg-vapor: rgba(14, 139, 163, 0.12);
}

@media (max-width: 768px) {
  :root {
    --section-pad: 48px;
    --section-pad-sm: 40px;
  }
}