/**
 * NATAANIMAL DESIGN TOKENS
 * Единая точка правки: цвета / фоны / поверхности / линии / радиусы / тени / ринги.
 *
 * ФАЗА 3 (3B):
 * - Foundation: сырые значения (RGBA/HEX)
 * - Zones: смысловые группы (то, что ты реально крутишь)
 * - Module defaults: дефолты витрины/семинаров/букинга/портфолио
 * - Legacy bridge: старые переменные (--bg-0, --stroke, ...) продолжают работать
 */

:root{
  /* =====================================================================
     A) FOUNDATION (источник правды: только здесь реальные RGBA/HEX)
     ===================================================================== */
  --na-col-bg-0:#0b0c0f;
  --na-col-bg-1:#0e0f12;
  --na-col-bg-2:#12141a;
  --na-col-bg-3:#171a21;

  --na-col-text:#e9edf3;
  --na-col-text-muted:rgba(233,237,243,.72);
  --na-col-text-faint:rgba(233,237,243,.45);

  --na-col-stroke:rgba(255,255,255,.10);
  --na-col-stroke-2:rgba(255,255,255,.14);
  --na-col-stroke-strong:rgba(255,255,255,.18);

  /* Спец-цвета (используются в нескольких модулях) */
  --na-col-tooltip-bg: rgba(5, 6, 9, 0.96);
  --na-col-state-info-soft: rgba(150,190,255,0.16);

  /* Акцент (для focus ring и аккуратных подсветок) */
  --na-col-accent-rgb: 133,157,171;

  /* Поверхности (часто повторяющиеся “чёрные стёкла”) */
  --na-col-surface-20: rgba(0, 0, 0, 0.20);
  --na-col-surface-22: rgba(0, 0, 0, 0.22);
  --na-col-surface-25: rgba(0, 0, 0, 0.25);
  --na-col-surface-28: rgba(0, 0, 0, 0.28);
  --na-col-surface-35: rgba(0, 0, 0, 0.35);
  --na-col-surface-38: rgba(0, 0, 0, 0.38);
  --na-col-surface-42: rgba(0, 0, 0, 0.42);
  --na-col-surface-45: rgba(0, 0, 0, 0.45);

  /* “белые плёнки” (часто повторяются в градиентах/плашках) */
  --na-col-white-01: rgba(255,255,255,.01);
  --na-col-white-02: rgba(255,255,255,.02);
  --na-col-white-03: rgba(255,255,255,.03);
  --na-col-white-04: rgba(255,255,255,.04);
  --na-col-white-05: rgba(255,255,255,.05);
  --na-col-white-06: rgba(255,255,255,.06);
  --na-col-white-08: rgba(255,255,255,.08);
  --na-col-white-10: rgba(255,255,255,.10);
  --na-col-white-12: rgba(255,255,255,.12);
  --na-col-white-14: rgba(255,255,255,.14);
  --na-col-white-16: rgba(255,255,255,.16);
  --na-col-white-22: rgba(255,255,255,.22);
  --na-col-white-26: rgba(255,255,255,.26);
  --na-col-white-35: rgba(255,255,255,.35);

  /* =====================================================================
     B) ZONES (смысловые группы — “крутим по ролям”)
     ===================================================================== */

  /* Page background */
  --na-zone-page-bg-0: var(--na-col-bg-0);
  --na-zone-page-bg-1: var(--na-col-bg-1);
  --na-zone-page-bg-2: var(--na-col-bg-2);
  --na-zone-page-bg-3: var(--na-col-bg-3);

  /* Text system */
  --na-zone-text: var(--na-col-text);
  --na-zone-text-muted: var(--na-col-text-muted);
  --na-zone-text-faint: var(--na-col-text-faint);
  /* “белый текст для карточек/плиток” */
  --na-zone-text-strong: rgba(255,255,255,.92);

  /* Lines */
  --na-zone-stroke: var(--na-col-stroke);
  --na-zone-stroke-2: var(--na-col-stroke-2);
  --na-zone-stroke-strong: var(--na-col-stroke-strong);

  /* Surfaces */
  --na-zone-surface-card: var(--na-col-surface-22);
  --na-zone-surface-card-hover: var(--na-col-surface-28);
  --na-zone-surface-media: var(--na-col-surface-25);
  --na-zone-surface-overlay: var(--na-col-surface-25);
  --na-zone-surface-order: var(--na-col-surface-45);
  --na-zone-surface-tooltip: var(--na-col-tooltip-bg);
  --na-zone-surface-panel: rgba(10, 10, 12, 0.45);
  --na-zone-surface-panel-soft: rgba(10, 10, 12, 0.28);
  --na-zone-surface-ghost: var(--na-col-white-03);
  --na-zone-surface-media-light: var(--na-col-white-04);
  --na-zone-surface-pill-bg: var(--na-col-white-08);

  --na-zone-surface-card-top: var(--na-col-white-05);
  --na-zone-surface-card-bottom: var(--na-col-white-02);

  /* Controls */
  --na-zone-control-bg: var(--na-col-white-04);
  --na-zone-control-bg-hover: var(--na-col-white-06);
  --na-zone-control-primary-bg: rgba(233,237,243,.12);
  --na-zone-control-primary-border: rgba(233,237,243,.22);

  --na-zone-control-ring: rgba(var(--na-col-accent-rgb), .25);
  --na-zone-control-ring-strong: rgba(var(--na-col-accent-rgb), .35);

  /* States (bg) */
  --na-zone-state-good-bg: rgba(120, 255, 170, 0.26);
  --na-zone-state-bad-bg: rgba(255, 120, 120, 0.28);
  --na-zone-state-warn-bg: rgba(255, 210, 120, 0.26);
  --na-zone-state-info-bg: rgba(150, 190, 255, 0.26);
  --na-zone-state-info-soft-bg: var(--na-col-state-info-soft);

  /* Background effects (spotlights + grain) */
  --na-zone-bg-blur: 22px;
  --na-zone-bg-vignette: .18;

  --na-zone-bg-spot-1: rgba(48, 48, 48, 0.19);
  --na-zone-bg-spot-2: rgba(255, 255, 255, 0.112);
  --na-zone-bg-spot-3: rgba(255, 255, 255, 0.148);
  --na-zone-bg-spot-4: rgba(255, 255, 255, 0.288);

  --na-zone-bg-noise-opacity: 0.12;
  --na-zone-bg-noise-size: 160px;

  /* Seminars highlight (режимный мини-скин) */
  --na-zone-semi-hl-bg0:#0b0b10;
  --na-zone-semi-hl-bg1:#0f1017;
  --na-zone-semi-hl-stroke: rgba(255,255,255,.16);
  --na-zone-semi-hl-shadow: 0 16px 50px rgba(0,0,0,.55);

  /* =====================================================================
     C) SHAPE TOKENS (штрихи/радиусы/тени/ринги) — “под рукой”
     ===================================================================== */
  --na-token-stroke-w: 0px;
  --na-token-stroke: var(--na-zone-stroke);
  --na-token-stroke-2: var(--na-zone-stroke-2);

  --na-token-radius-2: 2px;
  --na-token-radius-4: 4px;
  --na-token-radius-10: 10px;
  --na-token-radius-12: 12px;
  --na-token-radius-14: 14px;
  --na-token-radius-16: 16px;
  --na-token-radius-18: 18px;
  --na-token-radius-26: 26px;
  --na-token-radius-pill: 999px;

  --na-token-shadow-0: none;
  --na-token-shadow-1: 0 10px 30px rgba(0,0,0,.25);
  --na-token-shadow-2: 0 10px 30px rgba(0,0,0,.35);
  --na-token-shadow-3: 0 12px 40px rgba(0,0,0,.55);
  --na-token-shadow-4: 0 16px 38px rgba(0,0,0,.40);
  --na-token-shadow-5: 0 16px 60px rgba(0,0,0,.35);
  --na-token-shadow-6: 0 18px 60px rgba(0,0,0,.55);
  --na-token-shadow-7: 0 18px 70px rgba(0,0,0,.45);

  --na-token-shadow-glass: inset 0 1px 0 rgba(255,255,255,.10), 0 14px 34px rgba(0,0,0,.35);

  --na-token-ring-w: 3px;
  --na-token-ring-w-lg: 6px;
  --na-token-ring-soft-color: rgba(255,255,255,.08);
  --na-token-ring-accent-color: rgba(var(--na-col-accent-rgb), .25);

  --na-token-shadow-glow: 0 0 10px rgba(255,255,255,.30);


  /* =====================================================================
   C2) PUBLIC ALIASES (совместимость: тема/плагин могут ждать эти имена)
   ===================================================================== */
  --na-stroke-w: var(--na-token-stroke-w);
  --na-stroke: var(--na-token-stroke);
  --na-stroke-2: var(--na-token-stroke-2);

  --na-ring-w: var(--na-token-ring-w);
  --na-ring-w-lg: var(--na-token-ring-w-lg);

  --na-radius-2: var(--na-token-radius-2);
  --na-radius-4: var(--na-token-radius-4);
  --na-radius-10: var(--na-token-radius-10);
  --na-radius-12: var(--na-token-radius-12);
  --na-radius-14: var(--na-token-radius-14);
  --na-radius-16: var(--na-token-radius-16);
  --na-radius-18: var(--na-token-radius-18);
  --na-radius-26: var(--na-token-radius-26);
  --na-radius-pill: var(--na-token-radius-pill);

  --na-shadow-0: var(--na-token-shadow-0);
  --na-shadow-1: var(--na-token-shadow-1);
  --na-shadow-2: var(--na-token-shadow-2);
  --na-shadow-3: var(--na-token-shadow-3);
  --na-shadow-4: var(--na-token-shadow-4);
  --na-shadow-5: var(--na-token-shadow-5);
  --na-shadow-6: var(--na-token-shadow-6);
  --na-shadow-7: var(--na-token-shadow-7);

  --na-shadow-glass: var(--na-token-shadow-glass);
  --na-shadow-glow: var(--na-token-shadow-glow);



  /* =====================================================================
     D) UI TOKENS (компонентные дефолты, но управляются отсюда)
     ===================================================================== */
  --na-token-ui-btn-bg: var(--na-zone-control-bg);
  --na-token-ui-btn-bg-hover: var(--na-zone-control-bg-hover);
  --na-token-ui-btn-primary-bg: var(--na-zone-control-primary-bg);
  --na-token-ui-btn-primary-border: var(--na-zone-control-primary-border);

  --na-token-ui-icon-bg: var(--na-zone-surface-ghost);
  --na-token-ui-ring: var(--na-zone-control-ring-strong);

  --na-token-ui-card-bg: linear-gradient(180deg, var(--na-zone-surface-card-top), var(--na-zone-surface-card-bottom));
  --na-token-ui-card-shadow: 5px 4px rgba(0,0,0,.10);



  /* Sticky booking (правая нижняя фиксированная кнопка) */
  --na-ui-scale-sticky-booking: 1.20;

  --na-ui-sticky-booking-right: calc(16px * var(--na-ui-scale-sticky-booking));
  --na-ui-sticky-booking-bottom: calc(16px * var(--na-ui-scale-sticky-booking));

  --na-ui-sticky-booking-right-mobile: calc(12px * var(--na-ui-scale-sticky-booking));
  --na-ui-sticky-booking-bottom-mobile: calc(12px * var(--na-ui-scale-sticky-booking));

  --na-ui-sticky-booking-gap: calc(10px * var(--na-ui-scale-sticky-booking));
  --na-ui-sticky-booking-pad-y: calc(12px * var(--na-ui-scale-sticky-booking));
  --na-ui-sticky-booking-pad-x: calc(14px * var(--na-ui-scale-sticky-booking));

  --na-ui-sticky-booking-dot-size: calc(8px * var(--na-ui-scale-sticky-booking));
  --na-ui-sticky-booking-font: calc(16px * var(--na-ui-scale-sticky-booking));

  /* ---------------------------------------------------------------------
    UI SCALE (вариант B): единый множитель для размеров кнопок/CTA.
    1 = как сейчас, 1.1 = +10%, 0.9 = -10%.
    Можно переопределять по семействам (btn/submit/booking/filters).
    --------------------------------------------------------------------- */
  --na-ui-scale: 1.25;

  --na-ui-scale-btn: var(--na-ui-scale);
  --na-ui-scale-submit: var(--na-ui-scale);
  --na-ui-scale-booking: 1;
  --na-ui-scale-filters: var(--na-ui-scale);

  /* Theme .btn */
  --na-ui-btn-font: calc(14px * var(--na-ui-scale-btn));
  --na-ui-btn-pad-y: calc(12px * var(--na-ui-scale-btn));
  --na-ui-btn-pad-x: calc(16px * var(--na-ui-scale-btn));

  /* Form submit buttons (seminar single + tattoo booking) */
  --na-ui-submit-font: calc(14px * var(--na-ui-scale-submit));
  --na-ui-submit-h: calc(44px * var(--na-ui-scale-submit));
  --na-ui-submit-min-w: calc(148px * var(--na-ui-scale-submit));
  --na-ui-submit-pad-x: calc(22px * var(--na-ui-scale-submit));

  /* Главная страница: единый зазор между выбранными секциями, равный обычному section gap темы */
  --na-ui-home-section-gap: clamp(46px, 7vw, 110px);

  /* Sticky BOOKING CTA (booking-pin.css) */
  --na-ui-booking-section-gap: calc(clamp(58px, 8.4vh, 106px) * var(--na-ui-scale-booking));
  --na-ui-booking-orb: calc(44px * var(--na-ui-scale-booking));
  --na-ui-booking-pill-w: calc(clamp(196px, 22vw, 264px) * var(--na-ui-scale-booking));
  --na-ui-booking-pill-h: calc(52px * var(--na-ui-scale-booking));
  --na-ui-booking-inner-gap: calc(12px * var(--na-ui-scale-booking));
  --na-ui-booking-pad-x: calc(18px * var(--na-ui-scale-booking));
  --na-ui-booking-font: calc(20px * var(--na-ui-scale-booking));

  /* Seminars list filters: Apply/Reset */
  --na-ui-filters-font: calc(13px * var(--na-ui-scale-filters));
  --na-ui-filters-pad-y: calc(10px * var(--na-ui-scale-filters));
  --na-ui-filters-pad-x: calc(18px * var(--na-ui-scale-filters));

  /* Vitrine helpers */
  --na-token-vt-placeholder-bg: linear-gradient(135deg, var(--na-col-white-06), var(--na-col-white-01));
  --na-token-vt-focus-shadow:
    0 0 0 var(--na-token-ring-w) var(--na-zone-control-ring-strong),
    0 14px 36px rgba(0, 0, 0, 0.38);

  /* Tattoo booking helpers */
  --na-token-tb-body-card-shadow-hover: 0 14px 40px rgba(0, 0, 0, 0.45);
  --na-token-tb-body-card-shadow-selected: 0 16px 46px rgba(0, 0, 0, 0.55);
  --na-token-tb-tooltip-shadow: 0 14px 32px rgba(0, 0, 0, 0.7);

  /* =====================================================================
     E) LEGACY BRIDGE (чтобы старый CSS жил дальше без копипасты)
     ===================================================================== */
  --bg-0: var(--na-zone-page-bg-0);
  --bg-1: var(--na-zone-page-bg-1);
  --bg-2: var(--na-zone-page-bg-2);
  --bg-3: var(--na-zone-page-bg-3);

  --text: var(--na-zone-text);
  --muted: var(--na-zone-text-muted);
  --faint: var(--na-zone-text-faint);

  --stroke: var(--na-zone-stroke);
  --stroke-2: var(--na-zone-stroke-2);

  --shadow: var(--na-token-shadow-6);
  --radius: var(--na-token-radius-18);
  --radius-lg: var(--na-token-radius-26);
}

