/*
  Дизайн-токены AdDrive — направление «Сводка», брендбук v1.0 от 27.08.2026.
  Источник: дизайн/исходники/AdDrive Brandbook.dc.html,
    раздел 08 «Токены цвета» (таблица светлая/тёмная),
    раздел 03 «Семантика статусов» и 03.1 «Тёмная тема»,
    раздел 04 «Типографика», раздел 05 «Графический язык».
  Решение Р-15 (спецификации/РЕШЕНИЯ.md).

  Правила:
  - имена семантические: код говорит «поверхность», «вторичный текст»,
    «статус просадки»; значения меняются с темой, имена — никогда;
  - статус кодируется дважды: цветом и формой значка
    (норма — галочка, предупреждение — треугольник, просадка — квадрат с «!»);
  - не более двух цветовых пятен на экран; цвет означает статус, не украшение;
  - все числа — font-variant-numeric: tabular-nums;
  - вторичный текст — нижняя граница контраста AA, светлее не уходим;
  - в тёмной теме нет чистого чёрного, чистого белого текста и теней
    как средства иерархии — вместо теней ступени поверхности.

  Чего здесь нет намеренно: отступы, радиусы, тени, размеры компонентов.
  В брендбуке они не заданы — это этап UI-кита.
*/

:root {
  color-scheme: light dark;

  /* Поверхности и текст — светлая тема (раздел 08) */
  --bg: #F7F5F0;               /* фон приложения */
  --surface: #FFFDF9;          /* карточки, таблицы, панели */
  --surface-raised: #F1EFE9;   /* модальные окна, поповеры */
  --border: #D8D2C6;           /* границы, разделители */
  --text: #12181A;             /* основной текст и цифры */
  --text-secondary: #3C433E;   /* абзацы, описания */
  --text-muted: #5D635E;       /* метки, подписи; нижняя граница AA */

  /* Акцент */
  --accent: #0F4C5C;           /* основные действия, ссылки — Petrol 700 */
  --accent-hover: #146275;     /* ховер акцента — Petrol 600 */
  --accent-soft: #EAF2F4;      /* выделение строки, подложка — Petrol 50 */
  --ochre: #B4762A;            /* итоги, план на графике — Ochre 600 */

  /* Статусы (раздел 03, «Семантика статусов»): заливка, текст, фон, рамка */
  --ok: #2E6F4E;
  --ok-text: #21563B;
  --ok-bg: #F1F7F2;
  --ok-border: #CFE0D3;
  --warn: #B8791F;
  --warn-text: #8A5712;
  --warn-bg: #FBF5E8;
  --warn-border: #E8DBBE;
  --danger: #B3352C;
  --danger-text: #96271F;
  --danger-bg: #FBF0EE;
  --danger-border: #EBCFCB;

  /* Нейтральная шкала (раздел 03) — для случаев, где семантики не хватает */
  --sand-50: #FBFAF7;
  --sand-100: #F7F5F0;
  --sand-200: #EAE6DD;         /* зебра таблиц, подложки */
  --sand-300: #D8D2C6;
  --stone-400: #9A9E97;        /* иконки, отключённое состояние */
  --stone-500: #5D635E;
  --stone-600: #3C433E;
  --ink-900: #12181A;

  /* Типографика (раздел 04): человек говорит — Lora, машина считает — Mono */
  --font-heading: 'Lora', Georgia, 'Times New Roman', serif;
  --font-ui: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --type-display: 600 42px/44px var(--font-heading);   /* letter-spacing -0.022em */
  --type-h2: 600 28px/32px var(--font-heading);
  --type-h3: 600 19px/25px var(--font-ui);
  --type-body: 400 15px/24px var(--font-ui);
  --type-small: 400 13px/20px var(--font-ui);
  --type-label: 500 11px/1.3 var(--font-mono);          /* letter-spacing +0.14em, капс */
  --type-metric: 500 26px/29px var(--font-mono);

  --tracking-display: -0.022em;
  --tracking-label: 0.14em;
  --measure-max: 75ch;                                   /* строка текста не длиннее 75 знаков */

  /* Графический язык (раздел 05) */
  --icon-grid: 24px;
  --icon-stroke: 1.5px;
  --icon-radius: 1.5px;                                  /* скругление концов и углов */
  --pattern-step: 16px;                                  /* линованный лист, охряная итоговая черта */

  /* Серии графиков: факт — заливка, план — охряной пунктир, аномалия — цвет статуса */
  --chart-1: var(--accent);
  --chart-2: #9CC3CC;                                    /* петроль-200 */
  --chart-3: var(--ochre);
  --chart-4: var(--stone-500);
}

/* Тёмная тема — собрана отдельно, не инверсия светлой (раздел 03.1, таблица 08) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #101413;
    --surface: #171C1B;          /* уровень 1 */
    --surface-raised: #1F2624;   /* уровень 2 */
    --border: #2C3432;
    --text: #EDEAE3;
    --text-secondary: #C6CCC8;
    --text-muted: #8D958F;
    --accent: #5FB3C4;           /* петроль осветлён и приглушён */
    --accent-hover: #7EC5D3;
    --accent-soft: #16292E;
    --ochre: #DFA455;            /* охра ярче */
    --ok: #63C295;
    --ok-text: #63C295;
    --ok-bg: #16241D;
    --ok-border: #2A4536;
    --warn: #E3AE5C;
    --warn-text: #E3AE5C;
    --warn-bg: #2A2217;
    --warn-border: #4A3B22;
    --danger: #EC7C72;
    --danger-text: #EC7C72;
    --danger-bg: #2B1A18;
    --danger-border: #4D2C29;
    --chart-2: #2E5F6A;
  }
}

:root[data-theme="dark"] {
  --bg: #101413;
  --surface: #171C1B;
  --surface-raised: #1F2624;
  --border: #2C3432;
  --text: #EDEAE3;
  --text-secondary: #C6CCC8;
  --text-muted: #8D958F;
  --accent: #5FB3C4;
  --accent-hover: #7EC5D3;
  --accent-soft: #16292E;
  --ochre: #DFA455;
  --ok: #63C295;
  --ok-text: #63C295;
  --ok-bg: #16241D;
  --ok-border: #2A4536;
  --warn: #E3AE5C;
  --warn-text: #E3AE5C;
  --warn-bg: #2A2217;
  --warn-border: #4A3B22;
  --danger: #EC7C72;
  --danger-text: #EC7C72;
  --danger-bg: #2B1A18;
  --danger-border: #4D2C29;
  --chart-2: #2E5F6A;
}

/*
  Значения фона и рамки статусных плашек в ТЁМНОЙ теме (--ok-bg, --ok-border,
  --warn-bg, --warn-border, --danger-bg, --danger-border, --chart-2) в брендбуке
  не заданы: там для тёмной темы приведены только цвета заливки статусов.
  Здесь они подобраны по правилу брендбука «тонированная плашка темнее
  текста, контраст AA» и помечены как производные — уточнить на этапе UI-кита.
*/

/* Базовые правила набора (раздел 04, «Правила набора») */
html { font: var(--type-body); color: var(--text); background: var(--bg); }
h1, h2 { font: var(--type-h2); letter-spacing: 0; }
h1.display { font: var(--type-display); letter-spacing: var(--tracking-display); }
h3 { font: var(--type-h3); }
small, .small { font: var(--type-small); }
.label { font: var(--type-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); }
.metric, td.num, .num { font: var(--type-metric); font-variant-numeric: tabular-nums; }
table { font-variant-numeric: tabular-nums; }
p { max-width: var(--measure-max); }