/* =============================================================
   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 — СЕМАНТИЧЕСКИЕ ТОКЕНЫ
  ═══════════════════════════════════════════════════════════ */

  /* Единый фирменный цвет. Клиент 2026-07: сначала фиолетовый #7B2FE0,
     затем перекрашен в розовую маджента #D93DB0 (взято из палитры сайта).
     Смена бренд-цвета — только эти две строки (всё остальное завязано на них).
     --brand-solid-hover — на ступень темнее, для отклика кнопок на hover. */
  --brand-solid:       #D93DB0;
  --brand-solid-hover: #CC1FA0;

  /* Основная палитра — переведена на единый фиолетовый */
  --color-primary:        var(--brand-solid);
  --color-primary-light:  var(--_magenta-300);
  --color-primary-dark:   var(--brand-solid-hover);
  --color-secondary:      var(--_cyan-500);   /* бирюза — остаётся для focus-outline (контраст на фиолетовой кнопке) */
  --color-secondary-dark: var(--_cyan-700);
  --color-accent:         var(--brand-solid);

  /* Поверхности */
  --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;

  /* «Градиенты» — теперь сплошной фирменный цвет (имена сохранены, чтобы
     не рефакторить ~50 использований по всем CSS; значение — один оттенок,
     background-clip:text и gradient-border-трюки работают так же). */
  --gradient-brand:       var(--brand-solid);
  --gradient-brand-hover: var(--brand-solid-hover);
  --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;

  /* Хедер (топбар убран — редизайн «3a», см. ниже) */
  --header-main-h:   88px;
  --header-total-h:  88px;
  --header-z:        1000;
  --header-shadow:   0 2px 24px rgba(0, 0, 0, 0.09);

  /* Мегаменю */
  --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);

  /* Хедер v2 + Hero v3 (редизайн Claude Design, блок «3a») —
     точная палитра из макета, отличается от --_magenta/--_purple/--_cyan
     (те остаются для остального сайта: футер, мегаменю и т.д.) */
  --hh-text:        #150A24;
  --hh-text-muted:  #4A4458;
  --hh-bg-light:    #FAFAFC;
  --hh-accent:      var(--brand-solid); /* было #D62DA0 (розовый) — унифицировано */
  /* Все hh-градиенты (лого, бейджи, кнопки, выделение) — единый фиолетовый.
     Логотип «ПИАРНЯ» тоже сплошной (реш. клиента 2026-07). */
  --hh-gradient-logo:      var(--brand-solid);
  --hh-gradient-badge:     var(--brand-solid);
  --hh-gradient-btn:       var(--brand-solid);
  --hh-gradient-highlight: var(--brand-solid);
  --hh-close-bg:           #F4F1F8;
  --hh-close-bg-hover:     #EAE4F2;

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

  /* Кейсы: архив + карточка (эталон handoff/cases-desktop.html, десктоп 1440).
     Размеры/геометрия — буквально из макета. Цвета: маджента/циан адаптированы
     под фирменные токены сайта (--brand-solid / --_cyan-500), не хардкод из макета;
     нейтральные линии — буквально, у сайта нет для них аналога. */
  --case-gap:          28px;
  --case-card-h:       504px;
  --case-card-radius:  24px;
  --case-text-2:       #5A5268;
  --case-text-3:       #6B6377;
  --case-text-4:       #9A93A6;
  --case-line:         #E7E3EE;
  --case-line-2:       #EBE7F0;
  --case-pill-line:    #E4E0EA;
  --case-cyan-bg:      color-mix(in srgb, var(--_cyan-500) 10%, white);
  --case-cyan-line:    color-mix(in srgb, var(--_cyan-500) 28%, white);

  /* Боковой фильтр подуслуг (сайдбар каталога) — эталон тот же handoff-макет. */
  --case-sidebar-w:       300px;
  --case-sidebar-radius:  22px;
  --case-active-bg:       #FBECF5;
  --case-empty-text:      #C4BDD0;
  --case-empty-count:     #D6D0DE;

  /* Типографика — 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;

  /* Межсекционный отступ — единый зазор между ВСЕМИ блоками на сайте.
     1см/0.75см при 96dpi (CSS reference pixel, 1см = 96px/2.54 ≈ 37.8px). */
  --sp-section:     38px;
  --sp-section-mob: 28px;

  /* Layout */
  --container-max: 1440px;
  --container-px:  64px;

  /* Радиусы */
  --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(217, 61, 176, 0.10), 0 2px 6px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 16px 48px rgba(217, 61, 176, 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;
}

/* Мобильная шапка (редизайн «4a») — 58px вместо 88px, + safe-area
   на notch/статус-бар. Переопределение переменной само разъезжается
   по всем зависимым местам (body padding-top, мегаменю, cart.css и т.д.) */
@media (max-width: 767px) {
  :root {
    --header-total-h: calc(58px + env(safe-area-inset-top, 0px));
  }
}