/* ==========================================================================
   Агенты порядка — Digital Design Tokens
   Источник: брендбук «Агенты порядка», tokens.json v2 (разделы 07, 08, 09, 15, 19).
   Значения перенесены без изменений. Добавлены только производные
   интерфейсные токены (состояния, motion, z-index), помеченные «digital».
   Сайт работает в светлой теме: принцип бренда «Бумага, а не экран» (раздел 05).
   ========================================================================== */

:root {
  color-scheme: light;

  /* --- Color / Brand (фиксированы) --- */
  --brand-ink: #14181D;        /* Графит · Primary · 25–35 % */
  --brand-paper: #F3F1EC;      /* Бумага · Primary · 50–60 % */
  --brand-signal: #E8562A;     /* Сигнал · Accent · ≤10 %, один на экран */

  /* --- Color / Secondary --- */
  --graphite-2: #2A2F36;       /* Футер, тёмные карточки */
  --steel: #5E636B;            /* Вторичный текст, 5,4:1 на бумаге */
  --stone: #D8D4CB;            /* Линии, неактивные модули. Не для текста */
  --fog: #E7E4DD;              /* Альтернативный фон секций, hover */
  --signal-tint: #F6D3C5;      /* Подложка ключевого вывода */
  --depth: #2F5F8A;            /* Вторая серия данных, info */

  /* --- Color / Semantic (светлая тема брендбука) --- */
  --surface: #F3F1EC;
  --surface-raised: #FFFFFF;
  --surface-sunken: #E7E4DD;
  --line: #D8D4CB;
  --line-strong: #5E636B;      /* ≥3:1 — границы контролов */
  --text: #14181D;
  --text-muted: #5E636B;
  --text-disabled: #8A8F96;
  --signal-text: #B8431A;      /* текст/ссылки сигналом, кольцо фокуса · 4,8:1 */
  --signal-text-on-ink: #F07A52; /* то же на графите · 6,5:1 */
  --on-signal: #14181D;        /* текст на сигнальной заливке · 4,9:1 */
  --on-ink: #F3F1EC;
  --on-ink-muted: #A3A7AD;     /* вторичный текст на графите · 7,4:1 */
  --line-on-ink: #2E343B;

  --success: #256B45;  --success-bg: #E6F2EA;
  --warning: #8F5A0A;  --warning-bg: #FBF0DC;
  --error:   #B42318;  --error-bg:   #FBE4E1;
  --info:    #2F5F8A;  --info-bg:    #E3ECF4;

  /* --- Color / Interaction (digital, из раздела 15 «UI-система») --- */
  --btn-primary-hover: #2A2F36;
  --btn-primary-active: #0B0E11;
  --btn-accent-hover: #F07A52;
  --btn-accent-active: #B8431A;

  /* --- Typography --- */
  --font-sans: "Source Sans 3", "Source Sans Pro", "Segoe UI", Arial, sans-serif;
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;

  /* Mobile-first значения (375). Tablet/desktop переопределяются ниже. */
  --fs-display: 40px;  --lh-display: 44px;
  --fs-h1: 30px;       --lh-h1: 36px;
  --fs-h2: 24px;       --lh-h2: 30px;
  --fs-h3: 20px;       --lh-h3: 28px;
  --fs-h4: 18px;       --lh-h4: 26px;
  --fs-lead: 18px;     --lh-lead: 28px;
  --fs-body-l: 17px;   --lh-body-l: 26px;
  --fs-body: 16px;     --lh-body: 24px;
  --fs-body-s: 14px;   --lh-body-s: 20px;
  --fs-caption: 12px;  --lh-caption: 16px;
  --fs-button: 16px;   --lh-button: 24px;
  --fs-nav: 16px;      --lh-nav: 24px;
  --fs-kpi: 40px;      --lh-kpi: 40px;
  --fs-quote: 22px;    --lh-quote: 30px;

  /* --- Spacing (шкала 8 px, шаг 4 для мелочей) --- */
  --space-4: 4px;   --space-8: 8px;   --space-12: 12px;  --space-16: 16px;
  --space-24: 24px; --space-32: 32px; --space-40: 40px;  --space-48: 48px;
  --space-64: 64px; --space-80: 80px; --space-96: 96px;  --space-120: 120px;
  --space-128: 128px;

  --section-gap: var(--space-64);   /* между секциями: 64 / 80 / 96 */
  --gutter: var(--space-16);        /* 16 / 24 / 24 */
  --page-margin: 20px;              /* 20 / 40 / 120 */

  /* --- Radius --- */
  --radius-xs: 2px;   /* иконки, теги */
  --radius-sm: 4px;   /* модули паттерна, чекбоксы */
  --radius-md: 8px;   /* кнопки, поля, карточки */
  --radius-lg: 16px;  /* панели, модальные окна */
  --radius-full: 9999px; /* только круг-агент и аватары */

  /* --- Border --- */
  --border-hairline: 1px;
  --border-control: 1.5px;
  --border-strong: 2px;

  /* --- Shadow: только всплывающие слои --- */
  --shadow-overlay: 0 12px 32px rgba(20, 24, 29, 0.16);

  /* --- Container --- */
  --container: 1200px;
  --container-text: 720px;

  /* --- Controls --- */
  --control-h: 44px;      /* mobile 44 / desktop 48 / compact 36 */
  --header-h: 56px;       /* mobile 56 / desktop 72 */

  /* --- Motion (digital; бренд спокойный → короткие, без «пружин») --- */
  --ease: cubic-bezier(.2, 0, 0, 1);
  --dur-fast: 120ms;
  --dur: 200ms;

  --opacity-disabled: 0.4;
  --opacity-scrim: 0.64;

  --z-header: 50;
  --z-sticky-cta: 40;
  --z-menu: 60;
}

/* Tablet 768 */
@media (min-width: 768px) {
  :root {
    --fs-display: 52px; --lh-display: 56px;
    --fs-h1: 38px;      --lh-h1: 46px;
    --fs-h2: 28px;      --lh-h2: 36px;
    --fs-h3: 22px;      --lh-h3: 30px;
    --fs-h4: 18px;      --lh-h4: 26px;
    --fs-lead: 20px;    --lh-lead: 30px;
    --fs-body-l: 18px;  --lh-body-l: 28px;
    --fs-nav: 15px;     --lh-nav: 20px;
    --fs-kpi: 48px;     --lh-kpi: 48px;
    --fs-quote: 24px;   --lh-quote: 34px;
    --section-gap: var(--space-80);
    --gutter: var(--space-24);
    --page-margin: 40px;
  }
}

/* Desktop 1440 (контент 1200 появляется от 1280) */
@media (min-width: 1200px) {
  :root {
    --fs-display: 64px; --lh-display: 68px;
    --fs-h1: 44px;      --lh-h1: 52px;
    --fs-h2: 32px;      --lh-h2: 40px;
    --fs-h3: 24px;      --lh-h3: 32px;
    --fs-h4: 20px;      --lh-h4: 28px;
    --fs-lead: 22px;    --lh-lead: 32px;
    --fs-kpi: 56px;     --lh-kpi: 56px;
    --fs-quote: 28px;   --lh-quote: 38px;
    --section-gap: var(--space-96);
    --control-h: 48px;
    --header-h: 72px;
  }
}