/**
 * Дизайн-токены Unyson.
 *
 * Единственное место, где объявлены цвета, размеры и шкала отступов.
 * Ни один компонент не имеет права хардкодить цвет или размер мимо переменной —
 * иначе светлая тема (ТЗ 3.1) и перенос в нативное приложение (ТЗ 3.2) ломаются.
 *
 * Тема: по умолчанию — тема устройства (prefers-color-scheme), явный выбор
 * пользователя ставит data-theme на <html> и перекрывает системный.
 */

:root {
  color-scheme: dark;

  /* Баннер-объявление: нарочно вне палитры интерфейса, чтобы читался
     как временное сообщение. Одинаков в обеих темах. */
  --promo-bg: #FFD23F;
  --promo-tx: #1A1500;
  --promo-btn-bg: #1A1500;
  --promo-btn-tx: #FFD23F;

  /* --- Поверхности и текст (тёмная тема) --- */
  --bg: #0E0F13;
  --surface: #16181E;
  --surface2: #1D2027;
  --surface3: #23272F;
  --line: #262A32;
  --line2: #31363F;
  --tx: #E8EAEF;
  --tx2: #A6ADB8;
  --mut: #727984;

  /* --- Акцент «Лаванда» (ТЗ 3.2) --- */
  --acc: #8FA7FF;
  --acc-d: #7A94F5;
  --acc-ink: #0E0F13;
  --acc-bg: rgba(143, 167, 255, .10);
  --acc-bg2: rgba(143, 167, 255, .18);

  /* --- Цветовая кодировка типов генерации (ТЗ 3.1: сохраняется в обеих темах) --- */
  --img: #8FA7FF;
  --vid: #B9A6F0;
  --aud: #6FD6C4;
  --txt: #E8C98C;
  --d3: #F0997D;
  --utl: #9BA6B4;

  /* --- Статусы --- */
  --ok: #6FD6C4;
  --warn: #E8C98C;
  --err: #F08A7D;
  --err-line: rgba(240, 138, 125, .4);

  /* --- Производные подложки: считаются от базового цвета, --- */
  /* --- поэтому в светлой теме пересчитываются сами --- */
  --img-bg: color-mix(in srgb, var(--img) 10%, transparent);
  --vid-bg: color-mix(in srgb, var(--vid) 10%, transparent);
  --aud-bg: color-mix(in srgb, var(--aud) 10%, transparent);
  --txt-bg: color-mix(in srgb, var(--txt) 10%, transparent);
  --d3-bg: color-mix(in srgb, var(--d3) 10%, transparent);
  --utl-bg: color-mix(in srgb, var(--utl) 10%, transparent);

  --grad-brand: linear-gradient(135deg, var(--acc), var(--vid));

  /* Первый экран главной: своя картинка на каждую тему. Затемнения
     над ней нет — фон нарисован так, что слева остаётся пустое поле
     под заголовок, и гасить картинку, чтобы прочесть текст, незачем.

     Путь от корня сайта, а не относительный: относительный внутри
     переменной браузер считает не от этого файла, а от того, где
     переменную использовали, — и картинка искалась в css/images.

     ?v=2 — номер версии картинки. Имя файла не менялось, а браузеры
     и кэш перед сайтом держат прежний снимок: без номера люди ещё
     сутки видели бы старый фон. Меняя картинку, меняйте и номер. */
  --hero-image: image-set(url("/images/hero-dark.webp?v=2") type("image/webp"), url("/images/hero-dark.png?v=2") type("image/png"));
  /* На телефоне кадр другой: птица крупнее и по центру, иначе
     от широкой картинки остаётся полоска в треть экрана. */
  --hero-image-mobile: image-set(url("/images/hero-dark-mobile.webp?v=1") type("image/webp"), url("/images/hero-dark-mobile.png?v=1") type("image/png"));
  /* Цвет полей самой картинки. Страница чуть другого оттенка, и на
     узком экране, где картинка видна целиком, вокруг неё был бы
     заметен прямоугольник. */
  --hero-edge: #131218;

  /* --- Шрифты (ТЗ 3.2) --- */
  --sans: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* --- Радиусы --- */
  --r-sm: 9px;
  --r: 12px;
  --r-lg: 14px;
  --r-xl: 18px;
  --r-pill: 999px;

  /* --- Шкала отступов, шаг 4px (ТЗ 3.2) --- */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s7: 32px;
  --s8: 40px;
  --s9: 56px;

  /* --- Внешнее поле экрана: 20px десктоп, 16px мобильный (правило единого поля) --- */
  --pad: 20px;

  /* --- Ширины контейнеров. Три, а не шесть: --- */
  /* --- wide — рабочие экраны, base — контентные, text — читаемые полотна --- */
  --w-wide: 1280px;
  --w: 1080px;
  --w-text: 760px;

  /* --- Высоты интерактивных элементов (ТЗ 3.2: тач-цель минимум 44x44) --- */
  --h-btn: 44px;
  --h-btn-lg: 52px;
  --h-btn-sm: 36px;
  --h-btn-xs: 32px;
  --h-inp: 44px;
  --h-icon-btn: 38px;
  --h-tag: 22px;
  --h-head: 64px;

  /* --- Слои --- */
  --z-head: 60;
  --z-dropdown: 80;
  --z-mobmenu: 130;
  --z-scrim: 190;
  --z-modal: 195;
  --z-toast: 300;

  --tr: .15s;
}