/* =====================================================================
   MODULE DEFAULTS (дефолты модулей — тоже тут, чтобы не искать)
   ===================================================================== */

/* Vitrine tiles: card surface + overlays */
#nataanimal-vitrine-tiles{
  --na-vt-stroke-w: var(--na-token-stroke-w);

  --na-vt-card-bg: var(--na-zone-surface-card);
  --na-vt-border: var(--na-vt-stroke-w, 1px) solid rgba(255, 255, 255, 0.06);

  --na-vt-ui-border: var(--na-vt-stroke-w, 1px) solid rgba(255, 255, 255, 0.14);
  --na-vt-ui-border-soft: var(--na-vt-stroke-w, 1px) solid rgba(255, 255, 255, 0.12);
  --na-vt-ui-border-faint: var(--na-vt-stroke-w, 1px) solid rgba(255, 255, 255, 0.10);

  --na-vt-focus-shadow: var(--na-token-vt-focus-shadow);

  --na-vt-media-bg: var(--na-zone-surface-media);
  --na-vt-placeholder-bg: var(--na-token-vt-placeholder-bg);
  --na-vt-overlay-bg: var(--na-zone-surface-overlay);
  --na-vt-order-bg: var(--na-zone-surface-order);

  --na-vt-info-border-top: var(--na-vt-stroke-w, 1px) solid rgba(255, 255, 255, 0.06);
}

