/*
 * tokens.css — ФИНАЛЬНЫЙ файл T-04 ([С] local/templates/specialty_v2/tokens.css; handoff-B со всеми новыми токенами N-1…N-13 и --container-max 1200;
 * спорные позиции утверждены владельцем 22.10.2026: --color-main-grey #FAFAFA, --bg-disabled и --field-text по Figma, --text-validation #FFC329 только для валидации).
 * Источник решений: docs/design/TOKENS-RECONCILIATION.md (Figma «Simbols design» + закрытая палитра владельца).
 * Правила: нет тёмной темы, нет золота/градиента/оранжа, радиусы — закрытый список, z-index — только слои ВНЕ <dialog>.
 * Allowlist палитры для lint-sp / validate-passport ГЕНЕРИРУЕТСЯ из этого файла (scripts/vue-exit/tokens-lib.mjs) — вручную не хранится.
 */
:root {
  /* ===== BRAND ===== */
  --color-main: #6667AB;
  --color-main-hover: #55569B;
  --color-main-focused: #58599D;
  --color-main-click: #4A4A8C;
  --color-main-dark: #4B4C8F;
  --color-main-grey: #FAFAFA;            /* УТВЕРЖДЕНО ВЛАДЕЛЬЦЕМ 22.10.2026: #FAFAFA (закрытая палитра); Figma Main/Grey = #F9F7F6 (тёплый off-white, убран 17.08) */
  --color-main-xlight-blue: #F4F4FF;
  --color-hover: #E8E8FF;                /* Figma Misc/Hover */
  --color-click: #E0E0FF;                /* Figma Misc/Click */
  --color-main-disabled-bg: #F2F3FB;
  --color-main-disabled-text: #B8B8E5;
  --color-cream: #FBF8EE;                /* разрешённый кремовый (решение владельца) */

  /* ===== SECONDARY ===== */
  --color-pink-light: #FF7E7E;           /* цена карточки */
  --color-pink: #FF374F;
  --color-green-light: #A9D97A;
  --color-green-dark: #97C06F;           /* Figma Secondary/Green (dark); #83C83E — это Text/Success */
  --color-secondary-dark-grey: #9C968F;
  --color-grey-normal: #7F7F84;          /* Figma Secondary_New/Grey_Normal */

  /* ===== TEXT ===== */
  --text-black: #212121;
  --text-white: #FFFFFF;
  --text-dark-grey: #777880;             /* Figma; прежний CD #807777 = Head_menu/Fields Description, см. --field-description */
  --text-dark-grey-2: #575555;
  --text-light-grey: #D6D2D2;
  --text-gray: #B8B3B3;
  --text-xlight-gray: #E8E7ED;
  --text-error: #FF122E;
  --text-success: #83C83E;
  --text-validation: #FFC329;            /* УТВЕРЖДЕНО ВЛАДЕЛЬЦЕМ 22.10.2026: оставить ТОЛЬКО для состояния валидации (Figma Text/Validation); применять вне полей запрещено (lint-sp: правило css-validation-color) */

  /* ===== STROKE / BG ===== */
  --stroke-focused: #212121;
  --stroke-grey-light: #EFEEEE;
  --stroke-grey-dark: #D6D2D2;
  --stroke-grey-normal: #ECECEC;
  --bg-white: #FFFFFF;
  --bg-disabled: #EDEAE7;                /* УТВЕРЖДЕНО ВЛАДЕЛЬЦЕМ 22.10.2026: значение Figma #EDEAE7 (тёплый оттенок, только состояние disabled); альтернатива — нейтральный #F6F6F9 */
  --bg-light-grey: #F6F6F9;
  --bg-badge: rgba(255, 255, 255, .8);   /* фон бейджей карточки товара: белый 80 %; утверждено владельцем 23.10 (N-7) */
  --bg-subcategory-hover: #EDEAE7;       /* Subcategory_Card/Secondary BG_Hover/Click */

  /* ===== FIELDS (Symbols Design) ===== */
  --field-title: #B8B3B3;
  --field-text: var(--text-dark-grey);   /* УТВЕРЖДЕНО ВЛАДЕЛЬЦЕМ 22.10.2026: по Figma Fields/Text (#777780 в Figma ≈ #777880 Text/Dark Grey, разница в 1 единицу канала — шум; сведено в один hex); введённый текст — --text-black */
  --field-description: #807777;
  --field-stroke-hover: #6667AB;         /* подтверждено T-06 (22.10): Figma Fields Type=Input State=Hover, обводка Main/Blue #6667AB */
  --field-stroke-focused: #212121;
  --field-stroke-validation: #FFE5A2;
  --field-stroke-error: #FFBAC3;
  --field-stroke-success: #EFEEEE;

  /* ===== TYPOGRAPHY (Montserrat) ===== */
  --font-base: 'Montserrat', 'Montserrat Fallback', system-ui, Arial, sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --heading-transform: uppercase;
  /* по умолчанию — Mobile (Figma Typography/Mobile); Tablet и Desktop — в @media ниже */
  --font-h1: 600 24px/1.1 var(--font-base);
  --font-h2: 600 16px/1.2 var(--font-base);
  --font-h3: 600 14px/1.2 var(--font-base);
  --font-h4: 600 12px/1.2 var(--font-base);
  --font-h5: 600 10px/1.2 var(--font-base);
  --font-h6: 600 12px/1.2 var(--font-base);
  --font-sh-m: 500 24px/1.1 var(--font-base);   /* Mobile/Tablet — Medium; Desktop — Regular 400 (Figma) */
  --font-sh-r: 400 24px/1.2 var(--font-base);
  --font-body-1: 400 16px/1.3 var(--font-base);
  --font-body-2: 400 14px/1.3 var(--font-base);
  --font-body-3: 400 12px/1.3 var(--font-base);
  --font-body-4: 400 13px/1.2 var(--font-base);
  --font-caption: 400 12px/1.4 var(--font-base);
  --font-small: 400 12px/14px var(--font-base);
  --font-small-sb: 600 12px/12px var(--font-base);
  --font-xsmall-m: 500 10px/14px var(--font-base);   /* Mobile/Tablet — 10px; Desktop — 12px (Figma Extra Small_Med) */
  /* Button Link (все UPPER) */
  --font-btn-lg: 600 18px/24px var(--font-base);
  --font-btn-md-lg: 600 16px/22px var(--font-base);   /* Normal */
  --font-btn-md: 600 14px/20px var(--font-base);      /* Medium */
  --font-btn-sm: 600 12px/16px var(--font-base);
  --font-btn-xs: 600 10px/14px var(--font-base);
  --font-btn-arrow: 500 12px/16px var(--font-base);   /* Big Arrow */
  /* Точечные стили мелкого кегля как в Figma (утверждено владельцем 23.10, N-12); стили в макете не назначены */
  --font-tab-md: 500 10px/10px var(--font-base);      /* подписи tab 640 */
  --font-tab-sm: 500 8px/10px var(--font-base);       /* подписи tab 321 */
  --font-quick-lg: 500 12px/16.8px var(--font-base);  /* лента быстрых ссылок, десктоп */
  --font-quick-sm: 500 10px/12px var(--font-base);    /* лента быстрых ссылок, планшет/мобайл */
  /* Tag, Fields, цена */
  --font-tag: 600 14px/1.4 var(--font-base);
  --font-field-title: 400 12px/16px var(--font-base);
  --font-field-placeholder: 400 16px/24px var(--font-base);
  --font-field-description: 400 12px/16px var(--font-base);
  --font-price-old: 400 14px/1.4 var(--font-base);    /* зачёркнутая; Cena_staraya_small в Figma набрана Gotham Pro 12/100% — шрифт не из дизайн-системы, здесь Montserrat 12px/1 в --font-price-old-sm */
  --font-price-old-sm: 400 12px/1 var(--font-base);

  /* ===== RADII (факт Figma, DESIGN-TOKENS §4a) — ЗАКРЫТЫЙ СПИСОК ===== */
  --radius-0: 0;                         /* теги/бейджи товара — квадратные */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 28px;
  --radius-full: 999px;

  /* ===== ELEVATION (Figma Effect styles) ===== */
  --elevation-1: 0 4px 4px 0 rgba(142, 141, 208, .16);
  --elevation-2: 0 4px 8px 0 rgba(142, 141, 208, .16);
  --elevation-3: 0 8px 16px 0 rgba(142, 141, 208, .12);
  --elevation-4: 0 16px 24px 0 rgba(142, 141, 208, .12);
  --elevation-menu: 0 8px 25px 0 rgba(65, 52, 101, .15);   /* Figma Category_card/Hover_small, мега-меню; утверждено владельцем 23.10 (N-5) */

  /* ===== SPACING (база 8) ===== */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px;
  --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-14: 56px; --space-16: 64px;
  --space-20: 80px; --space-24: 96px; --space-30: 120px; --space-32: 128px;

  /* ===== BREAKPOINTS (для документации/JS; в @media числа подставляются буквально) ===== */
  --bp-mobile: 320px; --bp-tablet: 640px; --bp-desktop: 1280px; --bp-wide: 1920px;

  /* ===== GRID (Figma Layout guides; мобайл по умолчанию) ===== */
  --grid-base: 8px;
  --grid-columns: 6;
  --grid-gutter: 16px;
  --grid-margin: 24px;
  --container-max: 1200px;               /* решение координатора по правилу приоритета Figma > CD (контейнер 1200 по макету 1920 и шапке), сообщено владельцу 23.10; было 1280 */

  /* ===== Z-INDEX — только для слоёв ВНЕ <dialog> (диалог — top layer; --z-modal/--z-toast не существуют, В-6) ===== */
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-header: 300;
  --z-bottom-nav: 1020;
  --z-overlay: 1030;

  /* ===== MOTION (служебный токен, решение без владельца; 23.10.2026) ===== */
  --motion-fast: 160ms;                  /* длительность переходов hover/focus/active блоков; при prefers-reduced-motion - 0.01ms (ниже) */
}

