/* Дизайн-токены «Верстака».
 *
 * Два яруса, и смешивать их нельзя. Примитивы (--n-*, --a-*) называют
 * значение и в разметке не используются никогда. Семантические токены
 * (--bg-page, --text-secondary) называют роль, ссылаются на примитив и
 * только они попадают в компоненты. Этот шов и делает возможной смену темы:
 * без него «тёмная тема» означала бы обход каждого места, где встречается
 * серый, с вопросом «а этот серый — фон, граница или текст?».
 *
 * Значения примитивов посчитаны и проверены в scripts/palette_check.py.
 * Правки вносятся там: сначала числа проходят проверку контраста, потом
 * попадают сюда. Руками значение в этом файле не подбирается.
 */

:root {
  /* --- Примитивы: графит (нейтраль) --- */
  --n-1: oklch(0.9940 0.0015 264);   /* фон страницы */
  --n-2: oklch(0.9800 0.0035 264);   /* приглушённый фон, панели */
  --n-3: oklch(0.9590 0.0055 264);   /* фон элемента управления */
  --n-4: oklch(0.9370 0.0070 264);   /* наведение */
  --n-5: oklch(0.9130 0.0085 264);   /* нажатие, выбранное */
  --n-6: oklch(0.8850 0.0100 264);   /* мягкая граница */
  --n-7: oklch(0.8460 0.0115 264);   /* граница, разделитель */
  --n-8: oklch(0.7860 0.0130 264);   /* сильная граница */
  --n-9: oklch(0.6280 0.0160 264);   /* сплошная заливка, граница поля */
  --n-10: oklch(0.5760 0.0165 264);  /* заливка при наведении */
  --n-11: oklch(0.5120 0.0170 264);  /* второстепенный текст */
  --n-12: oklch(0.2480 0.0200 264);  /* основной текст */

  /* --- Примитивы: фирменный красный (акцент) --- */
  --a-1: oklch(0.9930 0.0035 27);
  --a-2: oklch(0.9820 0.0089 27);
  --a-3: oklch(0.9580 0.0209 27);
  --a-4: oklch(0.9330 0.0340 27);
  --a-5: oklch(0.9020 0.0511 27);
  --a-6: oklch(0.8600 0.0700 27);
  --a-7: oklch(0.8020 0.0920 27);
  --a-8: oklch(0.7180 0.1250 27);
  --a-9: oklch(0.5560 0.2050 27);    /* сплошная заливка: главное действие */
  --a-10: oklch(0.5060 0.1900 27);   /* заливка при наведении */
  --a-11: oklch(0.4880 0.1820 27);   /* акцентный текст, ссылки */
  --a-12: oklch(0.2740 0.0850 27);

  /* --- Примитивы: состояния ---
   * Опасное действие уведено в багровый (тон 4°) от фирменного красного
   * (27°). Тона ближе 15° читаются как один цвет, и «Удалить» выглядело бы
   * ровно как «Загрузить». Одного цвета всё равно мало: у опасных действий
   * обязательны значок и слово, см. .btn--danger в app.css. */
  --s-success-bg: oklch(0.9600 0.0250 150);
  --s-success-border: oklch(0.8500 0.0700 150);
  --s-success-solid: oklch(0.5900 0.1300 150);
  --s-success-text: oklch(0.4400 0.1000 150);
  --s-warning-bg: oklch(0.9650 0.0278 74);
  --s-warning-border: oklch(0.8700 0.0900 74);
  --s-warning-solid: oklch(0.7600 0.1500 74);
  --s-warning-text: oklch(0.4600 0.0950 74);
  --s-danger-bg: oklch(0.9600 0.0209 4);
  --s-danger-border: oklch(0.8600 0.0700 4);
  --s-danger-solid: oklch(0.5400 0.2100 4);
  --s-danger-text: oklch(0.4500 0.1750 4);

  /* --- Зеркальные поверхности ---
   * «Зеркальность» — это не один backdrop-filter, а три вещи вместе:
   * размытие подложки, блик по верхней кромке и светлая внутренняя грань.
   * Непрозрачность фона намеренно высокая: на честном стекле (alpha ~0.5)
   * под текстом оказывается что угодно, и проверенный контраст 5:1
   * превращается в неизвестно что, стоит проехать под панелью картинке. */
  --glass-bg: oklch(0.9940 0.0015 264 / 0.86);
  --glass-bg-strong: oklch(0.9940 0.0015 264 / 0.94);
  --glass-edge: oklch(1 0 0 / 0.65);          /* светлая внутренняя грань */
  --glass-sheen: oklch(1 0 0 / 0.55);         /* блик по верхней кромке */
  --glass-tint: oklch(0.5560 0.2050 27 / 0.05); /* след фирменного в стекле */
  --glass-blur: 20px;
  --glass-saturate: 1.6;

  /* --- Тени: глубина. Границы оставлены разделителям --- */
  --shadow-border:
    0 0 0 1px oklch(0 0 0 / 0.06),
    0 1px 2px -1px oklch(0 0 0 / 0.06),
    0 2px 4px 0 oklch(0 0 0 / 0.04);
  --shadow-border-hover:
    0 0 0 1px oklch(0 0 0 / 0.08),
    0 1px 2px -1px oklch(0 0 0 / 0.08),
    0 2px 4px 0 oklch(0 0 0 / 0.06);
  --shadow-raised:
    0 0 0 1px oklch(0 0 0 / 0.06),
    0 4px 8px -2px oklch(0 0 0 / 0.08),
    0 12px 24px -6px oklch(0 0 0 / 0.10);
  --shadow-overlay:
    0 0 0 1px oklch(0 0 0 / 0.08),
    0 12px 28px -8px oklch(0 0 0 / 0.16),
    0 32px 64px -16px oklch(0 0 0 / 0.20);
  --image-outline: oklch(0 0 0 / 0.1);

  /* --- Семантика: фоны --- */
  --bg-page: var(--n-1);
  --bg-surface: var(--n-2);
  --bg-control: var(--n-3);
  --bg-control-hover: var(--n-4);
  --bg-control-active: var(--n-5);
  --bg-accent-soft: var(--a-3);
  --bg-accent-solid: var(--a-9);
  --bg-accent-solid-hover: var(--a-10);

  /* --- Семантика: текст --- */
  --text-primary: var(--n-12);
  --text-secondary: var(--n-11);
  --text-accent: var(--a-11);
  --text-on-accent: oklch(1 0 0);
  --text-on-solid: oklch(1 0 0);

  /* --- Семантика: границы --- */
  --border-subtle: var(--n-6);
  --border-default: var(--n-7);
  --border-strong: var(--n-8);
  --border-field: var(--n-9);        /* граница поля ввода: держит 3:1 */
  --ring-focus: var(--a-9);

  /* --- Радиусы. Концентрические: внешний = внутренний + отступ --- */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-2xl: 26px;
  --r-pill: 999px;

  /* --- Шаг сетки. Между группами вдвое больше, чем внутри группы --- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* --- Типографика ---
   * Шрифты системные: в закрытом контуре внешний CDN недоступен, а тащить
   * веб-шрифт в поставку ради минус одного отличия от макета — лишние
   * полмегабайта на каждой странице. */
  --font-ui: "Segoe UI", system-ui, -apple-system, "Inter", "Helvetica Neue",
             Arial, "Noto Sans", sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", "Cascadia Mono", Consolas,
               "Liberation Mono", monospace;

  --text-display: 2rem;      /* 32px */
  --text-title: 1.5rem;      /* 24px */
  --text-heading: 1.1875rem; /* 19px */
  --text-subheading: 1rem;   /* 16px */
  --text-reading: 1rem;      /* 16px — транскрипт и саммари, длинное чтение */
  --text-ui: 0.875rem;       /* 14px — основной размер интерфейса */
  --text-caption: 0.8125rem; /* 13px */
  --text-micro: 0.75rem;     /* 12px — нижняя граница, реже */

  --lh-tight: 1.15;
  --lh-heading: 1.25;
  --lh-ui: 1.45;
  --lh-reading: 1.6;

  /* --- Движение ---
   * Ровно эти значения. Частым взаимодействиям — мгновенный отклик или
   * не больше 150 мс: своя анимация на каждое нажатие берёт плату
   * вниманием при каждом нажатии. */
  --dur-instant: 120ms;
  --dur-fast: 150ms;
  --dur-base: 200ms;
  --dur-slow: 260ms;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);

  --layout-max: 1320px;
  --reading-max: 68ch;   /* длина строки для чтения транскрипта */
  --sidebar-w: 264px;
  --header-h: 60px;

  color-scheme: light;
}

