/* СГЕНЕРИРОВАНО: web/src/styles/tokens.css → css/tokens.css. Правьте источник, не этот файл.
   Пересборка: node scripts/build-tokens.mjs */
/* ==========================================================================
   Хроника-Школа · дизайн-токены (стиль «Стол», гамма portalwash.ru)
   Единственный источник правды. Владелец — трек A.
   Статика получает копию через `node scripts/build-tokens.mjs` → css/tokens.css.
   Админка трека B импортирует этот файл без изменений.

   Правило крупного текста: белый на бренде #F15A29 даёт 3.37 — это AA только
   для крупного текста, то есть жирного от 18.7px (см. --fs-btn). Мелкий белый
   текст на оранжевом ставить нельзя ни в кнопках, ни в плашках.

   Тёмная тема будет добавлена после одобрения светлой — сейчас её намеренно нет.

   Проверка: node scripts/check-contrast.mjs, node scripts/check-colors.mjs
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---------- оранжевая шкала: насыщенный тёплый, без ржавчины ---------- */
  --o-50:  #FFF3EE;
  --o-100: #FFE3D6;   /* светлая заливка, выделение, чипсы. Текст — только тёмный */
  --o-200: #FFC7AE;
  --o-300: #FB9A72;
  --o-400: #F5763F;
  --o-500: #F15A29;   /* бренд: кнопки и крупные плашки. Белый текст — только крупный */
  --o-600: #D94A1C;   /* наведение и нажатие */
  --o-700: #C2460F;
  --o-800: #B5400D;   /* оранжевый текст и ссылки: 5.67 на белом, 5.11 на фоне, 4.65 на заливке */
  --o-900: #8A3009;

  /* ---------- нейтральные серые ---------- */
  --n-50:  #F8F9FA;
  --n-100: #F2F3F5;   /* фон страницы */
  --n-200: #EDEEF0;   /* серые карточки с цифрами, как блоки в образце */
  --n-300: #E1E3E7;   /* линии и границы */
  --n-400: #C4C8CE;
  --n-500: #989EA8;
  --n-600: #565F6D;   /* вторичный текст: 6.45 на белом, 5.81 на фоне, 5.56 на серой карточке */
  --n-700: #3A4350;
  --n-800: #1F2937;   /* основной текст */
  --n-900: #111827;

  /* ---------- шкала отступов, шаг 4px ---------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  /* ---------- цели касания ---------- */
  --tap-min: 44px;
  --tap: 48px;

  /* ---------- ширины: интерфейс во всю ширину окна ---------- */
  --pad: clamp(16px, 2.5vw, 48px);
  --wrap: 100%;
  --wrap-narrow: 760px;

  /* ---------- радиусы ---------- */
  --radius-sm: 10px; --radius: 16px; --radius-lg: 22px; --radius-xl: 28px; --radius-pill: 999px;

  /* ---------- движение ---------- */
  --ease: cubic-bezier(.2, .7, .3, 1);
  --fast: .14s;
  --norm: .22s;

  /* ---------- шрифты: только свои, из /fonts ---------- */
  /* на портале одно семейство: разница уровней делается размером и жирностью */
  --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-head: var(--font-sans);
  /* Заголовки: 700 для блоков, 600 для крупного заголовка экрана.
     На больших кеглях 800 слипается — аккуратнее читается более тонкое начертание. */
  --fw-head: 700;
  --fw-display: 600;

  /* ---------- типографика ---------- */
  --fs-display: clamp(34px, 3.2vw, 56px);
  /* Единая шкала текста. Пять ступеней, между ними заметная разница,
     пояснение всегда мельче заголовка карточки. */
  --fs-h1: clamp(32px, 3vw, 52px);        /* заголовок страницы */
  --fs-h2: clamp(26px, 2vw, 30px);        /* заголовок секции */
  --fs-h3: clamp(18px, 1.3vw, 20px);      /* заголовок карточки */
  --fs-body: clamp(16px, 1.1vw, 17px);    /* основной текст */
  --fs-small: clamp(14px, 1vw, 15px);     /* подпись и пояснение */
  --measure: 68ch;                        /* около 80 знаков: единица ch у Manrope шире среднего знака */
  --fs-micro: 12px;
  --fs-btn: 19px;                     /* белый текст на оранжевом — только этим размером и жирным */
  --fs-kpi: clamp(44px, 4vw, 64px);   /* число в главном блоке */
  --fs-kpi-sm: clamp(28px, 2.2vw, 34px); /* число в компактном блоке */
  --lh-head: 1.22;
  --lh-body: 1.55;

  /* ---------- роли цвета ---------- */
  --bg: var(--n-100);
  --surface: #FFFFFF;
  --surface-2: var(--n-200);
  --ink: var(--n-800);
  --ink-2: var(--n-600);
  --line: var(--n-300);

  --accent: var(--o-500);              /* бренд: кнопка и крупная плашка; текст — только крупный белый */
  --accent-ink: #FFFFFF;
  --accent-hover: var(--o-600);        /* наведение и нажатие */
  --accent-text: var(--o-800);         /* оранжевый текст и ссылки на любом светлом фоне */
  --accent-text-bg: var(--o-800);
  --accent-soft: var(--o-100);         /* светлая заливка; текст на ней — --ink */
  --accent-edge: var(--o-200);
  --accent-edge-strong: var(--o-600);  /* контур кнопки: 3.82 на фоне, WCAG 1.4.11 */
  --accent-bright: var(--o-500);       /* прогресс и «сегодня» — заливка, не подложка под мелкий текст */
  --accent-bright-ink: #FFFFFF;

  --ok: #127A3E;        --ok-soft: #E4F4EA;
  --warn: #8A5A00;      --warn-soft: #FDF3DF;
  --danger: #B3261E;    --danger-soft: #FCEAE8;
  --focus: var(--o-500);

  --shadow-1: 0 1px 2px rgba(17, 24, 39, .05), 0 2px 8px rgba(17, 24, 39, .05);
  --shadow-2: 0 6px 16px rgba(17, 24, 39, .08), 0 18px 40px rgba(17, 24, 39, .07);
  --shadow-warm: 0 10px 26px rgba(241, 90, 41, .24);

  --grad-warm: linear-gradient(135deg, var(--o-400) 0%, var(--o-500) 100%);
  --grad-soft: linear-gradient(180deg, var(--o-50) 0%, #FFFFFF 100%);
}

/* Раздел с тёплым характером: чуть тёплый фон. Роли цвета не меняются. */
[data-mood="warm"] {
  --bg: var(--o-50);
  --shadow-1: 0 1px 2px rgba(241, 90, 41, .07), 0 3px 10px rgba(241, 90, 41, .06);
}