/* ═══════════════════════════════════════════════════════════════════════════
   Цветной слой поверх «Контура».

   Правило «Контура» «единственный цвет в продукте — бодиграф» владелец отменил
   02.10: «Добавь цвета в дизайн. Сейчас все однотонное. Возьми за основу дизайн
   приложения Ozon». Берётся язык цвета Ozon, а не бренд: главный синий у
   действий, светло-серый фон с белыми карточками, цветные плитки иконок,
   бейджи-пилюли, градиентная плашка (палитра — открытый брендбук
   brandlab.ozon.ru; фиолетового у Ozon нет, он свой).

   Тем же днём владелец: «Цвета класс, давай основным сделаем фиолетовый цвет
   а не синий только». Главный цвет действий — свой фиолетовый с уклоном в
   пурпур: кнопки, таб, ссылки, переключатель, бегунок, сегмент, вторичная
   кнопка. Синий Ozon остался вторым цветом градиента шапок и плашек и
   оттенком категории `--tint-blue`; остальной язык цвета прежний.

   Почему отдельным файлом. `tokens.css` — побайтная копия навыка kontur-design
   (сверку держит tests/test_static.py). Слой подключён в index.html ПОСЛЕДНИМ;
   откат цветов — ссылка на этот файл и две строки theme-color рядом с ней
   (плюс два цвета в manifest.json). Всё, что слой ВВОДИТ и что читают кит или
   экраны, кит объявляет у себя запасным значением из токенов «Контура»
   (`:root` в ui/ui.css): без слоя каждое правило кита стоит на том же токене,
   что до слоя, а не на пустой заливке.

   Три блока.
   · Общий для обеих тем — константы, которые от темы не зависят: главный
     фиолетовый, синий Ozon, белый на них, градиент. Фиолетовый объявлен здесь
     ОДИН раз; светлый акцент, кнопка обеих тем, верх шапки и градиент
     ссылаются на него.
   · Светлый (`:root`) и тёмный (`[data-theme="dark"]`). У них вес одинаковый,
     и светлое объявление этого файла стоит после тёмного блока «Контура»:
     прямой цвет, заданный здесь только светлым, остался бы светлым и в тёмной.
     Поэтому у каждого прямого цвета светлого блока есть пара в тёмном, а
     ссылки на токены пары не требуют — они разворачиваются по теме сами.

   Ни одной `--hd-*`, ни чернил `--ink-*`, ни сигналов: Личность набрана
   чернилами, Дизайн, пара, транзит, подсветка и центры — красками карты со
   смыслом, и они не меняются (R08i). Меняется только бумага под ними.

   Контраст (tests/test_palette.py): чернила оттенка на его заливке, карточке
   и фоне — 4,5:1, фигуры — 3:1, белый на градиенте и на главной кнопке — 4,5:1,
   в обеих темах. Где цвет брендбука нормы не держит, взят тот же оттенок
   темнее (светлая тема) или светлее (тёмная), а не другой цвет.

   Тёмная тема: фон #0F141B, карточки светлее на ~5 % белого (так у Ozon).
   Главная кнопка там, как у Ozon, — главный цвет с белым текстом, своими
   красками кита (`--ui-button-primary-*`). Общий `--on-accent` «Контура» в
   тёмной теме тёмный и остаётся таким: на нём стоят красная кнопка и сплошные
   бейджи сигналов. Поэтому остальной фиолетовый тёмной темы (ссылки, таб,
   переключатель, галочка, бегунок) — светлый, с тёмной отметкой на нём.

   Фиолетовый интерфейса и транзит на карте. Обводка транзита — краска карты
   `--hd-transit` (#6b3fd4, в тёмной #b39bff), слой её не трогает. Каждая
   ступень фиолетового, что рисуется рядом с графом (кнопка и её наведение,
   ссылка, таб, бегунок, верх шапки, оттенок и его чернила), отличима от неё
   в своей теме: тон LCh дальше на 10° ИЛИ ΔE76 не меньше 20 — оба в CIELAB
   (сторож — tests/test_palette.py). Отведён фиолетовый в пурпур. На
   «Транзитах» фиолетовый — только хром (шапка, кнопки, бегунок), меток
   `ui-tint-violet` там нет.
   ═══════════════════════════════════════════════════════════════════════════ */

:root, [data-theme="dark"] {
  /* Главный цвет действий — единственное объявление фиолетового. */
  --brand-violet: #8F2BEF;
  --brand-violet-deep: #7C1C9A;
  /* Второй цвет: градиент и оттенок категории `--tint-blue`. */
  --brand-blue: #005BFF;
  --brand-blue-deep: #0050E0;
  --on-brand: #FFFFFF;

  /* Плашка первого экрана: фиолетовый → синий, белым текстом, в обеих темах. */
  --gradient-hero: linear-gradient(135deg, var(--brand-violet) 0%, var(--brand-blue) 100%);
  --gradient-hero-ink: var(--on-brand);
  /* Шапка главных табов — тот же градиент (§4a); верх мессенджера красится
     его первой краской, и полоса клиента продолжает шапку без стыка. */
  --header-top: var(--brand-violet);
}