/* Seminars: visual tokens (цвет/фон/бордер/тень/радиусы) */
.nataanimal-seminars{
  --na-semi-stroke: var(--na-zone-stroke-2, rgba(255, 255, 255, 0.14));
  --na-semi-stroke-w: var(--na-token-stroke-w);

  --na-semi-stroke-soft: var(--na-zone-stroke, rgba(255, 255, 255, 0.10));
  --na-semi-bg: var(--na-zone-surface-panel, rgba(10, 10, 12, 0.45));
  --na-semi-bg-2: var(--na-zone-surface-panel-soft, rgba(10, 10, 12, 0.28));

  --na-semi-shadow: var(--na-token-shadow-2, 0 10px 30px rgba(0, 0, 0, 0.35));
  --na-semi-radius: var(--na-token-radius-26, 26px);
  --na-semi-radius-sm: var(--na-token-radius-12, 12px);

  --na-semi-text: var(--na-zone-text-strong, rgba(255, 255, 255, 0.92));
  --na-semi-muted: rgba(255, 255, 255, 0.70);
  --na-semi-muted-2: rgba(255, 255, 255, 0.55);

  --na-semi-pill-bg: var(--na-zone-surface-pill-bg, rgba(255, 255, 255, 0.08));
  --na-semi-pill-stroke: var(--na-zone-stroke-2, rgba(255, 255, 255, 0.14));

  --na-semi-good: var(--na-zone-state-good-bg);
  --na-semi-bad: var(--na-zone-state-bad-bg);
  --na-semi-warn: var(--na-zone-state-warn-bg);
  --na-semi-info: var(--na-zone-state-info-bg);

  color: var(--na-semi-text);
}

