/* OKVideo — общие токены интерфейса.
 *
 * Канон: _brand/README.md. Значения выверены по контрасту: каждая пара
 * «текст на своей подложке» даёт не меньше 4,5:1, границы — не меньше 3:1,
 * в обеих темах. Меняя цвет, пересчитайте пару, а не подбирайте на глаз.
 *
 * Правило серии: мятный отмечает то, что сейчас в эфире — активное окно,
 * идущую строку, таймер, готовый результат. Поэтому accent и success
 * совпадают намеренно, а не по недосмотру.
 *
 * Светлая тема: мятный не бывает текстом, он слишком светлый для белого.
 * Роль акцента берёт тёмный оттенок того же тона. Тёмная тема: мятный
 * становится акцентом, тёмно-синий — цветом текста на нём. Ровно так же
 * инвертируется плитка знака.
 */

:root {
  color-scheme: light;

  --font-sans: "Segoe UI Variable Text", "Segoe UI", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  /* фирменные цвета — неизменны в обеих темах */
  --brand-navy: #0b1020;
  --brand-mint: #43e0b2;

  /* подложки */
  --bg: #f3f5fa;
  --bg-deep: #e7ebf4;
  --surface: #ffffff;
  --surface-raised: #fbfcff;
  --surface-subtle: #eef1f8;
  --surface-accent: #e2f7ef;
  --surface-warning: #fff6df;
  --surface-info: #eaf2fb;

  /* текст и границы */
  --text: #0b1020;
  --text-soft: #3a4260;
  --muted: #525a78;
  --line: #d5dae8;
  --line-strong: #7f87a6;

  /* действие */
  --accent: #0b6b52;
  --accent-hover: #085440;
  --accent-contrast: #ffffff;

  /* состояния */
  --success: #0b6b52;
  --success-text: #0a5f49;
  --info: #286c9d;
  --info-text: #215d88;
  --warning: #9b6200;
  --warning-text: #694100;
  --danger: #a83f46;
  --danger-text: #8b2831;
  --focus: #1769e0;

  /* высота и ритм */
  --shadow: 0 1.25rem 3.5rem rgba(11, 16, 32, .10), 0 .2rem .8rem rgba(11, 16, 32, .04);
  --shadow-soft: 0 .55rem 1.6rem rgba(11, 16, 32, .07);
  --radius-tile: 6px;
  --radius-control: 999px;
  --radius-panel: clamp(1.1rem, 2vw, 1.45rem);
  --page-background: var(--bg);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0b1020;
    --bg-deep: #070a16;
    --surface: #141730;
    --surface-raised: #1b1f3c;
    --surface-subtle: #10142a;
    --surface-accent: #123a31;
    --surface-warning: #30240f;
    --surface-info: #122846;
    --text: #f2f5ff;
    --text-soft: #d5daf0;
    --muted: #a7aecc;
    --line: #333a63;
    --line-strong: #767da6;
    --accent: #43e0b2;
    --accent-hover: #6be9c4;
    --accent-contrast: #0b1020;
    --success: #43e0b2;
    --success-text: #8beab9;
    --info: #79bcff;
    --info-text: #a7d4ff;
    --warning: #f2bb5f;
    --warning-text: #f4d58d;
    --danger: #ff8e9e;
    --danger-text: #ffb2bd;
    --focus: #ffd166;
    --shadow: 0 1rem 3rem rgba(2, 3, 16, .42);
    --shadow-soft: 0 .45rem 1.4rem rgba(2, 3, 16, .3);
    --page-background: var(--bg);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b1020;
  --bg-deep: #070a16;
  --surface: #141730;
  --surface-raised: #1b1f3c;
  --surface-subtle: #10142a;
  --surface-accent: #123a31;
  --surface-warning: #30240f;
  --surface-info: #122846;
  --text: #f2f5ff;
  --text-soft: #d5daf0;
  --muted: #a7aecc;
  --line: #333a63;
  --line-strong: #767da6;
  --accent: #43e0b2;
  --accent-hover: #6be9c4;
  --accent-contrast: #0b1020;
  --success: #43e0b2;
  --success-text: #8beab9;
  --info: #79bcff;
  --info-text: #a7d4ff;
  --warning: #f2bb5f;
  --warning-text: #f4d58d;
  --danger: #ff8e9e;
  --danger-text: #ffb2bd;
  --focus: #ffd166;
  --shadow: 0 1rem 3rem rgba(2, 3, 16, .42);
  --shadow-soft: 0 .45rem 1.4rem rgba(2, 3, 16, .3);
  --page-background: var(--bg);
}

/* Печать: серия остаётся читаемой на бумаге без заливок. */
@media print {
  :root, :root[data-theme="dark"] {
    color-scheme: light;
    --bg: #ffffff;
    --bg-deep: #ffffff;
    --surface: #ffffff;
    --surface-raised: #ffffff;
    --surface-subtle: #ffffff;
    --surface-accent: #ffffff;
    --surface-warning: #ffffff;
    --surface-info: #ffffff;
    --text: #111111;
    --text-soft: #222222;
    --muted: #444444;
    --line: #cccccc;
    --line-strong: #777777;
  }
}
