/* ============================================================================
 * tokens.css - ПАЛИТРА И РОЛИ. Единственное место в проекте, где стоят литералы
 * цвета, тени и шрифтовые стеки. Компоненты пользуются только ролями: тогда смена
 * темы и настройка бренда - одна правка здесь, а не обход всех файлов.
 *
 * ДВА СЛОЯ, НЕ ТРИ.
 *   1. ПАЛИТРА (--p-*)  сырые значения. Их не читает ни один компонент.
 *   2. РОЛИ     (--c-*, --sp-*, --t-*)  то, чем пользуется вёрстка.
 *
 * ТЕМЫ. Полный набор ролей объявлен в голом :root - это тёмный вид, лицо бренда.
 * Светлый вид - только переопределения: системное предпочтение и ручной выбор.
 * Три состояния работают: системная тёмная (голый :root), системная светлая
 * (@media prefers-color-scheme: light), ручной выбор (data-theme на <html>),
 * причём ручной перебивает систему в обе стороны.
 *
 * ПОЧЕМУ РОЛЬ НЕ ОБЪЯВЛЕНА ВНУТРИ МЕДИА-БЛОКА НИ ОДНА. Цвет, у которого
 * единственное определение живёт в @media, пропадает целиком, когда условие не
 * сработало: на экране остаётся прозрачность или наследование, и выглядит это как
 * забытый стиль, а не как отсутствующая переменная. В консоли - тишина.
 * ========================================================================== */

