/* =============================================================
   PIARNYA — CSS Custom Properties
   Архитектура: Примитивы → Семантика → Компоненты
   Файл загружается первым через wp_enqueue_style
   ============================================================= */

:root {
  /* ═══════════════════════════════════════════════════════════
     СЛОЙ 1 — ПРИМИТИВЫ
     Префикс _ = внутренние. Не использовать в компонентах.
  ═══════════════════════════════════════════════════════════ */

  /* Маджента (П-буква логотипа) — TODO: уточнить HEX у клиента */
  --_magenta-300: #E055BC;
  --_magenta-400: #D93DB0;
  --_magenta-500: #CC1FA0;
  --_magenta-600: #A8197F;
  --_magenta-700: #85146A;

  /* Бирюза (Р-буква логотипа) — TODO: уточнить HEX у клиента */
  --_cyan-300: #33D6E0;
  --_cyan-400: #1AD4E0;
  --_cyan-500: #00C8D4;
  --_cyan-600: #00A3AC;
  --_cyan-700: #007F85;

  /* Фиолетовый (начало градиента) — TODO: уточнить HEX у клиента */
  --_purple-300: #A05BE0;
  --_purple-400: #9B3FDE;
  --_purple-500: #7B2FBE;
  --_purple-600: #6124A0;
  --_purple-700: #4A1A82;

  /* Нейтралы */
  --_gray-0:   #FFFFFF;
  --_gray-50:  #F9FAFB;
  --_gray-100: #F3F4F6;
  --_gray-200: #E5E7EB;
  --_gray-300: #D1D5DB;
  --_gray-400: #9CA3AF;
  --_gray-500: #6B7280;
  --_gray-700: #374151;
  --_gray-800: #1F2937;
  --_gray-900: #111827;
  --_gray-950: #0D0F12;

  /* ═══════════════════════════════════════════════════════════
     СЛОЙ 2 — СЕМАНТИЧЕСКИЕ ТОКЕНЫ
  ═══════════════════════════════════════════════════════════ */

  /* Основная палитра */
  --color-primary:        var(--_magenta-500);
  --color-primary-light:  var(--_magenta-300);
  --color-primary-dark:   var(--_magenta-700);
  --color-secondary:      var(--_cyan-500);
  --color-secondary-dark: var(--_cyan-700);
  --color-accent:         var(--_purple-500);

  /* Поверхности */
  --color-bg:        var(--_gray-0);
  --color-surface:   var(--_gray-50);
  --color-surface-2: var(--_gray-100);
  --color-border:    var(--_gray-200);
  --color-border-2:  var(--_gray-300);

  /* Текст */
  --color-text:         var(--_gray-900);
  --color-text-muted:   var(--_gray-500);
  --color-text-subtle:  var(--_gray-400);
  --color-text-inverse: var(--_gray-0);

  /* Статусы */
  --color-success: #10B981;
  --color-error:   #EF4444;
  --color-warning: #F59E0B;

  /* Градиенты */
  --gradient-brand: linear-gradient(
    135deg,
    var(--_purple-500) 0%,
    var(--_magenta-500) 50%,
    var(--_cyan-500) 100%
  );
  --gradient-brand-hover: linear-gradient(
    135deg,
    var(--_purple-400) 0%,
    var(--_magenta-400) 50%,
    var(--_cyan-400) 100%
  );
  --gradient-hero: linear-gradient(
    180deg,
    var(--_purple-500) 0%,
    var(--_magenta-500) 40%,
    rgba(255, 255, 255, 0) 100%
  );

  /* ═══════════════════════════════════════════════════════════
     СЛОЙ 3 — КОМПОНЕНТНЫЕ ТОКЕНЫ
  ═══════════════════════════════════════════════════════════ */

  /* Кнопки — ui-ux-pro-max: min 44px touch target */
  --btn-bg:           var(--gradient-brand);
  --btn-bg-hover:     var(--gradient-brand-hover);
  --btn-color:        var(--color-text-inverse);
  --btn-h:            44px;
  --btn-padding-x:    24px;
  --btn-radius:       8px;
  --btn-font-size:    15px;
  --btn-font-weight:  600;
  --btn-transition:   background 200ms ease, box-shadow 200ms ease, transform 150ms ease;

  /* Хедер */
  --header-topbar-h: 48px;
  --header-main-h:   72px;
  --header-total-h:  120px;  /* = topbar + main */
  --header-z:        1000;
  --header-shadow:   0 2px 24px rgba(0, 0, 0, 0.09);
  --topbar-bg:       var(--gradient-brand);

  /* Мегаменю */
  --mega-bg:         var(--_gray-0);
  --mega-shadow:     0 12px 48px rgba(0, 0, 0, 0.13), 0 4px 16px rgba(0, 0, 0, 0.06);
  --mega-pad-y:      40px;
  --mega-col-gap:    40px;
  --mega-title-c:    var(--color-primary);
  --mega-link-c:     var(--color-text-muted);
  --mega-link-hover: var(--color-secondary);

  /* Футер */
  --footer-bg:         var(--_gray-950);
  --footer-text:       var(--_gray-400);
  --footer-title:      var(--color-primary);
  --footer-link-hover: var(--color-secondary);

  /* Типографика — TODO: финальный шрифт согласовать с клиентом */
  --font-body:    'Manrope', system-ui, sans-serif;
  --font-display: 'Unbounded', system-ui, sans-serif;

  /* Масштаб шрифтов (Major Third — 1.25) */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  30px;
  --text-4xl:  38px;
  --text-5xl:  48px;
  --text-6xl:  60px;

  --leading-tight:  1.2;
  --leading-snug:   1.4;
  --leading-normal: 1.6;

  /* Отступы (4px-сетка) */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* Layout */
  --container-max: 1280px;
  --container-px:  clamp(16px, 4vw, 48px);

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

  /* Тени */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 16px rgba(123, 47, 190, 0.10), 0 2px 6px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 16px 48px rgba(123, 47, 190, 0.14), 0 4px 12px rgba(0, 0, 0, 0.08);

  /* Переходы — ui-ux-pro-max: UI feedback ≤ 300ms */
  --ease:     cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 150ms;
  --dur-base: 200ms;
  --dur-slow: 300ms;
}