/* ==================================================================
   Автомонтаж — единый источник дизайн-системы.
   Отсюда кормятся 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 для крупного текста и для границ, несущих состояние.
   ================================================================== */

/* ------------------------------------------------------ шрифт
   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:#FFFFFF;
  --bg-sunken:#F4F4F3;       /* подложка дорожек, полей ввода, «утопленных» зон */
  --surface:#FFFFFF;
  --surface-raised:#FFFFFF;
  --text:#222222;            /* 15.91 на bg, 14.46 на bg-sunken */
  --text-2:#5C5C58;          /* 6.72 на bg, 6.10 на bg-sunken */
  --text-3:#6E6D68;          /* 5.18 на bg, 4.70 на bg-sunken — минимальный тон */
  --accent:#8A6A1F;          /* золото, затемнённое до 5.05 на белом — ТЕКСТ и иконки */
  --accent-bg:#D4A843;       /* чистое золото — только заливка, как текст нельзя (2.21) */
  --accent-on:#222222;       /* текст на золотой заливке: 7.18 */
  --accent-edge:#8A6A1F;     /* граница золотой заливки: сама заливка на белом даёт
                                2.21 и не проходит 3.0 как нетекстовый элемент,
                                поэтому у золотой кнопки в светлой теме есть кант */
  --accent-soft:#FBF3E0;     /* мягкая плашка: --accent на ней 4.56 */
  --ok:#146B3A;              /* 6.57 */
  --warn:#7A4F00;            /* 7.13 */
  --err:#B3261E;             /* 6.54 на bg, 5.91 на --accent-soft */
  --line:#D8D6D1;            /* 1.45 — ТОЛЬКО декоративные разделители */
  --line-strong:#8E8B84;     /* 3.40 на bg, 3.09 на bg-sunken — границы контролов,
                                состояния, всё, что несёт смысл */
  --scrim:rgba(34,34,34,.55);
  --sel-bg:#FBF3E0;          /* выделение текста мышью */
  --sel-text:#222222;

  /* --- цвета клипов на таймлайне ---
     Отдельная семья: кодируют тип материала, а не состояние интерфейса. */
  --clip-video:#3C6E8F;
  --clip-insert:#F83628;     /* врезка — красный РЕНДЕРА, здесь он на месте */
  --clip-music:#4ED29A;
  --clip-sub:#F1BE55;
  --clip-zoom:#9B7BD4;
  --clip-grade:#7A8B99;

  /* --- кегли: шаг ~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"]){
    --bg:#161616;
    --bg-sunken:#0E0E0E;
    --surface:#222222;
    --surface-raised:#2B2B2B;
    --text:#E6E6E6;          /* 12.75 на surface, 14.50 на bg */
    --text-2:#A8A6A0;        /* 6.54 на surface */
    --text-3:#8F8C86;        /* 4.75 на surface */
    --accent:#D4A843;        /* 7.18 на surface — годится как текст */
    --accent-bg:#D4A843;
    --accent-on:#222222;
    --accent-edge:#D4A843;   /* на тёмном заливка сама даёт 7.18, кант не нужен */
    --accent-soft:#332C17;
    --ok:#4ED29A;            /* 8.34 */
    --warn:#F1BE55;          /* 9.27 */
    --err:#FF6B5C;           /* 5.69 */
    --line:#3A3A38;
    --line-strong:#6E6C67;   /* 3.03 на surface */
    --scrim:rgba(0,0,0,.62);
    --sel-bg:#332C17;
    --sel-text:#E6E6E6;
    /* Тени на тёмном почти не читаются — их роль берёт --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:#161616;
  --bg-sunken:#0E0E0E;
  --surface:#222222;
  --surface-raised:#2B2B2B;
  --text:#E6E6E6;
  --text-2:#A8A6A0;
  --text-3:#8F8C86;
  --accent:#D4A843;
  --accent-bg:#D4A843;
  --accent-on:#222222;
  --accent-edge:#D4A843;
  --accent-soft:#332C17;
  --ok:#4ED29A;
  --warn:#F1BE55;
  --err:#FF6B5C;
  --line:#3A3A38;
  --line-strong:#6E6C67;
  --scrim:rgba(0,0,0,.62);
  --sel-bg:#332C17;
  --sel-text:#E6E6E6;
  --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}
}