:root {
  color-scheme: dark light;

  /* ---------------- слой 1: палитра ---------------- */

  /* Тёмная база: почти чёрный с холодным уклоном, как просил владелец */
  --p-ink-1000: #05060a;
  --p-ink-950:  #080a10;
  --p-ink-900:  #0b0e15;
  --p-ink-850:  #11151e;
  --p-ink-800:  #161b26;
  --p-ink-750:  #1c222f;
  --p-ink-700:  #232a39;
  --p-ink-600:  #2f3849;

  --p-snow-000: #ffffff;
  --p-snow-050: #f7f8fb;
  --p-snow-100: #eef1f6;
  --p-snow-200: #e2e7ef;
  --p-snow-300: #cdd5e1;

  --p-slate-400: #9aa5b8;
  --p-slate-500: #7c869a;
  --p-slate-600: #5b6478;
  --p-slate-700: #3d4557;

  /* Акцент действия: малиновый. Второй акцент, про деньги: бирюзовый. Разведены
     по смыслу, а не по красоте - кнопка и сумма никогда не спорят за внимание. */
  --p-berry-300: #ff8fb0;
  --p-berry-400: #ff5c86;
  --p-berry-500: #f5336b;
  --p-berry-600: #d5145a;
  --p-berry-700: #a80f47;

  --p-teal-300: #7ff2dc;
  --p-teal-400: #2ee6c5;
  --p-teal-500: #12c9a8;
  --p-teal-600: #0d8f7a;

  --p-amber-400: #ffc247;
  --p-amber-600: #b57708;
  --p-rose-400:  #ff6b72;
  --p-rose-600:  #c62b32;

  /* Прозрачности для границ и подложек. Отдельными переменными, потому что
     полупрозрачный белый в светлой теме становится невидимым, а не светлым. */
  --p-veil-06: rgba(255, 255, 255, 0.06);
  --p-veil-10: rgba(255, 255, 255, 0.10);
  --p-veil-16: rgba(255, 255, 255, 0.16);
  --p-veil-04: rgba(255, 255, 255, 0.04);
  --p-soot-08: rgba(9, 11, 17, 0.08);
  --p-soot-14: rgba(9, 11, 17, 0.14);
  --p-soot-40: rgba(5, 6, 10, 0.55);
  --p-soot-70: rgba(5, 6, 10, 0.78);
  --p-soot-94: rgba(5, 6, 10, 0.94);

  /* ---------------- слой 2: роли ---------------- */

  --c-bg:           var(--p-ink-950);
  --c-bg-alt:       var(--p-ink-900);
  --c-surface:      var(--p-ink-850);
  --c-surface-2:    var(--p-ink-800);
  --c-surface-3:    var(--p-ink-750);
  --c-header:       rgba(8, 10, 16, 0.92);
  --c-backdrop:     var(--p-soot-70);

  /*
   * ОВЕРЛЕЙ ЛАЙТБОКСА ТЁМНЫЙ В ОБЕИХ ТЕМАХ, и поэтому у него свои три роли.
   *
   * ЗАМЕР 01.09.2026: лайтбокс брал --c-backdrop, а в светлой теме та подложка
   * прозрачная на 42% - сквозь неё читался текст страницы, и подпись под картинкой
   * цвета --c-text (в светлой теме тёмного) на ней пропадала совсем. Тема управляет
   * страницей; окно с картинкой к теме не относится - снимок смотрят на тёмном.
   * Эти три роли темами НЕ переопределяются намеренно.
   */
  --c-overlay:      var(--p-soot-94);
  --c-overlay-text: var(--p-snow-100);
  --c-overlay-dim:  var(--p-slate-400);

  --c-line:         var(--p-veil-10);
  --c-line-soft:    var(--p-veil-06);
  --c-line-strong:  var(--p-veil-16);

  --c-text:         var(--p-snow-100);
  --c-text-strong:  var(--p-snow-000);
  --c-body:         var(--p-slate-400);
  --c-dim:          var(--p-slate-500);

  --c-accent:       var(--p-berry-500);
  --c-accent-hi:    var(--p-berry-400);
  --c-accent-ink:   var(--p-snow-000);
  --c-accent-soft:  rgba(245, 51, 107, 0.14);
  --c-accent-line:  rgba(245, 51, 107, 0.38);

  --c-money:        var(--p-teal-400);
  --c-money-ink:    var(--p-ink-1000);
  --c-money-soft:   rgba(46, 230, 197, 0.12);
  --c-money-line:   rgba(46, 230, 197, 0.34);

  --c-warn:         var(--p-amber-400);
  --c-warn-soft:    rgba(255, 194, 71, 0.12);
  --c-bad:          var(--p-rose-400);
  --c-bad-soft:     rgba(255, 107, 114, 0.12);
  --c-good:         var(--p-teal-400);
  --c-good-soft:    rgba(46, 230, 197, 0.12);

  --c-focus:        var(--p-teal-300);

  --c-shadow-sm: 0 1px 2px rgba(5, 6, 10, 0.5);
  --c-shadow-md: 0 10px 30px rgba(5, 6, 10, 0.45);
  --c-shadow-lg: 0 28px 70px rgba(5, 6, 10, 0.6);

  /* Свечение под героем и полосами перехода. Держится ролями, чтобы в светлой
     теме превратиться в мягкую подсветку, а не в грязное пятно. */
  --c-glow-a: rgba(245, 51, 107, 0.20);
  --c-glow-b: rgba(46, 230, 197, 0.14);

  /* ---------------- типографика ---------------- */

  /*
   * ШРИФТ СИСТЕМНЫЙ, И ЭТО РЕШЕНИЕ, А НЕ ЭКОНОМИЯ. Владелец просил Inter. Он стоит
   * первым в стеке и подхватывается там, где установлен; там, где нет, следом идёт
   * системный гротеск той же породы. Подключать веб-шрифт с чужого домена ради
   * начертания - это лишний DNS, лишнее соединение, зависимость от чужой
   * доступности и прыжок текста при подмене. Ни одно из этих следствий не стоит
   * разницы в форме буквы «а».
   */
  --f-sans: Inter, "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system,
            "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --f-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo,
            Consolas, monospace;

  --t-hero:  clamp(2rem, 1.35rem + 2.9vw, 3.5rem);
  --t-h1:    clamp(1.8rem, 1.3rem + 2.2vw, 2.9rem);
  --t-h2:    clamp(1.4rem, 1.12rem + 1.25vw, 2.05rem);
  --t-h3:    clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  --t-h4:    1.0625rem;
  --t-body:  1.0625rem;
  --t-lead:  clamp(1.0625rem, 1rem + 0.35vw, 1.2rem);
  --t-small: 0.9375rem;
  --t-tiny:  0.8125rem;

  --lh-tight: 1.12;
  --lh-head:  1.22;
  --lh-body:  1.62;

  --fw-body: 400;
  --fw-med:  500;
  --fw-semi: 600;
  --fw-bold: 700;

  /* ---------------- ритм и геометрия ---------------- */

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 88px;
  --sp-10: 120px;

  /* Отступ между секциями: 48px на телефоне, 88px на большом экране */
  --sp-section: clamp(48px, 5vw, 88px);

  --container: 1280px;
  --gutter: clamp(16px, 4vw, 40px);

  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  22px;
  --r-2xl: 30px;
  --r-pill: 999px;

  --header-h: 68px;

  /*
   * ЗАЗОР ПОД ВЫПАДАЮЩЕЙ ПАНЕЛЬЮ И МОСТ ЧЕРЕЗ НЕГО - ДВА ЧИСЛА, СВЯЗАННЫЕ ОДНОЙ
   * ПРИЧИНОЙ, поэтому объявлены рядом. Мост обязан закрывать ВЕСЬ путь указателя
   * от пункта меню до панели: это зазор ПЛЮС нижний отступ шапки. Замер 08.09.2026
   * на 1440px: пункт кончается на 54px, панель начинается на 74px - разрыв 20px.
   * Меняете отступы шапки - перемеряйте мост, иначе меню снова станет неуловимым.
   */
  --nav-panel-gap: 6px;
  --nav-panel-bridge: 20px;

  /*
   * ПСЕВДОНИМЫ ПАЛИТРЫ ДЛЯ ИНСТРУМЕНТОВ КОМПЛЕКТА.
   *
   * `шаблоны/tools/иллюстрации.py` читает :root регэкспом и ищет ровно пять имён:
   * --bg, --surface, --text, --brand, --brand-2. Наши роли называются иначе
   * (--c-bg, --c-accent...), поэтому без этих строк генератор печатал «палитра не
   * прочитана» и рисовал картинки мимо цветов сайта.
   *
   * ЗНАЧЕНИЯ ЛИТЕРАЛАМИ, А НЕ var(): скрипт читает файл текстом и var() не
   * разворачивает - ссылка на переменную для него не цвет. Это единственная
   * причина, по которой здесь повтор; расходиться им нельзя, и рядом написано,
   * с чем каждое обязано совпадать.
   *
   * Сайт этими именами не пользуется: они существуют только для генератора.
   */
  --bg: #080a10;        /* = --p-ink-950,  роль --c-bg */
  --surface: #11151e;   /* = --p-ink-850,  роль --c-surface */
  --text: #eef1f6;      /* = --p-snow-100, роль --c-text */
  --brand: #f5336b;     /* = --p-berry-500, роль --c-accent */
  --brand-2: #2ee6c5;   /* = --p-teal-400,  роль --c-money */

  --z-header: 100;
  --z-panel: 120;
  --z-totop: 700;
  --z-backdrop: 900;
  --z-drawer: 1000;
  --z-lightbox: 1100;

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 140ms;
  --dur: 220ms;
}

