/* ============================================================
   ARCHIX — Design Tokens
   Единственный файл для изменения цветов, шрифтов, отступов.
   Все остальные CSS-файлы используют только var(--...)
   ============================================================ */

/* ── Шрифты (Google Fonts CDN — 2 семейства) ───────────────── */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=Jost:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap');

:root {

  /* ── 4 базовых цвета ────────────────────────────────────────
     Меняйте только здесь — оттенки и семантика обновятся везде
     ──────────────────────────────────────────────────────────── */
  --base-cold:  #F9F9F9;
  --base-ink:   #1C1C1C;
  --base-stone: #333333;
  --base-red:   #c00b0b;

  /* ── Шкала Cold (фоны, поверхности) ────────────────────────────
     Меняйте только --cold-h и --cold-s — шкала обновится вся.
     Нейтральный: h=0 s=0%. Голубой: h=220 s=15%.
     ──────────────────────────────────────────────────────────── */
  --cold-h: 0;
  --cold-s: 0%;

  --cold-100: hsl(var(--cold-h), var(--cold-s), 100%);  /* #FFFFFF */
  --cold-200: hsl(var(--cold-h), var(--cold-s),  98%);  /* #FAFAFA */
  --cold-300: hsl(var(--cold-h), var(--cold-s),  94%);  /* #F0F0F0 */
  --cold-400: hsl(var(--cold-h), var(--cold-s),  88%);  /* #E0E0E0 */
  --cold-500: hsl(var(--cold-h), var(--cold-s),  80%);  /* #CCCCCC */

  /* ── Шкала Ink (текст, тёмные элементы) ────────────────────── */
  --ink-100: #525252;
  --ink-200: #3D3D3D;
  --ink-300: #2B2B2B;
  --ink-400: #1C1C1C;
  --ink-500: #0D0D0D;

  /* ── Шкала Stone (границы, разделители, вторичные поверхности) */
  --stone-100: #EDE9E2;
  --stone-200: #D8D4CE;
  --stone-300: #C4C0BA;
  --stone-400: #B8B4AE;
  --stone-500: #9A9A9A;

  /* ── Шкала Red (акцент — CTA, маркеры, ≤10% UI) ────────────── */
  --red-100: #F5E4E4;
  --red-200: #E8A0A0;
  --red-300: #D62828;
  --red-400: #B91C1C;
  --red-500: #8B1111;

  /* ── Семантические токены цвета ─────────────────────────────── */

  /* Фоны */
  --color-bg:            var(--cold-200);   /* основной фон страницы */
  --color-bg-alt:        var(--cold-400);   /* альтернативные секции */
  --color-surface:       var(--cold-100);   /* карточки, панели */
  --color-surface-2:     var(--cold-300);   /* вложенные поверхности */
  --color-surface-3:     var(--cold-500);   /* фон сетки, разметка */

  /* Текст */
  --color-text-primary:  var(--ink-400);    /* заголовки, основной текст */
  --color-text-secondary:var(--ink-100);    /* вспомогательный текст */
  --color-text-muted:    var(--stone-400);  /* подписи, метаданные */
  --color-text-inverse:  var(--cold-200);   /* текст на тёмных поверхностях */

  /* Границы */
  --color-border:        var(--stone-200);  /* тонкие линии — 1px */
  --color-border-dark:   var(--stone-400);  /* акцентированные границы */
  --color-border-focus:  var(--ink-400);    /* outline при фокусе */

  /* Акцент */
  --color-accent:        var(--red-300);
  --color-accent-hover:  var(--red-400);
  --color-accent-subtle: var(--red-100);    /* фон чипов, меток */

  /* Семантика */
  --color-error:         var(--red-300);
  --color-error-bg:      var(--red-100);
  --color-success:       #2C6E49;
  --color-success-bg:    #E6F2EB;

  /* ── Шрифты — 2 семейства ───────────────────────────────────── */
  --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body:    'Jost', 'DM Sans', sans-serif;
  /* Метаданные и теги — Jost с uppercase + трекингом вместо Space Mono */

  /* ── Брейкпоинты (только справка — в @media использовать px напрямую)
     --bp-sm: 640px   мобильный
     --bp-md: 768px   планшет
     --bp-lg: 1024px  десктоп
     ──────────────────────────────────────────────────────────────── */

  /* ── Типографическая шкала — Display (Barlow Condensed, fluid) ── */
  /* clamp(min, fluid, max) — плавно масштабируется без брейкпоинтов */
  --text-display-2xl: 900 clamp(52px, 8vw,  96px)/0.95 var(--font-display);
  --text-display-xl:  800 clamp(40px, 6vw,  72px)/1.00 var(--font-display);
  --text-display-lg:  700 clamp(32px, 5vw,  56px)/1.05 var(--font-display);
  --text-display-md:  700 clamp(26px, 4vw,  40px)/1.10 var(--font-display);
  --text-display-sm:  600 clamp(20px, 3vw,  28px)/1.15 var(--font-display);

  /* ── Межстрочные интервалы — 6 уровней ─────────────────────────
     Меняйте только здесь — все компоненты и шаблоны обновятся.
     ──────────────────────────────────────────────────────────── */
  --lh-tight:  1.00;   /* числа, лого, кнопки, теги */
  --lh-snug:   1.20;   /* h4, подзаголовки */
  --lh-base:   1.35;   /* meta, вспомогательный текст */
  --lh-body:   1.50;   /* основной текст */
  --lh-lead:   1.55;   /* лиды, вводные абзацы */
  --lh-loose:  1.60;   /* длинное чтение */

  /* ── Размеры шрифта — Body ──────────────────────────────────────
     Меняйте только здесь.
     ──────────────────────────────────────────────────────────── */
  --fs-xs:    12px;   /* body-xs */
  --fs-sm:    14px;   /* body-sm, кнопки */
  --fs-base:  16px;   /* body-md */
  --fs-lg:    18px;   /* body-lg */
  --fs-xl:    20px;   /* body-xl, h4 */

  /* ── Размеры шрифта — UI-элементы ──────────────────────────── */
  --fs-ui-xs:  11px;   /* meta-sm */
  --fs-ui-sm:  13px;   /* btn-sm, form-label, meta-md, теги */
  --fs-ui-lg:  15px;   /* btn-lg */
  --fs-tag:    10px;   /* чипы/теги */

  /* ── Размеры шрифта — Display fixed (не fluid) ──────────────── */
  --fs-logo:    26px;   /* логотип */
  --fs-num-md:  22px;   /* имя автора, счётчики в карточках */
  --fs-num-lg:  28px;   /* крупные числа, аватар-инициалы */
  --fs-num-xl:  36px;   /* stat-value */

  /* ── Типографическая шкала — Display (Barlow Condensed, fluid) ── */
  /* clamp(min, fluid, max) — плавно масштабируется без брейкпоинтов */
  --text-display-2xl: 900 clamp(52px, 8vw,  96px)/0.95 var(--font-display);
  --text-display-xl:  800 clamp(40px, 6vw,  72px)/1.00 var(--font-display);
  --text-display-lg:  700 clamp(32px, 5vw,  56px)/1.05 var(--font-display);
  --text-display-md:  700 clamp(26px, 4vw,  40px)/1.10 var(--font-display);
  --text-display-sm:  600 clamp(20px, 3vw,  28px)/1.15 var(--font-display);

  /* ── Типографическая шкала — Body (Jost) ───────────────────── */
  --text-body-xl: 400 var(--fs-xl)/var(--lh-body)   var(--font-body);
  --text-body-lg: 400 var(--fs-lg)/var(--lh-body)   var(--font-body);
  --text-body-md: 400 var(--fs-base)/var(--lh-body) var(--font-body);
  --text-body-sm: 400 var(--fs-sm)/var(--lh-body)   var(--font-body);
  --text-body-xs: 400 var(--fs-xs)/var(--lh-base)   var(--font-body);

  /* ── Типографическая шкала — Meta (Jost) ───────────────────── */
  --text-meta-md: 500 var(--fs-ui-sm)/var(--lh-base) var(--font-body);
  --text-meta-sm: 500 var(--fs-ui-xs)/var(--lh-base) var(--font-body);

  /* ── Межбуквенные интервалы ─────────────────────────────────── */
  --tracking-tight:   -0.02em;
  --tracking-normal:   0em;
  --tracking-wide:     0.04em;
  --tracking-widest:   0.12em;

  /* ── Отступы — 4 уровня иерархии ───────────────────────────────
     Базовая единица: --space-unit. Менять только здесь.
     Уровень определяет зону вложенности, коэффициент — размер внутри зоны.
     ──────────────────────────────────────────────────────────────── */
  --space-unit: 8px;

  /* Micro (×0.5 / ×1 / ×1.5) — внутри элементов: padding кнопок, тегов, иконок */
  --micro-1:  4px;
  --micro-2:  8px;
  --micro-3: 12px;

  /* Component (×2 / ×3 / ×4) — между элементами внутри компонента */
  --comp-1: 16px;
  --comp-2: 24px;
  --comp-3: 32px;

  /* Block (×5 / ×6 / ×8) — между компонентами на странице */
  --block-1: 40px;
  --block-2: 48px;
  --block-3: 64px;

  /* Section (×10 / ×12 / ×16) — между секциями страницы */
  --section-1:  80px;
  --section-2:  96px;
  --section-3: 128px;

  /* Алиасы → для совместимости с layout.css и components.css */
  --space-1:  var(--micro-1);
  --space-2:  var(--micro-2);
  --space-3:  var(--micro-3);
  --space-4:  var(--comp-1);
  --space-5:  20px;
  --space-6:  var(--comp-2);
  --space-8:  var(--comp-3);
  --space-10: var(--block-1);
  --space-12: var(--block-2);
  --space-16: var(--block-3);
  --space-20: var(--section-1);
  --space-24: var(--section-2);
  --space-32: var(--section-3);

  /* ── Радиусы ─────────────────────────────────────────────────── */
  --radius-sm:   2px;   /* теги, микроэлементы */
  --radius-md:   4px;   /* инпуты, кнопки, мелкие карточки */
  --radius-lg:   8px;   /* карточки, модалки */
  --radius-xl:  16px;   /* крупные карточки */
  --radius-pill: 99px;  /* чипы, бейджи */

  /* ── Тени (предпочитаем границы, тени — редко) ──────────────── */
  --shadow-xs: 0 1px 2px rgba(28,28,28,0.06);
  --shadow-sm: 0 2px 8px rgba(28,28,28,0.08);
  --shadow-md: 0 4px 16px rgba(28,28,28,0.10);
  --shadow-lg: 0 8px 32px rgba(28,28,28,0.12);

  /* ── Переходы ───────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 300ms;

  /* ── Пропорции изображений ──────────────────────────────────── */
  --ratio-card:    16 / 9;   /* карточки в листингах */
  --ratio-article:  5 / 3;   /* обложки и иллюстрации статей */

  /* ── Сетка и layout ─────────────────────────────────────────── */
  --content-width:        1120px;
  --content-width-narrow:  720px;
  --nav-height:             64px;
}