/* ==================================================================
   Автомонтаж — единый источник дизайн-системы.
   Отсюда кормятся web/landing.html и web/app.html.
   Ни одного hex вне этого файла: если цвет понадобился — заводим токен.

   Раздаётся сервером по адресу /tokens.css (avtomontaj/webui.py).
   Ноль внешних запросов: ни CDN, ни Google Fonts, ни аналитики.

   ПАЛИТРА — брендбук Георгия Риверы (бренд ПРОДУКТА):
     графит #222222, золото #D4A843, жемчуг #E6E6E6.
   Красный #F83628 из config/brand.json — бренд РЕНДЕРА: им красятся плашки
   внутри готового видео и клипы-врезки на таймлайне. В интерфейсе его нет:
   белый на нём даёт 3.78 при норме 4.5.

   Все контрасты замерены по WCAG 2.1 relative luminance, числа проставлены
   в комментариях рядом с токенами. Норма: 4.5 для обычного текста,
   3.0 для крупного текста и для границ, несущих состояние.

   01.10.2026 — тёплая палитра (надиктовка владельца: «белый чёрный, слишком
   простенький… цвета получше, но не нейронные, не синие»; 17.08 — «дизайн
   нейронный, синий, фиолетовый»). Правило: НИ ОДНОГО тона 190–300°
   (синий, индиго, фиолетовый) ни в фоне, ни в акцентах, ни в клипах
   таймлайна. Фон — тёплая бумага, чернила — графит, акцент — янтарь
   (золото бренда), второй цвет — шалфей, графика на таймлайне — терракота.
   Числа контраста пересчитаны под новые фоны (скрипт замера — в отчёте
   исполнителя №1 за 01.10).
   ================================================================== */

/* ------------------------------------------------------ шрифт
   Inter Tight лежит в репозитории (assets/fonts, SIL OFL) и раздаётся
   сервером по /assets/fonts/. Путь абсолютный: страницы живут на разных
   адресах (/, /landing, /verify), относительный путь ломается.

   Playfair Display из брендбука локально ОТСУТСТВУЕТ, а тянуть его с
   Google Fonts запрещено правилом «ноль внешних запросов». Поэтому роль
   акцентной гарнитуры играет Inter Tight ExtraBold на крупных кеглях —
   честная замена, а не подделка под антикву. Как только файл Playfair
   появится в assets/fonts, его достаточно объявить здесь и переключить
   --font-display.

   Начертаний ровно три, как требует брендбук («минимум стилей»):
   Regular 400 — текст, Medium 500 — кнопки и активные состояния,
   ExtraBold 800 — заголовки (STYLE_SPEC: «Заголовки — Bold/ExtraBold»).
   SemiBold 600 убран намеренно: на нём висела вся иерархия, и она была вялой.
   ------------------------------------------------------ */