:root {
  /* Бумага: светло-серый фон Ozon, белые карточки */
  --paper-0: #FFFFFF;
  --paper-1: #F0F2F5;
  --paper-2: #EBEEF2;
  --paper-3: #E7EAEF;
  --paper-4: #D5DAE1;

  /* Акцент: главный фиолетовый, наведение темнее */
  --accent-900: var(--brand-violet-deep);
  --accent-700: var(--brand-violet);
  --accent-500: #A866F5;
  --accent-300: #CFA8FA;
  --accent-100: #EBDDFE;
  --accent-050: #F5EEFF;

  --border-focus: var(--accent-700);
  --veil-glass: rgba(255, 255, 255, .86);

  /* Синий оттенок — второй цвет бренда: его синий, его глубокий синий. */
  --tint-blue: var(--brand-blue);
  --tint-blue-soft: #EBF2FF;
  --tint-blue-ink: var(--brand-blue-deep);

  /* Оттенки: основной (маркер, полоска), заливка плитки и бейджа, чернила на ней */
  --tint-magenta: #F1117E;
  --tint-magenta-soft: #FDE7F2;
  --tint-magenta-ink: #C8005E;
  --tint-green: #009E58;
  --tint-green-soft: #E3F7EE;
  --tint-green-ink: #007A3D;
  --tint-orange: #C77700;
  --tint-orange-soft: #FFF3DC;
  --tint-orange-ink: #A05300;
  --tint-sky: #008FE8;
  --tint-sky-soft: #E3F4FF;
  --tint-sky-ink: #006BBF;
  /* Фиолетовый оттенок категории (авторитет, компромисс, крест,
     обусловленность, тема) — это акцент, решение одно: свой литерал рядом
     с главным был бы вторым, почти тем же фиолетовым. Как прежде синий
     оттенок был акцентом. */
  --tint-violet: var(--accent-700);
  --tint-violet-soft: var(--accent-050);
  --tint-violet-ink: var(--accent-900);
  --tint-teal: #009E72;
  --tint-teal-soft: #E2F8F2;
  --tint-teal-ink: #007A57;

  /* Детали кита, которых алиасы «Контура» не покрывают. Вторичная кнопка —
     фиолетовый текст на фиолетовой заливке. */
  --ui-button-secondary-bg: var(--accent-050);
  --ui-button-secondary-ink: var(--accent-900);
  --ui-button-secondary-line: var(--accent-050);
  --ui-button-secondary-hover: var(--accent-100);
  --ui-segmented-on-ink: var(--accent-700);
}

[data-theme="dark"] {
  --paper-0: #1A1F26;
  --paper-1: #0F141B;
  --paper-2: #1F252C;
  --paper-3: #22282F;
  --paper-4: #323A44;

  /* Светлый фиолетовый: ссылки, таб, переключатель, галочка, бегунок */
  --accent-900: #EDBDFF;
  --accent-700: #C17BFF;
  --accent-500: #9D5CF0;
  --accent-300: #563A8C;
  --accent-100: #3A2566;
  --accent-050: #291C47;

  --veil-glass: rgba(26, 31, 38, .86);

  /* Главная кнопка — главный фиолетовый с белым текстом, как синяя у Ozon. */
  --ui-button-primary-bg: var(--brand-violet);
  --ui-button-primary-ink: var(--on-brand);
  --ui-button-primary-hover: var(--brand-violet-deep);

  /* Синий оттенок тёмной темы — светлый синий, как был у акцента. */
  --tint-blue: #5C9DFF;
  --tint-blue-soft: #172843;
  --tint-blue-ink: #8AB8FF;

  /* Заливки темнее, чем просит глаз: на них стоит и третий текст карточки
     (`--text-tertiary` «Контура», #8E8E96) — 4,5:1 на каждой. */
  --tint-magenta: #FF3D93;
  --tint-magenta-soft: #3E1A31;
  --tint-magenta-ink: #FF70AD;
  --tint-green: #00BE6C;
  --tint-green-soft: #102C21;
  --tint-green-ink: #3CD68F;
  --tint-orange: #FFA800;
  --tint-orange-soft: #2F2510;
  --tint-orange-ink: #FFBC3D;
  --tint-sky: #00A2FF;
  --tint-sky-soft: #0F283C;
  --tint-sky-ink: #4CBCFF;
  --tint-teal: #06CA99;
  --tint-teal-soft: #0F2B27;
  --tint-teal-ink: #3ADBB0;
}