/* Tattoo booking: body card surface */
#nataanimal-tattoo-booking{
  --na-tb-stroke-w: var(--na-token-stroke-w);

  --na-tb-body-card-border: var(--na-tb-stroke-w, 1px) solid var(--na-token-stroke);
  --na-tb-body-card-border-hover: var(--na-tb-stroke-w, 1px) solid var(--na-token-stroke-2);
  --na-tb-body-card-border-checked: var(--na-tb-stroke-w, 1px) solid rgba(255, 255, 255, 0.35);

  --na-tb-body-card-bg: var(--na-zone-surface-card);
  --na-tb-body-card-bg-hover: var(--na-zone-surface-card-hover);

  --na-tb-body-card-shadow-checked: 0 0 0 var(--na-token-ring-w) rgba(255, 255, 255, 0.08);
  --na-tb-body-card-shadow-hover: var(--na-token-tb-body-card-shadow-hover);
  --na-tb-body-card-shadow-selected: var(--na-token-tb-body-card-shadow-selected);
  --na-tb-tooltip-shadow: var(--na-token-tb-tooltip-shadow);

  --na-tb-body-card-media-bg: var(--na-zone-surface-media-light);
  --na-tb-body-card-badge-border: var(--na-tb-stroke-w, 1px) solid var(--na-token-stroke);
  --na-tb-body-card-badge-bg: var(--na-col-surface-20);
}

/* Portfolio projects: card surface */
.nataanimal-pp{
  --na-pp-card-bg: var(--na-zone-surface-ghost, rgba(255, 255, 255, 0.03));
  --na-pp-card-radius: var(--na-token-radius-18, 18px);
}