/* ============================================================
   variables.css — CSS-переменные ПенаФест
   Летний премиальный стиль: вода, пена, солнце
   ============================================================ */

:root {
  /* ── Фирменные цвета ── */
  --color-primary:      #00BFEA;   /* Голубое небо — вода, пена */
  --color-primary-dk:   #0099CC;   /* Тёмнее для hover */
  --color-primary-lt:   #7ADFF5;   /* Светлее для акцентов */
  --color-secondary:    #FF6B35;   /* Тёплый коралл — CTA */
  --color-secondary-dk: #E55520;
  --color-accent:       #FFD93D;   /* Солнечный жёлтый */
  --color-teal:         #00C9A7;   /* Бирюзовый */

  /* ── Фоны ── */
  --color-bg:           #FFFFFF;
  --color-bg-soft:      #EFF9FF;   /* Очень светлый голубой */
  --color-bg-teal:      #EBF9F5;   /* Очень светлый бирюзовый */
  --color-bg-softer:    #E4F6FB;   /* Чуть насыщеннее (детали) */
  --color-bg-dark:      #0B1A2E;   /* Hero и CTA тёмный */

  /* ── Градиенты ── */
  --gradient-body:    linear-gradient(180deg, #EAFBFF 0%, #DDF8F3 45%, #F7FDFF 100%);
  --gradient-hero:    linear-gradient(160deg, rgba(8,18,42,0.45) 0%, rgba(0,45,90,0.28) 55%, rgba(0,90,130,0.10) 100%);
  --gradient-primary: linear-gradient(135deg, #00BFEA 0%, #00C9A7 100%);
  --gradient-summer:  linear-gradient(135deg, #00BFEA 0%, #7ADFF5 50%, #00C9A7 100%);
  --gradient-card:    linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(234,251,255,0.80) 100%);

  /* ── Текст ── */
  --color-text:         #1A2E44;   /* Тёмно-синий-серый */
  --color-text-muted:   #5B7A9A;   /* Голубовато-серый */
  --color-text-light:   rgba(255, 255, 255, 0.92);

  /* ── WhatsApp / Socials ── */
  --color-whatsapp:     #25D366;
  --color-whatsapp-dk:  #1DA851;

  /* ── Радиусы ── */
  --radius-sm:   8px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-xl:   36px;
  --radius-2xl:  48px;
  --radius-full: 9999px;

  /* ── Тени ── */
  --shadow-card:   0 8px 32px rgba(0, 191, 234, 0.13);
  --shadow-card-hover: 0 16px 48px rgba(0, 191, 234, 0.22);
  --shadow-btn:    0 6px 20px rgba(0, 191, 234, 0.35);
  --shadow-img:    0 8px 32px rgba(0, 30, 60, 0.12);
  --shadow-header: 0 2px 24px rgba(0, 30, 60, 0.08);
  --shadow-glass:  0 8px 32px rgba(0, 191, 234, 0.15), inset 0 1px 0 rgba(255,255,255,0.6);

  /* ── Стекло (glass morphism) ── */
  --glass-bg:      rgba(255, 255, 255, 0.18);
  --glass-border:  1px solid rgba(255, 255, 255, 0.35);
  --glass-blur:    blur(16px);

  /* ── Переходы ── */
  --transition:    0.28s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-lg: 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Типографика ── */
  --font-display: 'Nunito', sans-serif;
  --font-body:    'Inter', sans-serif;

  --fs-xs:   0.75rem;    /* 12px */
  --fs-sm:   0.875rem;   /* 14px */
  --fs-base: 1rem;       /* 16px */
  --fs-md:   1.125rem;   /* 18px */
  --fs-lg:   1.25rem;    /* 20px */
  --fs-xl:   1.5rem;     /* 24px */
  --fs-2xl:  2rem;       /* 32px */
  --fs-3xl:  2.5rem;     /* 40px */
  --fs-4xl:  3rem;       /* 48px */
  --fs-hero: clamp(2.25rem, 6vw, 4rem);

  /* ── Отступы ── */
  --container-max: 1200px;
  --container-px:  1.25rem;
  --section-py:    clamp(3.5rem, 8vw, 6.5rem);

  /* ── Z-индексы ── */
  --z-header:   100;
  --z-overlay:  200;
  --z-modal:    300;
  --z-lightbox: 400;
}