/* НефтеХимСырье — дизайн-токены. Источник: site/SPACING.md §11 (отступы, радиусы, контролы, состояния), §13 (типографика) и site/DESIGN.md (цвет, шрифты).
   Меняет только владелец дизайн-системы. Отступы, радиусы и высоты в css/*.css — только через эти токены, без голых px. */
:root {
  /* холст и поверхности */
  --bg: #0B0D10;
  --bg-2: #101317;
  --surface: #15191E;
  --surface-2: #1C2128;
  --line: #262C33;
  --line-2: #363D46;

  /* текст */
  --ink: #F1EEE8;
  --ink-2: #C9C4BB;
  --muted: #8E949B;

  /* акцент — только действия (заливка CTA, выбранное, фокус) и углерод в 3D */
  --amber: #D99A2B;
  --amber-hi: #F0B54A;
  --amber-deep: #8A5A12;
  /* свечение — ТОЛЬКО шейдер-фон hero главной и подвала (SPACING.md §9). В :hover/:focus и состояниях не использовать */
  --glow: rgba(217, 154, 43, .35);
  --glow-soft: rgba(217, 154, 43, .14);

  /* атомы — только логотип, лоадер, 3D товара */
  --carbon: var(--amber);
  --hydrogen: #E8E4DC;
  --sulfur: #F2D04B;
  --oxygen: #E5533D;

  /* состояния */
  --ok: #5BBF7A;
  --err: #E5533D;

  /* цвет продукта по шкале ЦНТ — только в контексте товара */
  --cnt-0_5: #F4E9BC;
  --cnt-1: #EFDA93;
  --cnt-1_5: #E8C76C;
  --cnt-2: #DFB04B;
  --cnt-2_5: #D69A34;
  --cnt-3: #C98325;
  --cnt-3_5: #B9701E;
  --cnt-4: #A65F19;
  --cnt-5: #874A14;
  --cnt-6: #693710;
  --cnt-7: #4E270C;
  --cnt-8: #371A08;

  /* шрифты: IBM Plex (SIL OFL 1.1, fonts/fonts.css), DESIGN.md «Шрифты», SPACING.md §13.1 */
  --font-sans: "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  --font-display: var(--font-sans);   /* псевдоним: засечек нет с 09.10 */
  --font-mono: "IBM Plex Mono", "Consolas", monospace;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600;   /* 300 и 700 не использовать; у mono только 400 и 500 */

  /* кегли и межстрочные: телефон; ступени 640 и 1024 ниже. Без clamp(vw) (SPACING.md §13.2–13.3).
     Допустимые кегли: 12 · 14 · 16 · 18 · 20 · 24 · 28 · 32 · 40 · 48 · 56 · 64 · 88 */
  --fs-display: 2.5rem;  --lh-display: 44px;   /* 40/44 → 64/68 → 88/92, только hero главной */
  --fs-h1: 2rem;         --lh-h1: 36px;        /* 32/36 → 48/52 → 56/60 */
  --fs-h2: 1.75rem;      --lh-h2: 32px;        /* 28/32 → 32/36 → 40/44 */
  --fs-h3: 1.25rem;      --lh-h3: 24px;        /* 20/24 → 24/28 */
  --fs-h4: 1.125rem;     --lh-h4: 24px;        /* 18/24 → 20/24 */
  --fs-lead: 1.125rem;   --lh-lead: 28px;      /* 18/28 → 20/28 (≥1024) */
  --fs-body: 1rem;       --lh-body: 1.5;       /* 16/24 */
  --fs-small: .875rem;   --lh-small: 20px;     /* 14/20 */
  --fs-caption: .75rem;  --lh-caption: 16px;   /* 12/16 */
  --fs-label: .75rem;                          /* 12/16, mono-капс; 11 убран */

  /* трекинг (SPACING.md §13.4): строчные — 0; плотнее −0.02em нельзя */
  --track-display: -.02em; --track-h1: -.02em; --track-h2: -.015em; --track-h3: -.01em;
  --track-label: .06em;    /* капс-метки; было .14em */

  /* ширина строки (§13.6) в знаках: 66 · 60 · 48. ch = ширина «0», у IBM Plex Sans он шире средней
     буквы кириллицы в ~1.15 раза (замер 09.10: 1.13–1.16), поэтому токены в ch = знаки / 1.15;
     лид с запасом на «I–III», цифры и латиницу (замер: 52ch давал до 63 знаков) */
  --measure: 57ch; --measure-lead: 50ch; --measure-card: 42ch;
  --measure-display: 22ch; --measure-h1: 24ch; --measure-h2: 28ch;

  /* вертикаль текста (§13.7): метка → заголовок < заголовок → лид < лид → содержимое (--section-head) */
  --gap-eyebrow: var(--s-3);       /* метка → H1/H2: 12 */
  --gap-eyebrow-card: var(--s-2);  /* метка → H3/H4 в карточке: 8 */
  --gap-title: var(--s-4);         /* заголовок → лид: 16 */
  --gap-title-display: var(--s-4); /* display → лид: 16 → 24 (≥1024) */
  --flow-p: var(--s-4);            /* абзац ↔ абзац, пункт ↔ пункт: 16 */
  --flow-h2: var(--s-7);           /* над H2 в .prose: 48 → 64 (≥1024) */
  --flow-h3: var(--s-6);           /* над H3 в .prose: 32 */

  /* УСТАРЕЛО (до конца перевода владельцами, plan.md §6): были безразмерные 1.04 и 1.1.
     Псевдонимы верны только при кегле своей роли: --lh-tight — H1, --lh-head — H2 */
  --lh-tight: var(--lh-h1); --lh-head: var(--lh-h2);

  /* отступы: шкала 4/8, не расширять */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px;
  --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  /* раскладка: значения для телефона; ступени на 640 и 1024 ниже. Без clamp(vw) */
  --container: 1280px;
  /* телефон боком с вырезом (viewport-fit=cover, 10.10): поля не меньше безопасной зоны — края контейнера, шапки и панелей
     не уходят под вырез и скругление экрана. Без выреза и в портрете env() = 0: ступени 16 / 24 / 32 не меняются */
  --safe-x: max(env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --gutter: max(var(--s-4), var(--safe-x));        /* поля страницы: 16 → 24 (≥640) → 32 (≥1024) */
  --section: var(--s-8);       /* padding-block секции: 64 → 96 (≥1024) */
  --section-head: var(--s-5);  /* заголовок секции → содержимое: 24 → 32 */
  --block-gap: var(--s-6);     /* блок ↔ блок внутри секции: 32 → 48 */
  --col-gap: var(--s-4);       /* колонки: 16 → 24 → 32 */
  --grid-gap: var(--s-4);      /* сетка карточек = padding карточки: 16 → 24 */
  --pad-card: var(--s-4);      /* padding карточки: 16 → 24 (≥640) */
  --pad-panel: var(--s-5);     /* форма, паспорт, CTA, мега-меню: 24 → 32 (≥1024) */
  --page-gap: var(--s-5);      /* низ шапки → крошки: 24 → 32 */

  /* контролы: высоты 32/40/48/56 и боковой отступ пилюли под высоту */
  --h-xs: 32px; --h-sm: 40px; --h-md: 48px; --h-lg: 56px;
  --px-xs: var(--s-3); --px-sm: var(--s-4); --px-md: var(--s-5); --px-lg: var(--s-5);
  --px-field: var(--s-4);
  --gap-icon: var(--s-2);      /* иконка ↔ подпись */
  --gap-row: var(--s-3);       /* кнопки и контролы в одном ряду */
  --gap-chips: var(--s-2);     /* чипы-фильтры в наборе */
  --gap-label: var(--s-2);     /* подпись ↔ поле */
  --gap-field: var(--s-5);     /* поле ↔ поле */
  --ico-sm: 16px; --ico-md: 20px;

  /* шапка-капсула */
  --hdr-top: var(--s-4);
  --header-h: 64px;            /* 72 (≥1024) */
  --hdr-pad-l: var(--hdr-pad-r); /* = полю справа (Орсен 10.10): знак стоит от краёв капсулы так же, как «Запросить цену» */
  --hdr-pad-r: var(--s-3);     /* = (--header-h − --h-sm) / 2: 12 → 16 */
  --hdr-logo: var(--h-sm);     /* видимая высота знака в капсуле = контролы 40: поля сверху, снизу и слева = (H − 40) / 2 */
  --dock-bottom: var(--s-4);   /* низ плавающей панели заявки .rq-dock; 8 при низком окне */
  --hdr-offset: calc(var(--hdr-top) + var(--header-h) + var(--s-2));   /* верх липких панелей: 88 → 96 */
  --page-top: calc(var(--hdr-top) + var(--header-h) + var(--page-gap)); /* крошки от верха окна: 104 → 120 */

  /* скругления: пилюля / 16 / 32 / 8 / круг — других нет */
  --r-pill: 999px;   /* всё однострочное: шапка, кнопки, пункты, вкладки, сегменты, поля, чипы, бейджи */
  --r-card: 16px;    /* карточки, панели, формы, таблицы, мега-меню, медиа, рамка 3D, textarea */
  --r-bar: 32px;     /* панель с рядом пилюль у края (.cat-bar__inner) */
  --r-inner: 8px;    /* вложенное в карточку, чекбокс, миниатюры, kbd */
  --r-round: 50%;    /* кнопки-иконки, точки, диски */
  /* УСТАРЕЛО, не использовать в новом коде: --r-tech и --r-sm оставлены как псевдонимы, чтобы старые правила не сломались.
     Однострочное → --r-pill, блоки → --r-card, чекбокс → --r-inner. */
  --r-tech: var(--r-inner);
  --r-sm: var(--r-inner);

  /* фокус и состояния (наведение — смена фона/рамки, без свечения) */
  --focus-ring: 2px solid var(--amber);
  --focus-offset: 2px;
  --hover-bg: color-mix(in srgb, var(--ink) 6%, transparent);
  --press-bg: color-mix(in srgb, var(--ink) 10%, transparent);

  /* движение */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: var(--ease-out);   /* УСТАРЕЛО: пружина убрана из интерфейса (SPACING.md §9), псевдоним --ease-out */
  --t-hover: 160ms;    /* наведение */
  --t-micro: 240ms;    /* раскрытие, стрелка */
  --t-reveal: 400ms;   /* появление блока */
  --t-scene: 1200ms;   /* только 3D-сцены */

  /* слои */
  --z-bg: 0; --z-content: 1; --z-header: 50; --z-menu: 60; --z-modal: 80; --z-loader: 100;
}
@media (min-width: 640px) {
  :root {
    --gutter: max(var(--s-5), var(--safe-x)); --col-gap: var(--s-5); --grid-gap: var(--s-5); --pad-card: var(--s-5);
    --fs-display: 4rem; --lh-display: 68px; --fs-h1: 3rem; --lh-h1: 52px; --fs-h2: 2rem; --lh-h2: 36px;
    --fs-h3: 1.5rem; --lh-h3: 28px; --fs-h4: 1.25rem;
  }
}
@media (min-width: 1024px) {
  :root {
    --gutter: max(var(--s-6), var(--safe-x)); --col-gap: var(--s-6);
    --section: var(--s-9); --section-head: var(--s-6); --block-gap: var(--s-7);
    --pad-panel: var(--s-6); --page-gap: var(--s-6);
    --header-h: 72px; --hdr-pad-r: var(--s-4);
    --fs-display: 5.5rem; --lh-display: 92px; --fs-h1: 3.5rem; --lh-h1: 60px; --fs-h2: 2.5rem; --lh-h2: 44px;
    --fs-lead: 1.25rem; --gap-title-display: var(--s-5); --flow-h2: var(--s-8);
  }
}
/* низкое окно (телефон в альбомной, ноутбук с узким окном): шапка закреплена, но плотнее — верх 8, капсула 56 (знак 40, поля 8).
   Стоит после ступени 1024, чтобы перекрыть её 72. --hdr-offset и --page-top пересчитываются сами: 72 / 88 (96 при ≥1024) */
@media (max-height: 500px) {
  :root { --hdr-top: var(--s-2); --header-h: 56px; --hdr-pad-r: var(--s-2); --dock-bottom: var(--s-2); }
}