/* ==========================================================================
   ОГЛАВЛЕНИЕ (variables.css)
   1. Цвета бренда (чёрный, оранжевый, акценты)
   2. Градиенты фонов
   3. Типографика
   4. Отступы и радиусы
   5. Анимации (длительность, easing)
   6. Z-index слои
   ========================================================================== */

:root {
  /* 1. Цвета */
  --color-bg-deep: #050508;
  --color-bg-dark: #0a0a0f;
  --color-bg-mid: #12121a;
  --color-bg-soft: #1a1a24;
  --color-text: #f4f4f6;
  --color-text-muted: #a8a8b8;
  --color-accent: #ff6b1a;
  --color-accent-light: #ffb347;
  --color-accent-gold: #e8c547;
  --color-light-bg: #f8f6f3;
  --color-light-text: #1a1a1a;

  /* 2. Градиенты */
  --gradient-hero: linear-gradient(135deg, #050508 0%, #12121a 45%, #0a0a12 100%);
  --gradient-accent: linear-gradient(120deg, #ff6b1a 0%, #ff9f3d 50%, #ffb347 100%);
  --gradient-dark: linear-gradient(180deg, #0a0a0f 0%, #1a1a24 50%, #050508 100%);
  --gradient-light: linear-gradient(180deg, #ffffff 0%, #f8f6f3 100%);
  --gradient-card-glow: radial-gradient(ellipse at 50% 0%, rgba(255, 107, 26, 0.15), transparent 70%);

  /* 3. Типографика */
  --font-main: "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-display: "Segoe UI", system-ui, sans-serif;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.35rem;
  --text-2xl: 1.75rem;
  --text-3xl: clamp(1.75rem, 4vw, 2.75rem);
  --text-hero: clamp(2rem, 5vw, 3.5rem);

  /* 4. Отступы */
  --section-min-height: 80vh;
  --gap-sm: 0.75rem;
  --gap-md: 1.25rem;
  --gap-lg: 2rem;
  --gap-xl: 3rem;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --container: min(1200px, 92vw);

  /* 5. Анимации */
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 0.25s;
  --duration-normal: 0.45s;
  --duration-slow: 1.2s;
  --float-amp: 6px;

  /* 6. Z-index */
  --z-bg: 0;
  --z-content: 2;
  --z-header: 100;
  --z-modal: 200;
}