/* ============================================
   VARIABLES.CSS — Дизайн-токены
   ============================================ */

:root {
  /* --- Цвета --- */
  --bg-primary: #0A0A0F;
  --bg-secondary: #131318;
  --bg-card: #1A1A22;
  --bg-card-hover: #1F1F2A;

  --accent-blue: #2563EB;
  --accent-blue-light: #3B82F6;
  --accent-blue-glow: rgba(59, 130, 246, 0.3);
  --accent-blue-glow-strong: rgba(59, 130, 246, 0.5);

  --accent-amber: #F59E0B;
  --accent-amber-light: #FBBF24;
  --accent-amber-glow: rgba(245, 158, 11, 0.3);

  --text-white: #FFFFFF;
  --text-primary: #F1F5F9;
  --text-secondary: #94A3B8;
  --text-muted: #64748B;

  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-medium: rgba(255, 255, 255, 0.1);
  --border-accent: rgba(59, 130, 246, 0.3);

  /* --- Градиенты --- */
  --gradient-bg: linear-gradient(180deg, #0A0A0F 0%, #131318 100%);
  --gradient-blue: linear-gradient(135deg, #2563EB 0%, #3B82F6 100%);
  --gradient-amber: linear-gradient(135deg, #F59E0B 0%, #FBBF24 100%);
  --gradient-card: linear-gradient(135deg, rgba(37, 99, 235, 0.05) 0%, rgba(245, 158, 11, 0.03) 100%);
  --gradient-hero-overlay: linear-gradient(180deg, rgba(10, 10, 15, 0.3) 0%, rgba(10, 10, 15, 0.8) 60%, #0A0A0F 100%);
  --gradient-divider: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.1) 50%, transparent 100%);

  /* --- Типографика --- */
  --font-display: 'Unbounded', 'Manrope', sans-serif;
  --font-body: 'Inter', 'Onest', sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  /* Размеры заголовков (fluid) */
  --text-hero: clamp(2.5rem, 6vw, 5.5rem);
  --text-h1: clamp(2rem, 4vw, 4rem);
  --text-h2: clamp(1.75rem, 3vw, 3rem);
  --text-h3: clamp(1.25rem, 2vw, 1.75rem);
  --text-h4: clamp(1rem, 1.5vw, 1.25rem);
  --text-body: 1rem;
  --text-small: 0.875rem;
  --text-xs: 0.75rem;

  /* --- Отступы --- */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  --space-5xl: 8rem;

  /* --- Секции --- */
  --section-padding: clamp(4rem, 8vw, 8rem);
  --container-max: 1280px;
  --container-padding: clamp(1rem, 5vw, 2rem);

  /* --- Скругления --- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-full: 9999px;

  /* --- Тени и свечение --- */
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.4);
  --shadow-card-hover: 0 8px 40px rgba(0, 0, 0, 0.6);
  --glow-blue: 0 0 30px rgba(59, 130, 246, 0.4), 0 0 60px rgba(59, 130, 246, 0.15);
  --glow-blue-strong: 0 0 40px rgba(59, 130, 246, 0.6), 0 0 80px rgba(59, 130, 246, 0.2);
  --glow-amber: 0 0 20px rgba(245, 158, 11, 0.4);

  /* --- Переходы --- */
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;
  --transition-slow: 0.4s ease;
  --transition-spring: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* --- z-индексы --- */
  --z-base: 1;
  --z-above: 10;
  --z-modal: 100;
  --z-header: 1000;
  --z-overlay: 2000;
}

/* ============================================
   СВЕТЛАЯ ТЕМА
   ============================================ */

[data-theme="light"] {
  --bg-primary: #F8FAFC;
  --bg-secondary: #EFF3F8;
  --bg-card: #FFFFFF;
  --bg-card-hover: #F1F5F9;

  --text-white: #0F172A;
  --text-primary: #1E293B;
  --text-secondary: #475569;
  --text-muted: #94A3B8;

  --border-subtle: rgba(0, 0, 0, 0.07);
  --border-medium: rgba(0, 0, 0, 0.12);
  --border-accent: rgba(37, 99, 235, 0.25);

  --gradient-bg: linear-gradient(180deg, #F8FAFC 0%, #EFF3F8 100%);
  --gradient-card: linear-gradient(135deg, rgba(37, 99, 235, 0.04) 0%, rgba(245, 158, 11, 0.02) 100%);
  --gradient-hero-overlay: linear-gradient(180deg, rgba(248, 250, 252, 0.15) 0%, rgba(15, 23, 42, 0.55) 50%, rgba(15, 23, 42, 0.85) 85%, #0F172A 100%);
  --gradient-divider: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.1) 50%, transparent 100%);

  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.08);
  --shadow-card-hover: 0 8px 40px rgba(0, 0, 0, 0.16);
}