/* Дизайн-система sloi-ai — источник истины по цвету, шрифту и шкалам.
   Спека: docs/superpowers/specs/2026-08-23-design-system-design.md
   Правила использования: docs/design-system.md

   Значения контраста в комментариях посчитаны по WCAG, а не прикинуты на глаз:
   на креативах уже был боевой случай, когда неподтверждённая пара дала 1.83
   и надпись читалась как грязь. */

/* Пути к шрифту относительные — tokens.css лежит рядом с fonts/ и на FastAPI
   (mount /design), и в web-root сайта на другом vhost. Абсолютный путь сломал бы
   одну из двух поверхностей. */
@font-face {
  font-family: 'TikTok Sans';
  src: url('fonts/tiktok-sans-latin.woff2') format('woff2');
  font-weight: 300 900;
  font-stretch: 75% 150%;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'TikTok Sans';
  src: url('fonts/tiktok-sans-cyrillic.woff2') format('woff2');
  font-weight: 300 900;
  font-stretch: 75% 150%;
  font-display: swap;
  /* U+2116 (№) в диапазоне нет намеренно: его нет и в самом TikTok Sans.
     Оставить его здесь значило бы тянуть 59 КБ шрифта ради символа, который
     всё равно отрисуется системным. */
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1;
}

:root {
  color-scheme: light;

  /* Основа. Канон — salesbot/calc.py: палитра отлажена там и не пересматривается. */
  --bg: #F1EFE8;
  --paper: #FFFFFF;
  --ink: #111212;
  --ink-muted: #676761;
  --line: #A9A7A0;

  /* Акцент. Четыре роли, потому что один оттенок не может быть одновременно
     брендовым и читаемым: --accent (#E84B28) даёт лишь 3.34 на фоне, поэтому он
     годится для крупных плашек, рамок и графиков, но не для текста и не под
     белую надпись. */
  --accent: #E84B28;         /* бренд: плашки, рамки, графики */
  --accent-ink: #C83615;     /* акцентный текст: 4.57 на bg, 5.26 на paper */
  --accent-strong: #DA3B17;  /* фон CTA: белый текст 4.55 */
  --accent-hover: #C33515;   /* белый текст 5.47 */
  --accent-active: #B03013;  /* белый текст 6.41; он же текст на --accent-tint */
  --accent-tint: #F4E5E2;
  --on-accent: #FFFFFF;      /* текст на --accent-strong */

  /* Парный цвет — комплемент акцента (hue 198 против 11). Штатный второй цвет:
     плашки точек, инфо-блоки, вторая серия на графиках. */
  --pair: #2B6E8C;           /* 4.92 на bg */
  --pair-strong: #17435A;    /* 9.19 на bg */
  --pair-tint: #E5EDF1;

  /* Статусы. Ошибка намеренно уведена в холодный красный (hue 340): прежний
     rust #B33A2E имел hue 8 и после перекраски сливался бы с акцентом. */
  --error: #B3123F;          /* 5.94 на bg */
  --error-tint: #F4E1E7;
  --warn: #985C00;           /* 4.72 на bg */
  --warn-tint: #F6EDDF;
  --success: #1F7A55;        /* 4.59 на bg */
  --success-tint: #E4F1EC;

  /* Палитра графиков. Соседние серии различаются тоном, но не всегда яркостью
     (#1F7A55 и #8C5BA8 дают 1.05), поэтому для линий и точек различать нужно
     ещё и формой маркера, а не только цветом. */
  --chart-1: #E84B28;
  --chart-2: #2B6E8C;
  --chart-3: #E8A33D;
  --chart-4: #1F7A55;
  --chart-5: #8C5BA8;
  --chart-6: #676761;

  /* Типографика. font-weight намеренно НЕ фиксируется в font-variation-settings —
     ось wght должна оставаться под управлением обычного свойства. */
  --font-sans: 'TikTok Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;
  /* Системный шрифт — для служебных надписей, которые намеренно не носят бренд
     (юридические ссылки, сноски). */
  --font-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-axes: 'opsz' 28, 'wdth' 100;

  --fs-h1: 1.75rem;
  --fs-h2: 1.4rem;
  --fs-h3: 1.15rem;
  --fs-h4: 0.95rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-caption: 0.78rem;
  --fs-kpi: 3.5rem;

  --lh-tight: 1.15;
  --lh-heading: 1.3;
  --lh-body: 1.5;

  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;

  --r-sm: 0.35rem;
  --r-md: 0.8rem;
  --r-lg: 0.9rem;
  --r-pill: 999px;
}