/* пользователь просит меньше движения: переходы блоков выключаются через токен */
@media (prefers-reduced-motion: reduce) {
  :root { --motion-fast: 0.01ms; }
}

/* Планшет 640–1279 */
@media (min-width: 640px) {
  :root {
    --font-h1: 600 28px/1.2 var(--font-base);
    --font-h2: 600 20px/1.2 var(--font-base);
    --font-h3: 600 14px/1.3 var(--font-base);
    --font-h4: 600 12px/1.2 var(--font-base);
    --font-h5: 600 10px/1.2 var(--font-base);
    --font-sh-m: 500 24px/1.1 var(--font-base);
    --font-sh-r: 400 24px/1.2 var(--font-base);
    --font-body-1: 400 16px/1.3 var(--font-base);
    --font-body-2: 400 14px/1.3 var(--font-base);
    --font-body-3: 400 12px/1.3 var(--font-base);
    --grid-gutter: 24px;
    --grid-margin: 32px;
  }
}

/* Десктоп 1280+ возвращает значения Desktop; сетка 12 колонок по центру */
@media (min-width: 1280px) {
  :root {
    --font-h1: 600 40px/1.1 var(--font-base);
    --font-h2: 600 30px/1.1 var(--font-base);
    --font-h3: 600 22px/1.4 var(--font-base);
    --font-h4: 600 16px/1.4 var(--font-base);
    --font-h5: 600 14px/1.2 var(--font-base);
    --font-sh-m: 400 36px/1.1 var(--font-base);
    --font-xsmall-m: 500 12px/14px var(--font-base);
    --font-sh-r: 400 30px/1.1 var(--font-base);
    --font-body-1: 400 18px/1.4 var(--font-base);
    --font-body-2: 400 16px/1.4 var(--font-base);
    --font-body-3: 400 14px/1.4 var(--font-base);
    --grid-columns: 12;
    --grid-margin: 0px;
  }
}

/* 4k */
@media (min-width: 1920px) {
  :root { --grid-gutter: 30px; }
}