/* Светлая палитра. Продублирована намеренно: одна копия под системную тему,
   вторая под явный выбор пользователя. Без JS обе работают одинаково. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #F6F7F9;
    --surface: #FFF;
    --surface2: #F0F2F5;
    --surface3: #E7EAEF;
    --line: #E3E6EB;
    --line2: #D4D8DF;
    --tx: #1A1D23;
    --tx2: #4A515C;
    --mut: #8A929E;
    --acc: #5F79E8;
    --acc-d: #4A66DD;
    --acc-ink: #FFF;
    --acc-bg: rgba(95, 121, 232, .09);
    --acc-bg2: rgba(95, 121, 232, .16);
    --img: #4C63C4;
    --vid: #7A5FD0;
    --aud: #1F8F7C;
    --txt: #9A7526;
    --d3: #C25A38;
    --utl: #5B6674;
    --ok: #1F8F7C;
    --warn: #9A7526;
    --err: #C4442E;
    --err-line: rgba(196, 68, 46, .35);
    --hero-image: image-set(url("/images/hero-light.webp?v=2") type("image/webp"), url("/images/hero-light.png?v=2") type("image/png"));
    --hero-image-mobile: image-set(url("/images/hero-light-mobile.webp?v=1") type("image/webp"), url("/images/hero-light-mobile.png?v=1") type("image/png"));
    --hero-edge: #FFF;
  }
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #F6F7F9;
  --surface: #FFF;
  --surface2: #F0F2F5;
  --surface3: #E7EAEF;
  --line: #E3E6EB;
  --line2: #D4D8DF;
  --tx: #1A1D23;
  --tx2: #4A515C;
  --mut: #8A929E;
  --acc: #5F79E8;
  --acc-d: #4A66DD;
  --acc-ink: #FFF;
  --acc-bg: rgba(95, 121, 232, .09);
  --acc-bg2: rgba(95, 121, 232, .16);
  --img: #4C63C4;
  --vid: #7A5FD0;
  --aud: #1F8F7C;
  --txt: #9A7526;
  --d3: #C25A38;
  --utl: #5B6674;
  --ok: #1F8F7C;
  --warn: #9A7526;
  --err: #C4442E;
  --err-line: rgba(196, 68, 46, .35);
  --hero-image: image-set(url("/images/hero-light.webp?v=2") type("image/webp"), url("/images/hero-light.png?v=2") type("image/png"));
  --hero-image-mobile: image-set(url("/images/hero-light-mobile.webp?v=1") type("image/webp"), url("/images/hero-light-mobile.png?v=1") type("image/png"));
  --hero-edge: #FFF;
}

@media (max-width: 760px) {
  :root {
    --pad: 16px;
  }
}