/* Тёмная тема. Один механизм переключения на весь проект: атрибут data-theme
 * на <html>. Системная настройка учитывается только когда пользователь не
 * выбрал тему явно — отсюда :not([data-theme="light"]).
 *
 * Тёмная палитра — не механически перевёрнутая светлая: насыщенность ниже,
 * тёмный конец шире. Зеркальным поверхностям в темноте нужен другой рецепт:
 * многослойные тени невидимы на тёмном, поэтому глубина держится одной
 * светлой гранью. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --n-1: oklch(0.1700 0.0075 264);
    --n-2: oklch(0.1980 0.0095 264);
    --n-3: oklch(0.2400 0.0120 264);
    --n-4: oklch(0.2720 0.0135 264);
    --n-5: oklch(0.3040 0.0145 264);
    --n-6: oklch(0.3440 0.0155 264);
    --n-7: oklch(0.4000 0.0160 264);
    --n-8: oklch(0.4800 0.0165 264);
    --n-9: oklch(0.6280 0.0160 264);
    --n-10: oklch(0.6820 0.0150 264);
    --n-11: oklch(0.7620 0.0125 264);
    --n-12: oklch(0.9560 0.0070 264);

    --a-1: oklch(0.1780 0.0180 27);
    --a-2: oklch(0.2080 0.0290 27);
    --a-3: oklch(0.2660 0.0560 27);
    --a-4: oklch(0.3080 0.0760 27);
    --a-5: oklch(0.3480 0.0920 27);
    --a-6: oklch(0.4020 0.1080 27);
    --a-7: oklch(0.4760 0.1280 27);
    --a-8: oklch(0.5720 0.1600 27);
    --a-9: oklch(0.5560 0.2050 27);
    --a-10: oklch(0.5880 0.2000 27);
    --a-11: oklch(0.7480 0.1400 27);
    --a-12: oklch(0.9160 0.0420 27);

    --s-success-bg: oklch(0.2500 0.0350 150);
    --s-success-border: oklch(0.3800 0.0700 150);
    --s-success-solid: oklch(0.6300 0.1300 150);
    --s-success-text: oklch(0.8000 0.1000 150);
    --s-warning-bg: oklch(0.2600 0.0400 74);
    --s-warning-border: oklch(0.4000 0.0750 74);
    --s-warning-solid: oklch(0.7600 0.1500 74);
    --s-warning-text: oklch(0.8500 0.0900 74);
    --s-danger-bg: oklch(0.2550 0.0450 4);
    --s-danger-border: oklch(0.4000 0.0900 4);
    --s-danger-solid: oklch(0.5800 0.2000 4);
    --s-danger-text: oklch(0.8200 0.1071 4);

    --glass-bg: oklch(0.1980 0.0095 264 / 0.82);
    --glass-bg-strong: oklch(0.1980 0.0095 264 / 0.92);
    --glass-edge: oklch(1 0 0 / 0.10);
    --glass-sheen: oklch(1 0 0 / 0.08);
    --glass-tint: oklch(0.5560 0.2050 27 / 0.08);

    --shadow-border: 0 0 0 1px oklch(1 0 0 / 0.08);
    --shadow-border-hover: 0 0 0 1px oklch(1 0 0 / 0.13);
    --shadow-raised: 0 0 0 1px oklch(1 0 0 / 0.10), 0 8px 24px -8px oklch(0 0 0 / 0.60);
    --shadow-overlay: 0 0 0 1px oklch(1 0 0 / 0.12), 0 24px 56px -16px oklch(0 0 0 / 0.72);
    --image-outline: oklch(1 0 0 / 0.1);

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --n-1: oklch(0.1700 0.0075 264);
  --n-2: oklch(0.1980 0.0095 264);
  --n-3: oklch(0.2400 0.0120 264);
  --n-4: oklch(0.2720 0.0135 264);
  --n-5: oklch(0.3040 0.0145 264);
  --n-6: oklch(0.3440 0.0155 264);
  --n-7: oklch(0.4000 0.0160 264);
  --n-8: oklch(0.4800 0.0165 264);
  --n-9: oklch(0.6280 0.0160 264);
  --n-10: oklch(0.6820 0.0150 264);
  --n-11: oklch(0.7620 0.0125 264);
  --n-12: oklch(0.9560 0.0070 264);

  --a-1: oklch(0.1780 0.0180 27);
  --a-2: oklch(0.2080 0.0290 27);
  --a-3: oklch(0.2660 0.0560 27);
  --a-4: oklch(0.3080 0.0760 27);
  --a-5: oklch(0.3480 0.0920 27);
  --a-6: oklch(0.4020 0.1080 27);
  --a-7: oklch(0.4760 0.1280 27);
  --a-8: oklch(0.5720 0.1600 27);
  --a-9: oklch(0.5560 0.2050 27);
  --a-10: oklch(0.5880 0.2000 27);
  --a-11: oklch(0.7480 0.1400 27);
  --a-12: oklch(0.9160 0.0420 27);

  --s-success-bg: oklch(0.2500 0.0350 150);
  --s-success-border: oklch(0.3800 0.0700 150);
  --s-success-solid: oklch(0.6300 0.1300 150);
  --s-success-text: oklch(0.8000 0.1000 150);
  --s-warning-bg: oklch(0.2600 0.0400 74);
  --s-warning-border: oklch(0.4000 0.0750 74);
  --s-warning-solid: oklch(0.7600 0.1500 74);
  --s-warning-text: oklch(0.8500 0.0900 74);
  --s-danger-bg: oklch(0.2550 0.0450 4);
  --s-danger-border: oklch(0.4000 0.0900 4);
  --s-danger-solid: oklch(0.5800 0.2000 4);
  --s-danger-text: oklch(0.8200 0.1071 4);

  --glass-bg: oklch(0.1980 0.0095 264 / 0.82);
  --glass-bg-strong: oklch(0.1980 0.0095 264 / 0.92);
  --glass-edge: oklch(1 0 0 / 0.10);
  --glass-sheen: oklch(1 0 0 / 0.08);
  --glass-tint: oklch(0.5560 0.2050 27 / 0.08);

  --shadow-border: 0 0 0 1px oklch(1 0 0 / 0.08);
  --shadow-border-hover: 0 0 0 1px oklch(1 0 0 / 0.13);
  --shadow-raised: 0 0 0 1px oklch(1 0 0 / 0.10), 0 8px 24px -8px oklch(0 0 0 / 0.60);
  --shadow-overlay: 0 0 0 1px oklch(1 0 0 / 0.12), 0 24px 56px -16px oklch(0 0 0 / 0.72);
  --image-outline: oklch(1 0 0 / 0.1);

  color-scheme: dark;
}