/* Тёмная тема в двух видах: по системной настройке и по явному data-theme.
   Guard `:not([data-theme="light"])` нужен поверхностям с фиксированным светлым
   дизайном — сайт-лендинг рассчитан на кремовый фон и логотип под него, тёмная
   тема там не задумана. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;

    --bg: #17181A;
    --paper: #222325;
    --ink: #F0EEE9;
    --ink-muted: #B7B2A8;
    --line: #3A3B3D;

    /* На тёмном осветлённый акцент читается сам по себе (6.91 на bg), поэтому
       все четыре роли сходятся в один оттенок, а текст на кнопке становится
       тёмным. */
    --accent: #FF7A55;
    --accent-ink: #FF7A55;
    --accent-strong: #FF7A55;
    --accent-hover: #FF8F70;
    --accent-active: #E86540;
    --accent-tint: #3F1C12;
    --on-accent: #17181A;

    --pair: #5FAECD;
    --pair-strong: #BFE3F0;
    --pair-tint: #1D2E35;

    /* #F2809E дал бы контраст с акцентом 1.02 — на тёмном фоне ошибка и главная
       кнопка стали бы одним пятном. #EE4D80 разводит их до 1.36 и сохраняет
       4.54 на --paper. */
    --error: #EE4D80;
    --error-tint: #3B1622;
    --warn: #E8A33D;
    --warn-tint: #3A2C17;
    --success: #5FC79B;
    --success-tint: #1E342A;

    --chart-1: #FF7A55;
    --chart-2: #5FAECD;
    --chart-3: #E8A33D;
    --chart-4: #5FC79B;
    --chart-5: #B98BD0;
    --chart-6: #B7B2A8;
  }
}

/* Явно выбранная тёмная тема — тот же набор, чтобы переключатель работал
   в обе стороны, а не только из светлой. */
:root[data-theme='dark'] {
  color-scheme: dark;

  --bg: #17181A;
  --paper: #222325;
  --ink: #F0EEE9;
  --ink-muted: #B7B2A8;
  --line: #3A3B3D;

  /* На тёмном осветлённый акцент читается сам по себе (6.91 на bg), поэтому
     все четыре роли сходятся в один оттенок, а текст на кнопке становится
     тёмным. */
  --accent: #FF7A55;
  --accent-ink: #FF7A55;
  --accent-strong: #FF7A55;
  --accent-hover: #FF8F70;
  --accent-active: #E86540;
  --accent-tint: #3F1C12;
  --on-accent: #17181A;

  --pair: #5FAECD;
  --pair-strong: #BFE3F0;
  --pair-tint: #1D2E35;

  /* #F2809E дал бы контраст с акцентом 1.02 — на тёмном фоне ошибка и главная
     кнопка стали бы одним пятном. #EE4D80 разводит их до 1.36 и сохраняет
     4.54 на --paper. */
  --error: #EE4D80;
  --error-tint: #3B1622;
  --warn: #E8A33D;
  --warn-tint: #3A2C17;
  --success: #5FC79B;
  --success-tint: #1E342A;

  --chart-1: #FF7A55;
  --chart-2: #5FAECD;
  --chart-3: #E8A33D;
  --chart-4: #5FC79B;
  --chart-5: #B98BD0;
  --chart-6: #B7B2A8;
}