/* ---------------- светлый вид: только переопределения ---------------- */

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --c-bg:          var(--p-snow-050);
    --c-bg-alt:      var(--p-snow-100);
    --c-surface:     var(--p-snow-000);
    --c-surface-2:   var(--p-snow-050);
    --c-surface-3:   var(--p-snow-100);
    --c-header:      rgba(255, 255, 255, 0.92);
    --c-backdrop:    rgba(11, 14, 21, 0.42);

    --c-line:        var(--p-soot-14);
    --c-line-soft:   var(--p-soot-08);
    --c-line-strong: rgba(9, 11, 17, 0.24);

    --c-text:        var(--p-ink-900);
    --c-text-strong: var(--p-ink-1000);
    --c-body:        var(--p-slate-600);
    --c-dim:         var(--p-slate-500);

    --c-accent:      var(--p-berry-600);
    --c-accent-hi:   var(--p-berry-700);
    --c-accent-soft: rgba(213, 20, 90, 0.10);
    --c-accent-line: rgba(213, 20, 90, 0.30);

    --c-money:       var(--p-teal-600);
    --c-money-ink:   var(--p-snow-000);
    --c-money-soft:  rgba(13, 143, 122, 0.10);
    --c-money-line:  rgba(13, 143, 122, 0.28);

    --c-warn:        var(--p-amber-600);
    --c-warn-soft:   rgba(181, 119, 8, 0.10);
    --c-bad:         var(--p-rose-600);
    --c-bad-soft:    rgba(198, 43, 50, 0.10);
    --c-good:        var(--p-teal-600);
    --c-good-soft:   rgba(13, 143, 122, 0.10);

    --c-focus:       var(--p-berry-600);

    --c-shadow-sm: 0 1px 2px rgba(9, 11, 17, 0.08);
    --c-shadow-md: 0 12px 30px rgba(9, 11, 17, 0.10);
    --c-shadow-lg: 0 24px 60px rgba(9, 11, 17, 0.14);

    --c-glow-a: rgba(213, 20, 90, 0.10);
    --c-glow-b: rgba(13, 143, 122, 0.08);
  }
}

