/* ============================================================
   СПРИНТ · design tokens
   Источник палитры: knowledge/дизайн/СПРИНТ-дизайн-код.md
   Источник ритма:   knowledge/дизайн/ПРАВИЛА-ВОЗДУХА.md

   Редакция «воздух» (12.09.2026).
   ЦВЕТА НЕ МЕНЯЛИСЬ — ни один hex не тронут.
   Изменились: шкала отступов (воздух между блоками кратно больше,
   чем внутри блока), число ступеней шрифта (3 текстовых + 4 заголовочных),
   тени (в светлой теме их нет — только у всплывающих слоёв).
   ============================================================ */

:root {
  /* ---------- Бренд (одинаков в обеих темах) ---------- */
  --brand-gold: #CBA656;          /* акцент: ОДИН на экран — заголовок или главное действие */
  --brand-gold-deep: #99793C;     /* hover/нажатие золота */
  --brand-gold-soft: #E0D2B0;     /* золотой хайрлайн, рамки золотых блоков */
  --brand-gold-wash: #FBF9F2;     /* кремовая подложка под крупные числа */
  --brand-navy: #293E73;          /* ЗАЛИВКИ: плашки, карточки, secondary-кнопка */
  --brand-navy-ink: #14264E;      /* ТЕКСТ-антиква на светлом. Не путать с navy */
  --brand-navy-deep: #0F1B41;     /* глубокий фон панелей/рельс */

  /* ---------- Светлая тема (основная) ---------- */
  --bg: #F7F7F7;                  /* фон страницы */
  --bg-alt: #FFFFFF;              /* фон контентной области, модалок */
  --bg-sunken: #E5E5E5;           /* углубление: рельсы, полосы прогресса */
  --surface: #FFFFFF;             /* заливка ТОЛЬКО у явно выделенного блока */
  --surface-alt: #F7F7F7;         /* серая заливка блока (как у Романа) */
  --surface-cream: #FBF9F2;       /* блок с крупной цифрой */
  --surface-hover: #F0F0F2;       /* ховер строки, пункта меню */

  --text: #5A647D;                /* тело текста — сине-серый, НЕ чёрный */
  --text-strong: #14264E;         /* лейблы, заголовки блоков */
  --text-muted: #828282;          /* подписи, meta — применять редко */
  --text-display: #14264E;        /* вся антиква на светлом */
  --text-on-dark: #FFFFFF;
  --text-on-gold: #14264E;        /* текст поверх золота */
  --text-on-navy: #FFFFFF;

  --line: #D8D8D8;                /* хайрлайн 1px — единственный разделитель по умолчанию */
  --line-strong: #B9BFCC;         /* рамка поля ввода / кнопки-призрака */
  --line-gold: #E0D2B0;           /* золотой разделитель — только у акцентного блока */
  --line-dark: rgba(255,255,255,.25);

  --focus-ring: #CBA656;          /* обводка фокуса — золото, 2px */

  /* ---------- Статусы (третьих акцентных цветов нет) ---------- */
  --state-positive: #D8EAD2;      /* ТОЛЬКО бары метрик и фон «ок» */
  --state-positive-ink: #2F5D33;
  --state-warn: #F3E3C2;
  --state-warn-ink: #7A5B13;
  --state-danger: #E9D3D3;
  --state-danger-ink: #8B2F2F;

  /* ---------- Тёмная тема (шапка, вход, медиа) ---------- */
  --dark-bg: #0B090E;
  --dark-bg-alt: #0C0C0C;
  --dark-surface: #181818;        /* приподнятое пятно на чёрном */
  --dark-chip: #212121;           /* подсветка числа внутри строки */
  --dark-card: #FFFFFF;           /* белая карточка «ДО» */
  --dark-card-ink: #1A1A1A;       /* текст на белой карточке тёмного слайда */
  --dark-card-alt: #293E73;       /* синяя карточка «ПОСЛЕ» */
  --dark-card-vip: #272727;
  --dark-text: #FFFFFF;
  --dark-muted: #828282;
  --dark-line: rgba(255,255,255,.25);
  --dark-overlay: rgba(0,0,0,.72); /* плашка поверх фото */

  /* ============================================================
     Типографика. Один шрифт Inter, ступеней МАЛО и это намеренно.
     Текст:     13 · 15 · 17  (мелко / тело / важное)
     Заголовки: 20 · 26 · 34 · 46
     Старые имена сохранены — они схлопнуты на общие значения,
     чтобы страницы не переписывать.
     ============================================================ */
  /* Один шрифт на всю платформу — Inter. Антиквы и моношира больше нет. */
  --font-display: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Текст: 13 · 15 · 17. Ничего мельче 13. Старые имена схлопнуты. */
  --fs-2xs: 13px;
  --fs-xs: 13px;
  --fs-sm: 13px;                  /* лейблы, кнопки, вкладки, метки */
  --fs-base: 15px;                /* ТЕЛО интерфейса */
  --fs-md: 15px;
  --fs-lg: 17px;                  /* важный текст, лид под заголовком */

  /* Заголовки: 20 · 26 · 34 · 46. Иерархию держат размер и вес. */
  --fs-display-xs: 20px;
  --fs-display-sm: 26px;
  --fs-display-md: 34px;
  --fs-display-lg: 46px;
  --fs-display-xl: 46px;
  --fs-metric: 46px;

  --lh-display: 1.15;
  --lh-tight: 1.5;
  --lh-body: 1.5;

  --tracking-display: 0;          /* трекинг только у капса */
  --tracking-caps: 0.08em;
  --tracking-caps-wide: 0.08em;

  --fw-regular: 400;              /* текст */
  --fw-medium: 500;               /* подзаголовки, метки */
  --fw-bold: 600;                 /* заголовки и кнопки; 700 не используем */

  /* ============================================================
     Сетка и ритм. Главное правило:
       ВНУТРИ блока   — s-1…s-4 (4…16)
       МЕЖДУ блоками  — s-6…s-10 (32…96)
     Между этими группами намеренная пропасть: воздух вокруг блока
     всегда минимум вдвое больше, чем воздух внутри него.
     ============================================================ */
  --grid-step: 8px;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  /* --- граница: ниже начинается «между блоками» --- */
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 44px;
  --s-8: 56px;
  --s-9: 72px;
  --s-10: 96px;

  --gutter: 32px;                 /* зазор сетки блоков */
  --pad-card: 0px;                /* блок по умолчанию БЕЗ рамки и падинга */
  --pad-boxed: 24px;              /* падинг у блока с заливкой (.card--alt/--navy/--cream) */
  --pad-control: 9px 16px;        /* падинг поля/кнопки */
  --bullet-hang: 22px;            /* вынос точки буллета за текст */

  --layout-max: 1280px;
  --measure: 72ch;                /* предельная длина строки текста */
  --sidebar-w: 232px;
  --header-h: 56px;
  --control-h: 36px;
  --control-h-sm: 30px;

  /* ---------- Рамки, углы, тени ---------- */
  --bw: 1px;                      /* хайрлайн */
  --bw-thick: 2px;                /* пилюля, кольцо аватара, фокус */
  --bw-rail: 3px;                 /* цветная полоса слева у акцентного блока */

  --radius: 0px;                  /* светлая тема — строго острые углы */
  --radius-media: 20px;           /* ТОЛЬКО тёмные медиа-плитки и карточки кейсов */
  --radius-pill: 999px;           /* чипы ДО/ПОСЛЕ */

  /* Теней в потоке страницы НЕТ. Тень — признак «слой над страницей». */
  --shadow: none;
  --shadow-soft: none;
  --shadow-none: none;
  --shadow-overlay: 0 12px 40px rgba(15,27,65,.18);   /* модалка, тост, side-panel */

  /* ---------- Прочее ---------- */
  --z-sidebar: 30;
  --z-header: 40;
  --z-modal: 60;
  --z-toast: 70;
  --dur: 120ms;
  --ease: cubic-bezier(.2,.6,.3,1);
}

/* Тёмный контекст: шапка, экран входа, медиа-блоки.
   Правило стиля: в тёмной теме радиус 20px у поверхностей и НИКАКИХ теней. */
.theme-dark {
  --bg: #0B090E;
  --bg-alt: #0C0C0C;
  --bg-sunken: #181818;
  --surface: #181818;
  --surface-alt: #212121;
  --surface-cream: #181818;
  --surface-hover: #212121;

  --text: #FFFFFF;
  --text-strong: #FFFFFF;
  --text-muted: #828282;
  --text-display: #FFFFFF;

  --line: rgba(255,255,255,.25);
  --line-strong: rgba(255,255,255,.35);

  --radius: 0px;                  /* органы управления остаются острыми */
  --radius-surface: 20px;         /* поверхности/плитки тёмной темы */
  --shadow: none;
  --shadow-soft: none;
}