/* =============================================================================
 * tokens.css — дизайн-токены проекта «Элистрой»
 * Основа: docs/design/design-framework.html (раздел 04), docs/design/brand-kit.md,
 *         docs/design/brand-1001svarka.md
 *
 * СЛОЙ 1 (общий)     :root{...}              — один раз, оба сайта
 * СЛОЙ 2 (брендовый) [data-brand="..."]{...} — переключается атрибутом
 *
 * Правило: компоненты (components.css) используют ТОЛЬКО переменные и не знают,
 * на каком сайте они стоят. Если компонент ломается при смене бренда — в него
 * просочился цвет вместо токена.
 *
 * Шрифты: Ethnocentric и Century Gothic — коммерческие, webfont-лицензии нет.
 * Используются метрически близкие локальные замены; см. FONTS.md рядом.
 * ========================================================================== */

/* -----------------------------------------------------------------------------
 * СЛОЙ 1 — ОБЩИЙ. Отступы (шаг 8 px), контейнер, типографическая шкала,
 * толщина линий. Одинаково для elistroy.pro и 1001svarka.ru.
 * -------------------------------------------------------------------------- */
:root{
  /* Шкала отступов — шаг 8 px */
  --space-unit: 8px;
  --space-0:  0;
  --space-1:  8px;
  --space-2:  16px;
  --space-3:  24px;
  --space-4:  32px;
  --space-5:  40px;
  --space-6:  48px;
  --space-7:  64px;
  --space-8:  80px;

  /* Контейнер и сетка */
  --container:        1200px;
  --container-narrow: 720px;   /* ширина текстовой колонки (50–75 знаков) */
  --gutter:           24px;
  --grid-columns:     12;

  /* Толщина линий и радиусы */
  --rule-width: 1px;
  --radius:     2px;    /* базовый радиус системы */
  --radius-pill:999px;

  /* Типографическая шкала (без учёта бренда) */
  --fs-1: 12px;   /* подписи, ярлыки, капс */
  --fs-2: 14px;   /* мелкий текст, UI */
  --fs-3: 16px;   /* основной текст */
  --fs-4: 20px;   /* лид */
  --fs-5: 28px;   /* H2 */
  --fs-6: 40px;   /* H1 / дисплей */

  /* Интерлиньяж */
  --lh-display: 1.05;
  --lh-heading: 1.2;
  --lh-ui:      1.45;
  --lh-body:    1.6;

  /* Разрядка */
  --ls-caps:    0.16em;  /* прописные ярлыки/рубрики — обязательно */
  --ls-display: -0.01em; /* крупный дисплей — слегка сжато */
  --ls-body:    0;

  /* Насыщенность: только две ступени, как в брендах */
  --fw-regular: 400;
  --fw-bold:    700;

  /* Движение */
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --ease:       cubic-bezier(.2,.6,.2,1);

  /* Слои */
  --z-base:  0;
  --z-sticky:10;
  --z-overlay:100;

  /* Подложка под фото товаров: нейтральный светлый фон, одинаковый для PNG и JPEG */
  --plate:     #f5f5f5;

  /* Гарнитуры (замены — см. FONTS.md) */
  --font-display-elistroy: "Antonio", "Bahnschrift SemiCondensed", "Arial Narrow", Arial, sans-serif;
  --font-body-elistroy:    Arimo, Arial, "Helvetica Neue", Helvetica, sans-serif;
  --font-display-1001:     "Ethnocentric", "Michroma", "Bahnschrift", Arial, sans-serif;
  --font-body-1001:        "Century Gothic", Questrial, "Trebuchet MS", Arial, sans-serif;
  --font-mono:             Consolas, "Cascadia Mono", "SFMono-Regular", monospace;
}

/* -----------------------------------------------------------------------------
 * СЛОЙ 2 — БРЕНДОВЫЙ, «Элистрой» (B2B, elistroy.pro).
 * Значения из буклета: тёмная база #202020, светлый текст #f0f0f0,
 * оранжевый акцент #ec7c23. Акцент — единственный; значение единое
 * с брендом «1001 Сварка» по решению ADR-007 (было #f0a000).
 * -------------------------------------------------------------------------- */
[data-brand="elistroy"]{
  --bg:        #202020;   /* фон страницы */
  --bg-2:      #303030;   /* подложки блоков */
  --surface:   #2a2a2a;   /* поверхность карточек */
  --ink:       #f0f0f0;   /* основной текст */
  --ink-2:     #c9c9c9;   /* второстепенный текст */
  --ink-3:     #9a9a9a;   /* подписи, метаданные */
  --accent:    #ec7c23;   /* единый акцент, ADR-007 */
  --accent-ink:#202020;   /* текст/иконка на акценте */
  --line:      #3a3a3a;   /* hairline-разделители */
  --line-strong:#4a4a4a;

  /* Семантические состояния — НЕ из брендбука, добавлены системой
     (нужны для ошибок/успеха). Подобраны под тёмный фон. */
  --danger:  #ff6b5a;
  --success: #5fbf7a;
  --warning: #f0c060;

  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
  --overlay:    rgba(0,0,0,.6);

  --font-display: var(--font-display-elistroy);
  --font-body:    var(--font-body-elistroy);
}

/* -----------------------------------------------------------------------------
 * СЛОЙ 2 — БРЕНДОВЫЙ, «1001 Сварка» (B2C, 1001svarka.ru).
 * Официальный брендбук 2023: белый #ffffff, чёрный #000000, оранжевый #ec7c23.
 * Значения зафиксированы брендбуком — не заменяются.
 * -------------------------------------------------------------------------- */
[data-brand="1001"]{
  --bg:        #ffffff;
  --bg-2:      #f4f4f2;
  --surface:   #ffffff;
  --ink:       #000000;
  --ink-2:     #3d3d3d;
  --ink-3:     #6f7479;
  --accent:    #ec7c23;
  --accent-ink:#ffffff;
  --line:      #dededa;
  --line-strong:#c9c9c4;

  --danger:  #c0362c;
  --success: #2f7d4f;
  --warning: #b7791f;

  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
  --overlay:    rgba(0,0,0,.45);

  --font-display: var(--font-display-1001);
  --font-body:    var(--font-body-1001);
}

/* Фолбэк, если атрибут не выставлен (до интеграции с темой). */
:root:not([data-brand]){ --bg:#202020; --bg-2:#303030; --surface:#2a2a2a; --ink:#f0f0f0;
  --ink-2:#c9c9c9; --ink-3:#9a9a9a; --accent:#ec7c23; --accent-ink:#202020;
  --line:#3a3a3a; --line-strong:#4a4a4a; --danger:#ff6b5a; --success:#5fbf7a; --warning:#f0c060;
  --focus-ring:0 0 0 2px var(--bg),0 0 0 4px var(--accent); --overlay:rgba(0,0,0,.6);
  --font-display:var(--font-display-elistroy); --font-body:var(--font-body-elistroy); }