/* Ручной выбор перебивает систему в обе стороны: светлый - здесь, тёмный - тем,
   что голый :root уже тёмный, и правило выше его не трогает. */
:root[data-theme="light"] {
  color-scheme: light;

  --c-bg:          var(--p-snow-050);
  --c-bg-alt:      var(--p-snow-100);
  --c-surface:     var(--p-snow-000);
  --c-surface-2:   var(--p-snow-050);
  --c-surface-3:   var(--p-snow-100);
  --c-header:      rgba(255, 255, 255, 0.92);
  --c-backdrop:    rgba(11, 14, 21, 0.42);

  --c-line:        var(--p-soot-14);
  --c-line-soft:   var(--p-soot-08);
  --c-line-strong: rgba(9, 11, 17, 0.24);

  --c-text:        var(--p-ink-900);
  --c-text-strong: var(--p-ink-1000);
  --c-body:        var(--p-slate-600);
  --c-dim:         var(--p-slate-500);

  --c-accent:      var(--p-berry-600);
  --c-accent-hi:   var(--p-berry-700);
  --c-accent-soft: rgba(213, 20, 90, 0.10);
  --c-accent-line: rgba(213, 20, 90, 0.30);

  --c-money:       var(--p-teal-600);
  --c-money-ink:   var(--p-snow-000);
  --c-money-soft:  rgba(13, 143, 122, 0.10);
  --c-money-line:  rgba(13, 143, 122, 0.28);

  --c-warn:        var(--p-amber-600);
  --c-warn-soft:   rgba(181, 119, 8, 0.10);
  --c-bad:         var(--p-rose-600);
  --c-bad-soft:    rgba(198, 43, 50, 0.10);
  --c-good:        var(--p-teal-600);
  --c-good-soft:   rgba(13, 143, 122, 0.10);

  --c-focus:       var(--p-berry-600);

  --c-shadow-sm: 0 1px 2px rgba(9, 11, 17, 0.08);
  --c-shadow-md: 0 12px 30px rgba(9, 11, 17, 0.10);
  --c-shadow-lg: 0 24px 60px rgba(9, 11, 17, 0.14);

  --c-glow-a: rgba(213, 20, 90, 0.10);
  --c-glow-b: rgba(13, 143, 122, 0.08);
}

:root[data-theme="dark"] {
  color-scheme: dark;
}