@font-face{font-family:'Inter Tight';src:url('/assets/fonts/InterTight-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter Tight';src:url('/assets/fonts/InterTight-Medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Inter Tight';src:url('/assets/fonts/InterTight-ExtraBold.ttf') format('truetype');font-weight:800;font-style:normal;font-display:swap}

:root{
  /* --- бренд: не меняется между темами --- */
  --brand-graphite:#222222;
  --brand-gold:#D4A843;
  --brand-platinum:#E6E6E6;
  --render-red:#F83628;      /* цвет РЕНДЕРА, не цвет интерфейса */

  /* --- светлая тема (по умолчанию): тёплая бумага и графит --- */
  --bg:#F7F3EC;              /* тёплая бумага (тон 38°), а не голый белый */
  --bg-sunken:#EFE9DF;       /* подложка дорожек, полей ввода, «утопленных» зон */
  --surface:#FFFDF9;         /* карточки и панели — чуть теплее белого */
  --surface-raised:#FFFFFF;
  --text:#27231F;            /* тёплый графит: 14.10 на bg, 12.92 на bg-sunken, 15.35 на surface */
  --text-2:#5A5249;          /* 6.93 на bg, 6.35 на bg-sunken, 6.49 на accent-soft */
  --text-3:#685F55;          /* 5.66 на bg, 5.18 на bg-sunken — минимальный тон */
  --accent:#7F5412;          /* янтарь для ТЕКСТА и иконок: 5.97 на bg, 5.47 на bg-sunken,
                                6.50 на surface, 5.59 на accent-soft */
  --accent-bg:#D4A843;       /* золото бренда — только заливка, как текст нельзя */
  --accent-on:#27231F;       /* текст на золотой заливке: 7.04 */
  --accent-edge:#7F5412;     /* кант золотой заливки: сама заливка на бумаге не даёт 3.0 */
  --accent-soft:#F7EBD3;     /* мягкая янтарная плашка: --text на ней 13.20 */
  --accent-2:#4A6B40;        /* шалфей — второй цвет: 5.47 на bg, 5.01 на bg-sunken, 5.96 на surface */
  --accent-2-soft:#E3ECDA;   /* мягкий шалфей: --text 12.83, --accent-2 4.98 */
  --ok:#3D6B35;              /* 5.66 на bg, 5.19 на bg-sunken */
  --warn:#7A4F00;            /* 6.44 на bg, 5.90 на bg-sunken */
  --err:#B3261E;             /* 5.91 на bg, 5.41 на bg-sunken, 5.53 на accent-soft */
  --line:#E3DACD;            /* ТОЛЬКО декоративные разделители */
  --line-strong:#8E8375;     /* 3.36 на bg, 3.08 на bg-sunken, 3.66 на surface — границы
                                контролов, состояния, всё, что несёт смысл */
  --scrim:rgba(39,35,31,.55);
  --sel-bg:#F7EBD3;          /* выделение текста мышью */
  --sel-text:#27231F;
  --stage-bg:#1B1815;        /* подложка плеера: тёплый почти-чёрный в обеих темах */

  /* --- цвета клипов на таймлайне ---
     Отдельная семья: кодируют тип материала, а не состояние интерфейса.
     Земляные тона, ни одного синего/фиолетового (было: видео #3C6E8F 204°,
     зум #9B7BD4 262°, цвет #7A8B99 207°). Подпись клипа — --text на
     смеси клипа с --surface: 10.99–12.16 (видео 26 %, графика 22 %,
     звук и субтитры 30 %). Кант клипа на surface: 3.29–4.88. */
  --clip-video:#7A6E62;      /* тёплый графит — главная дорожка, сверху полоса кадров */
  --clip-insert:#C8613A;     /* графика — терракота (16°) */
  --clip-music:#4E9474;      /* звук — нефрит (153°) */
  --clip-sub:#B98226;        /* субтитры — охра (38°) */
  --clip-zoom:#B9657A;       /* зум — глина-роза (345°) */
  --clip-grade:#8F8A4C;      /* цвет — олива (56°) */

  /* --- кегли: шаг ~1.25 от 16px, плюс две мелкие ступени для интерфейса.
         line-height и letter-spacing идут в комплекте — без них шкала не работает. */
  --f-2xs:11px;  --lh-2xs:1.3;   --ls-2xs:.02em;    /* тайм-код в клипе, метки линейки */
  --f-xs:12px;   --lh-xs:1.4;    --ls-xs:.01em;     /* подписи полей, бейджи */
  --f-sm:14px;   --lh-sm:1.45;   --ls-sm:0;         /* вторичный текст, кнопки sm */
  --f-md:16px;   --lh-md:1.55;   --ls-md:0;         /* основной текст (брендбук: 16–18 / 1.5) */
  --f-lg:18px;   --lh-lg:1.45;   --ls-lg:-.005em;   /* лид, h4 */
  --f-xl:22px;   --lh-xl:1.3;    --ls-xl:-.01em;    /* h3 */
  --f-2xl:28px;  --lh-2xl:1.25;  --ls-2xl:-.015em;  /* h2 */
  --f-3xl:36px;  --lh-3xl:1.15;  --ls-3xl:-.02em;   /* h1 приложения, h3 лендинга */
  --f-4xl:48px;  --lh-4xl:1.08;  --ls-4xl:-.02em;   /* h2 лендинга */
  --f-5xl:64px;  --lh-5xl:1.02;  --ls-5xl:-.025em;  /* h1 лендинга */

  --font-ui:'Inter Tight',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-display:'Inter Tight',system-ui,-apple-system,'Segoe UI',sans-serif;
  --w-regular:400;
  --w-medium:500;
  --w-bold:800;

  /* --- отступы: база 4px, девять ступеней --- */
  --s0:2px;  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px;
  --s5:24px; --s6:32px; --s7:48px; --s8:72px; --s9:112px;

  /* --- радиусы --- */
  --r-xs:4px;      /* бейдж, клип на таймлайне */
  --r-sm:8px;      /* кнопки, поля ввода */
  --r-md:12px;     /* плитки, тумблеры */
  --r-lg:16px;     /* карточки */
  --r-xl:24px;     /* модальные окна, hero-shot */
  --r-full:999px;  /* пилюли — форма плашек бренда из STYLE_SPEC */

  /* --- тени: четыре ступени плюс фокусная.
         У каждой есть смещение и мягкое размытие: цветное гало без смещения —
         это декорация, а не глубина. */
  --sh-0:none;
  --sh-1:0 1px 2px rgba(34,34,34,.06), 0 1px 3px rgba(34,34,34,.08);
  --sh-2:0 2px 4px rgba(34,34,34,.06), 0 4px 12px rgba(34,34,34,.08);
  --sh-3:0 8px 16px rgba(34,34,34,.08), 0 16px 40px rgba(34,34,34,.12);
  --sh-focus:0 0 0 3px rgba(212,168,67,.55);

  /* --- движение: из config/brand.json → motion_character («спокойно и мягко») --- */
  --dur-1:120ms;   /* наведение, нажатие, смена цвета */
  --dur-2:200ms;   /* раскрытие панели, появление тоста */
  --dur-3:320ms;   /* смена экрана */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
}

/* ------------------------------------------------------ тёмная тема
   Задаётся ДВАЖДЫ: по системной настройке и по явному data-theme,
   чтобы тумблер побеждал систему в обе стороны.
   В тёмной теме золото можно брать как текст: 7.18 на графите.
   ------------------------------------------------------ */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    /* Тёплый уголь (тон 30°), а не нейтральный #161616: чёрно-серое и было
       «слишком простеньким». */
    --bg:#1A1714;
    --bg-sunken:#12100E;
    --surface:#24201C;
    --surface-raised:#2D2823;
    --text:#EDE6DC;          /* 13.06 на surface, 14.41 на bg, 10.59 на accent-soft */
    --text-2:#B8AEA1;        /* 7.40 на surface, 6.00 на accent-soft */
    --text-3:#A39889;        /* 5.71 на surface, 5.15 на surface-raised, 4.63 на accent-soft */
    --accent:#E2B556;        /* янтарь: 8.45 на surface, 6.85 на accent-soft — годится как текст */
    --accent-bg:#D4A843;
    --accent-on:#1F1B17;     /* 7.72 на золоте */
    --accent-edge:#D4A843;   /* на тёмном заливка сама контрастна, кант не нужен */
    --accent-soft:#3A2F1A;
    --accent-2:#9DC78A;      /* шалфей: 8.45 на surface */
    --accent-2-soft:#2C3A26; /* --text на нём 9.74, --accent-2 6.30 */
    --ok:#8FC27C;            /* 7.84 на surface */
    --warn:#F1BE55;          /* 9.42 */
    --err:#FF7B67;           /* 6.38 */
    --line:#3B352F;
    --line-strong:#7A7064;   /* 3.33 на surface, 3.68 на bg */
    --scrim:rgba(0,0,0,.62);
    --sel-bg:#3A2F1A;
    --sel-text:#EDE6DC;
    /* Клипы на тёмном — те же тона, светлее: кант на surface 5.01–7.88,
       подпись --text на смеси с surface 6.84–9.46. */
    --clip-video:#9C8F80;
    --clip-insert:#D9734A;
    --clip-music:#5FAE8A;
    --clip-sub:#E2AC48;
    --clip-zoom:#C97A8E;
    --clip-grade:#A39E5C;
    /* Тени на тёмном почти не читаются — их роль берёт --surface-raised,
       а альфа теней уменьшается вдвое. */
    --sh-1:0 1px 2px rgba(0,0,0,.30), 0 1px 3px rgba(0,0,0,.36);
    --sh-2:0 2px 4px rgba(0,0,0,.32), 0 4px 12px rgba(0,0,0,.38);
    --sh-3:0 8px 16px rgba(0,0,0,.38), 0 16px 40px rgba(0,0,0,.46);
  }
}
:root[data-theme="dark"]{
  --bg:#1A1714;
  --bg-sunken:#12100E;
  --surface:#24201C;
  --surface-raised:#2D2823;
  --text:#EDE6DC;
  --text-2:#B8AEA1;
  --text-3:#A39889;
  --accent:#E2B556;
  --accent-bg:#D4A843;
  --accent-on:#1F1B17;
  --accent-edge:#D4A843;
  --accent-soft:#3A2F1A;
  --accent-2:#9DC78A;
  --accent-2-soft:#2C3A26;
  --ok:#8FC27C;
  --warn:#F1BE55;
  --err:#FF7B67;
  --line:#3B352F;
  --line-strong:#7A7064;
  --scrim:rgba(0,0,0,.62);
  --sel-bg:#3A2F1A;
  --sel-text:#EDE6DC;
  --clip-video:#9C8F80;
  --clip-insert:#D9734A;
  --clip-music:#5FAE8A;
  --clip-sub:#E2AC48;
  --clip-zoom:#C97A8E;
  --clip-grade:#A39E5C;
  --sh-1:0 1px 2px rgba(0,0,0,.30), 0 1px 3px rgba(0,0,0,.36);
  --sh-2:0 2px 4px rgba(0,0,0,.32), 0 4px 12px rgba(0,0,0,.38);
  --sh-3:0 8px 16px rgba(0,0,0,.38), 0 16px 40px rgba(0,0,0,.46);
}

