/* ============================================================================
   Дизайн-система · Карьерный-2
   Вертикальный ритм на мягкой сетке 8pt
   (habr.com/ru/company/edison/blog/340670/, Elliot Dahl).

   Правила:
   1. Отступы — только кратные 8px. Шаг 4px (--space-half) — микро-UI.
   2. Web меряет line box, не базовую линию: у текстовых ролей
      line-height задан в px и кратен 8 → блоки текста сами ложатся в ритм.
   3. Крупные заголовки держат оптический unitless line-height (1.02–1.12).
   4. В компонентах нет сырых отступов и hex — только токены.

   Слои: 1 примитивы → 2 семантика → 3 компоненты (site.css)
   ========================================================================= */

:root {
  /* 1.1 Цвет */
  --rgb-bg: 246, 244, 240;
  --rgb-ink: 27, 26, 23;
  --rgb-accent: 138, 90, 34;

  --c-sand-050: #fffdf9;
  --c-sand-100: #f6f4f0;
  --c-sand-200: #f0ece2;
  --c-sand-300: #e7e0d1;
  --c-sand-400: #ddd7cc;
  --c-sand-500: #ece6da;
  --c-sand-600: #c9c2b4;
  --c-ink-900: #1b1a17;
  --c-ink-800: #33302a;
  --c-ink-700: #45413a;
  --c-ink-500: #6f685c;
  --c-ink-400: #7d766a;
  --c-ochre-700: #6b4417;
  --c-ochre-500: #8a5a22;
  --c-ochre-400: #c99a52;
  --c-ochre-200: #d3ab80;
  --c-moss-600: #4a7c59;
  --c-moss-400: #8fb99b;
  --c-clay-600: #9c4a3c;
  --c-paper: #ffffff;
  --c-hatch-a: #efe9dd;
  --c-hatch-b: #e7e0d1;
  --c-hatch-dark-a: #232119;
  --c-hatch-dark-b: #1f1d16;
  --c-ink-on-dark: #f2eee6;
  --c-ink-on-dark-muted: #cdc7ba;
  --c-ink-on-dark-faint: #9a9384;

  /* 1.2 Шкала отступов — --space-N = N × 8px */
  --space-half: 4px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-7: 56px;
  --space-8: 64px;
  --space-10: 80px;
  --space-12: 96px;
  --space-16: 128px;

  /* 1.3 Гарнитуры */
  --font-display: Oswald, "Arial Narrow", sans-serif;
  --font-text: "Golos Text", "Helvetica Neue", Helvetica, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* 1.4 Текстовые роли: размер + line box, кратный 8 */
  --text-label: 12px;  --text-label-lh: 16px;
  --text-xs:    13px;  --text-xs-lh:    24px;
  --text-sm:    14px;  --text-sm-lh:    24px;
  --text-base:  16px;  --text-base-lh:  24px;
  --text-lg:    18px;  --text-lg-lh:    32px;
  --text-value: 20px;  --text-value-lh: 24px;
  --text-xl:    24px;  --text-xl-lh:    32px;

  /* 1.5 Дисплей: оптический unitless line-height */
  --display-hero: clamp(32px, 4.2vw, 64px); --display-hero-lh: 1.04;
  --display-1:    clamp(24px, 2.8vw, 40px); --display-1-lh:    1.08;
  --display-2:    24px;                     --display-2-lh:    1.08;
  --display-num:  clamp(24px, 2.4vw, 40px); --display-num-lh:  1;
  --display-stat: 24px;                     --display-stat-lh: 1;
  --display-error: clamp(48px, 8vw, 96px);  --display-error-lh: 1;

  /* 1.6 Межбуквенное */
  --track-tight: -0.01em;
  --track-brand: 0.06em;
  --track-label: 0.1em;
  --track-eyebrow: 0.14em;

  /* 1.7 Форма, линия, движение */
  --radius: 2px;
  --line: 1px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.2s;
  --dur: 0.5s;
}

/* --- 2. СЕМАНТИКА ------------------------------------------------------- */
:root {
  --bg: var(--c-sand-100);
  --bg-paper: var(--c-sand-050);
  --bg-muted: var(--c-sand-200);
  --ink: var(--c-ink-900);
  --ink-muted: var(--c-ink-700);
  --ink-faint: var(--c-ink-500);
  --ink-dim: var(--c-ink-400);
  --accent: var(--c-ochre-500);
  --accent-hover: var(--c-ochre-700);
  --accent-on-dark: var(--c-ochre-400);
  --ok: var(--c-moss-600);
  --ok-on-dark: var(--c-moss-400);
  --warn-on-dark: var(--c-ochre-200);
  --err: var(--c-clay-600);
  --border: var(--c-sand-400);
  --border-weak: var(--c-sand-500);
  --border-strong: var(--c-sand-600);
  --surface: var(--c-sand-050);
  --surface-dark: var(--c-ink-900);
  --on-dark: var(--c-ink-on-dark);
  --on-dark-muted: var(--c-ink-on-dark-muted);
  --on-dark-faint: var(--c-ink-on-dark-faint);
  --header-bg: rgba(var(--rgb-bg), 0.94);
  --map-badge-bg: rgba(var(--rgb-bg), 0.95);

  --gutter: var(--space-4);
  --gutter-sm: var(--space-2);
  --page-max: 1480px;
  --section-y: var(--space-10);
  --section-gap: var(--space-6);
  --header-h: var(--space-8);
  --measure: 54ch;
  --measure-doc: 65ch;
  --col-min: 320px;

  --focus: var(--accent);
}