/* На узком экране уменьшаются только три верхние ступени шкалы:
   64px заголовок на телефоне не помещается в две строки. */
@media (max-width:820px){
  :root{ --f-3xl:30px; --f-4xl:34px; --f-5xl:40px; }
}

/* ------------------------------------------------------ базовый слой
   Поверхности, которые мы не рисовали, всё равно несут дизайн:
   выделение текста, каретка, полоса прокрутки, кольцо фокуса.
   Дефолты браузера не принадлежат ни одной дизайн-системе.
   ------------------------------------------------------ */
::selection{background:var(--sel-bg); color:var(--sel-text)}
:root{
  color-scheme:light dark;
  accent-color:var(--accent-bg);
  caret-color:var(--accent);
  scrollbar-color:var(--line-strong) transparent;
  scrollbar-width:thin;
}

/* Одно кольцо фокуса на все интерактивные элементы без исключения.
   Раньше outline был задан только для полей ввода: по кнопкам и ссылкам
   клавиатурой ходили вслепую. */
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:var(--r-xs);
}
:focus:not(:focus-visible){outline:none}

/* Числа и тайм-коды — моноширинные цифры, иначе колонки «пляшут». */
.mono-num,[data-nums]{font-variant-numeric:tabular-nums}

/* ------------------------------------------------------ движение
   Обязательный блок: у человека может стоять системный запрет анимации.
   ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:1ms !important;
    animation-iteration-count:1 !important;
    transition-duration:1ms !important;
    scroll-behavior:auto !important;
  }
  html{scroll-behavior:auto}
}