/* ============================================================================
   tokens.css — единая библиотека токенов CastBuddy
   ============================================================================

   В проекте ДВЕ стилистические системы, и смешивать их нельзя:

   1. ПРОДУКТ — то, что видит пользователь: приложение (`/`), экран пробы с
      телепромптером (`/proba`). Тёплая палитра, фиолетовый акцент, свои шкалы.

   2. ИНСТРУМЕНТЫ — то, чем пользуется владелец: режим правки (`js/cb-edit.js`)
      и админка (`/admin.html`). Оформление по Apple HIG: системные цвета,
      нейтральные подложки, системный шрифт. Решения HIG в продукт не переносим,
      правила продукта на инструменты не распространяем.

   Подключается ПЕРВЫМ — до собственных стилей страницы, чтобы страница могла
   при необходимости переопределить токен у себя.

   Правило добавления значения (см. docs/DESIGN-PLAN.md):
   совпало с токеном → берём токен; не совпало → ближайшее по шкале;
   вышло за шкалу → продлеваем шкалу тем же шагом и заводим новый токен.
   ==========================================================================*/

/* ══════════════════════════════════════════════════════════════════════════
   СИСТЕМА 1 — ПРОДУКТ
   ══════════════════════════════════════════════════════════════════════════

   Линейки построены ЦЕЛИКОМ, а не собраны из того, что случайно оказалось
   в вёрстке. Смысл: когда попадается значение вне системы, рядом всегда есть
   корректная ступень, и подгонка сдвигает макет на пиксель-два, а не ломает его.

   Как построены (по практике Apple HIG и зрелых систем вроде Radix/Tailwind):
   - ЧАСТО, где важен глаз, РЕЖЕ — где важна пропорция. У Apple шаг кегля внизу
     шкалы 1px (11·12·13·15·16·17), вверху 4–6px (20·22·28·34): на мелком тексте
     пиксель заметен, на крупном — нет.
   - Отступы и скругления — сетка 4px, с половинной ступенью 2px для волосяных
     зазоров. Всё, что крупнее 96px, — это уже раскладка страницы, а не шкала.
   - Числовые имена (--sp-16, --fs-14) однозначны и не врут. Прежние смысловые
     имена (--s4, --t-sm) сохранены как псевдонимы: на них завязана вся вёрстка.

   ПРАВИЛО ПОДГОНКИ (решение владельца 2026-07-29): берём ближайшую ступень;
   при равном расстоянии — БОЛЬШУЮ. Мелкий текст хуже читается, поэтому в спорном
   случае система округляет вверх, а не вниз.
   ══════════════════════════════════════════════════════════════════════════ */
:root {

  /* ── ОТСТУПЫ. Сетка 4px, половинная ступень 2px ────────────────────────── */
  --sp-0: 0;
  --sp-2: 2px;
  --sp-4: 4px;
  --sp-6: 6px;
  --sp-8: 8px;
  --sp-10: 10px;
  --sp-12: 12px;
  --sp-14: 14px;
  --sp-16: 16px;
  --sp-18: 18px;
  --sp-20: 20px;
  --sp-22: 22px;
  --sp-24: 24px;
  --sp-28: 28px;
  --sp-32: 32px;
  --sp-36: 36px;
  --sp-40: 40px;
  --sp-44: 44px;
  --sp-48: 48px;
  --sp-56: 56px;
  --sp-64: 64px;
  --sp-72: 72px;
  --sp-80: 80px;
  --sp-88: 88px;
  --sp-96: 96px;

  /* прежние имена — псевдонимы, на них завязана вёрстка */
  --s1: var(--sp-4);
  --s2: var(--sp-8);
  --s3: var(--sp-12);
  --s4: var(--sp-16);
  --s6: var(--sp-24);
  --s8: var(--sp-32);
  --s12: var(--sp-48);

  /* ── СКРУГЛЕНИЯ. Шаг 2 внизу, 4 вверху ─────────────────────────────────── */
  --rd-0: 0;
  --rd-2: 2px;
  --rd-4: 4px;
  --rd-6: 6px;
  --rd-8: 8px;
  --rd-10: 10px;
  --rd-12: 12px;
  --rd-14: 14px;
  --rd-16: 16px;
  --rd-20: 20px;
  --rd-24: 24px;
  --rd-28: 28px;
  --rd-32: 32px;
  --rd-pill: 999px;    /* пилюля: не ступень шкалы, а приём */
  --rd-circle: 50%;    /* круг: то же самое */

  --r-sm: var(--rd-10);
  --r-md: var(--rd-16);
  --r-lg: var(--rd-24);

  /* ── РАЗМЕРЫ ТЕКСТА. Внизу шаг 1px, вверху 2–6px ───────────────────────── */
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-17: 17px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-22: 22px;
  --fs-24: 24px;
  --fs-26: 26px;
  --fs-28: 28px;
  --fs-30: 30px;
  --fs-32: 32px;
  --fs-34: 34px;
  --fs-40: 40px;
  /* Выше 40 шкала продолжена тем же шагом 6 (40 · 46 · 52): крупные цифры
     сводок. Ступень 32 добавлена туда же, где шаг 2 (28 · 30 · 32 · 34), —
     заголовок ключевой плашки главной. */
  --fs-46: 46px;
  --fs-52: 52px;

  --t-xs: var(--fs-12);
  --t-sm: var(--fs-14);
  --t-md: var(--fs-16);
  --t-lg: var(--fs-18);
  --t-xl: var(--fs-22);
  --t-2xl: var(--fs-30);
  --t-3xl: var(--fs-40);

  /* ── НАЧЕРТАНИЕ ────────────────────────────────────────────────────────── */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-heavy: 800;

  /* ── МЕЖСТРОЧНЫЙ ───────────────────────────────────────────────────────── */
  --lh-tight: 1.15;    /* заголовки */
  --lh-snug: 1.3;
  --lh-normal: 1.45;   /* основной текст */
  --lh-relaxed: 1.6;

  /* ══ ЦВЕТ ══════════════════════════════════════════════════════════════════
     Опорные цвета — наши, не Apple: бежевый фон, тёплый тёмный и фиолетовый
     акцент. Это узнаваемость сервиса, менять её нельзя. От Apple взята
     СТРУКТУРА палитры (ступени текста, заливок, разделителей и набор
     смысловых цветов) и значения там, где своего не было.

     Нейтрали намеренно ТЁПЛЫЕ (в основе 27,26,23), а не серые как у Apple:
     на бежевом фоне холодный серый выглядит грязным.
     ═══════════════════════════════════════════════════════════════════════ */

  /* Текст: четыре ступени контраста, как label/secondary/tertiary/quaternary.
     ⚠️ Первые три обязаны читаться: контраст к бумаге (--bg) не ниже 4.5 по WCAG AA.
     Это проверяет сборка (tools/build/check_design.py), поменять «на глаз» не выйдет.
     --ink-3 затемнён 30.07 с #8A8880: тем серым набран ВЕСЬ мелкий текст сервиса,
     а он давал 3.1 на бумаге — отсюда общее ощущение «блёкло и не читается».
     Одна правка здесь чинит все подписи разом, поэлементно ловить было незачем.
     --ink-4 — только для украшений (1.9): текстом им ничего не набирают. */
  --ink: #292c32;
  --ink-2: #55534C;
  --ink-3: #6E6C66;
  --ink-4: #B3B1A8;

  /* Разделители и обводки — ТЁПЛЫЙ чёрный (27,26,23), не серый.
     Имя = прозрачность в процентах, чтобы ступень читалась без заглядывания. */
  --line-4: rgba(27, 26, 23, .04);
  --line-6: rgba(27, 26, 23, .06);
  --line-8: rgba(27, 26, 23, .08);
  --line-10: rgba(27, 26, 23, .10);
  --line-16: rgba(27, 26, 23, .16);
  --line-40: rgba(27, 26, 23, .40);

  --line-soft: var(--line-4);
  --line-2: var(--line-6);
  --line: var(--line-10);
  --line-strong: var(--line-16);
  --line-heavy: var(--line-40);

  /* подложки */
  --bg: #F2F0EA;
  --bg-2: #EDEBE6;
  /* Ступень СВЕТЛЕЕ бумаги: подложка блока, лежащего на белой карте. На белом
     фоне --bg читается как серое пятно, а полупрозрачный --surface-2 не виден
     вовсе (макет главной, 01.08). 01.08.5: тёплый бежевый (#F6F5F1) читался
     «грязновато» — пробовали лёгкий фиолетовый (#F3F1FB), но 01.08.6 владелец
     попросил именно «нежно-серый» вместо цветного оттенка — чистый, почти
     нейтральный светло-серый. */
  --bg-tint: #F1F0EF;
  --surface: rgba(255, 255, 255, .66);
  --surface-2: rgba(255, 255, 255, .42);
  --white: #FFFFFF;
  --black: #000000;

  /* Затемнения: наложение чёрного поверх подложки. Имя = прозрачность. */
  --shade-4: rgba(0, 0, 0, .04);
  --shade-9: rgba(0, 0, 0, .09);
  --shade-12: rgba(0, 0, 0, .12);
  --shade-22: rgba(0, 0, 0, .22);
  --shade-45: rgba(0, 0, 0, .45);

  /* ── Тени (CB-43) ──
     Пока это не шкала, а именование того, что уже повторяется в коде дословно.
     Сводить 35 разных теней в четыре ступени нельзя молча: это меняет вид всех
     приподнятых поверхностей разом, такое решение принимает владелец.
     Здесь только точные повторы — вид не меняется ни на пиксель. */
  --sh-focus: 0 0 0 4px rgba(79, 70, 229, .15);   /* ореол фокуса у полей */
  --sh-pop: 0 10px 30px -8px rgba(0, 0, 0, .45);  /* всплывающие панели */
  --sh-modal: 0 30px 80px -20px rgba(0, 0, 0, .4);/* карточка окна */
  --sh-card: 0 18px 30px -16px rgba(27, 26, 23, .28);
  --sh-soft: 0 14px 34px -18px rgba(0, 0, 0, .2);

  /* Стекло: наложение белого. */
  --glass-8: rgba(255, 255, 255, .08);
  --glass-14: rgba(255, 255, 255, .14);
  --glass-42: rgba(255, 255, 255, .42);
  --glass-60: rgba(255, 255, 255, .60);
  --glass-66: rgba(255, 255, 255, .66);
  --glass-80: rgba(255, 255, 255, .80);

  /* акцент — наш фиолетовый */
  --accent: #4F46E5;
  --accent-press: #3F37D6;
  /* Светлый конец градиента ключевой плашки: фиолетовый уходит от --accent к
     нему по диагонали. Отдельный токен, а не --accent-soft: тот заметно бледнее
     и нужен для приписок, а здесь разница с --accent должна быть еле слышной. */
  --accent-2: #6D66F0;
  --accent-soft: #8B84F0;
  --accent-on-dark: #B7B0FF;
  --accent-hi: #6a61ef;                      /* ховер на тёмном (телепромптер) */
  --accent-tint: rgba(79, 70, 229, .10);     /* мягкая подложка под акцент */
  --accent-line: rgba(79, 70, 229, .25);     /* обводка акцентной плашки */
  /* Тень под ключевой фиолетовой плашкой — единственное место, где тень
     разрешена (требование владельца к главной от 2026-07-30). */
  --accent-shadow: rgba(79, 70, 229, .60);
  --accent-glow: rgba(79, 70, 229, .55);     /* свечение вокруг активной реплики */

  /* Тёмная поверхность бокового меню кабинета (макет владельца 01.08). Светлее
     и теплее, чем экран пробы: меню стоит рядом с бумагой и белой картой, а не
     занимает весь экран, — угольно-чёрное пятно рядом с ними читалось бы дырой. */
  --surface-dark: #34363E;

  /* ── ДВИЖЕНИЕ ──────────────────────────────────────────────────────────────
     Пружина elastic.out(1, 0.5) из GSAP, набранная точками: 2^(-10t)·sin((t-0.125)·4π)+1.
     Живёт здесь, а не в стилях приложения, потому что кнопка заботы раскрывается
     ею на главной И в телепромптере — одна кнопка, одно движение. */
  --cb-elastic-in: linear(0,0.3512,0.7194,1,1.1575,1.2044,1.1768,1.1147,1.0496,1,0.9722,0.9639,0.9688,0.9797,0.9912,1,1.0049,1.0064,1.0055,1.0036,1.0016,1,0.9991,0.9989,1);

  /* ── тёмная поверхность телепромптера ──────────────────────────────────── */
  /* Экран пробы намеренно тёмный: актёр смотрит в него как в суфлёр. */
  --bg-dark: #1b1b1e;
  --on-dark: #f5f5f5;
  --on-dark-2: rgba(235, 235, 240, .55);
  --on-dark-3: rgba(235, 235, 240, .38);
  --on-dark-4: rgba(235, 235, 240, .22);

  /* ── СМЫСЛОВЫЕ ЦВЕТА ───────────────────────────────────────────────────────
     Значения Apple: у них две версии каждого цвета — для тёмных и светлых
     поверхностей, плюс контрастная для надписей. У нас тёмный экран (проба)
     и светлый (всё остальное), поэтому нужны обе.
     ═══════════════════════════════════════════════════════════════════════ */
  /* 29.07: #E5484D (мягче и теплее системного #FF3B30) был выбран, чтобы
     держаться тёплой стороны. 01.08.6: владелец пересмотрел — на бежевом эта
     мягкость читалась коричневатой, попросил ближе к алому (насыщенный
     красный, без розово-коричневого налёта). */
  --danger: #ff453a;             /* на тёмном (индикатор записи в пробе) */
  --danger-light: #E5342E;       /* на светлом */
  --danger-text: #D70015;        /* надписью на светлом: обычный красный не читается */
  --danger-soft: rgba(229, 52, 46, .10);
  --danger-tint: rgba(229, 52, 46, .16);

  --success: #30d158;
  --success-light: #34C759;
  --success-text: #248A3D;
  --success-soft: rgba(52, 199, 89, .12);

  --warning: #FF9F0A;
  --warning-light: #FF9500;
  --warning-text: #C93400;
  --warning-soft: rgba(255, 149, 0, .12);

  /* ── ДВИЖЕНИЕ ──────────────────────────────────────────────────────────── */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --dur-fast: .12s;
  --dur: .22s;
  --dur-slow: .42s;
}

/* ══════════════════════════════════════════════════════════════════════════
   СИСТЕМА 2 — ИНСТРУМЕНТЫ ВЛАДЕЛЬЦА (Apple HIG)
   Режим правки и админка. В продукте не используются.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  /* системные цвета Apple, светлая тема */
  --hig-blue: #007AFF;
  --hig-green: #34C759;
  --hig-orange: #FF9500;
  --hig-red: #FF3B30;
  --hig-purple: #AF52DE;

  /* текст */
  --hig-label: #000000;
  --hig-label-2: rgba(60, 60, 67, .60);
  --hig-label-3: rgba(60, 60, 67, .30);
  --hig-label-4: rgba(60, 60, 67, .18);

  /* подложки и разделители */
  --hig-bg: #F2F2F7;              /* systemGroupedBackground */
  --hig-bg-2: #FFFFFF;            /* secondarySystemGroupedBackground */
  --hig-bg-3: #F2F2F7;
  --hig-bg-dark: #1C1C1E;         /* тёмная колонка (боковое меню админки) */
  --hig-sep: rgba(60, 60, 67, .18);
  --hig-fill: rgba(118, 118, 128, .12);
  --hig-fill-2: rgba(118, 118, 128, .08);

  /* мягкие подложки статусов */
  --hig-blue-soft: rgba(0, 122, 255, .10);
  --hig-green-soft: rgba(52, 199, 89, .12);
  --hig-orange-soft: rgba(255, 149, 0, .12);
  --hig-red-soft: rgba(255, 59, 48, .10);

  /* Контрастные варианты для ТЕКСТА. Системные цвета Apple рассчитаны на заливки;
     как текст на белом они читаются плохо. Для надписей берём эти. */
  --hig-blue-text: #0040DD;
  --hig-blue-press: #0062CC;
  --hig-green-text: #248A3D;
  --hig-orange-text: #C93400;
  --hig-red-text: #D70015;

  /* плотная серая заливка (полосы таблиц, выделенные строки) */
  --hig-fill-solid: #E5E5EA;

  /* геометрия и тень */
  --hig-r: 10px;
  --hig-r-lg: 14px;
  --hig-shadow: 0 .5px 0 rgba(0, 0, 0, .04), 0 8px 30px rgba(0, 0, 0, .08);

  /* шрифт */
  --hig-font: -apple-system, "SF Pro Text", "SF Pro Display", "Helvetica Neue",
              Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --hig-blue: #0A84FF;
    --hig-green: #30D158;
    --hig-orange: #FF9F0A;
    --hig-red: #FF453A;
    --hig-purple: #BF5AF2;

    --hig-label: #FFFFFF;
    --hig-label-2: rgba(235, 235, 245, .60);
    --hig-label-3: rgba(235, 235, 245, .30);
    --hig-label-4: rgba(235, 235, 245, .18);

    --hig-bg: #000000;
    --hig-bg-2: #1C1C1E;
    --hig-bg-3: #2C2C2E;
    --hig-bg-dark: #000000;
    --hig-sep: rgba(84, 84, 88, .50);
    --hig-fill: rgba(118, 118, 128, .24);
    --hig-fill-2: rgba(118, 118, 128, .16);

    --hig-shadow: 0 .5px 0 rgba(255, 255, 255, .06), 0 8px 30px rgba(0, 0, 0, .5);

    --hig-blue-text: #409CFF;
    --hig-blue-press: #0A84FF;
    --hig-green-text: #30DB5B;
    --hig-orange-text: #FFB340;
    --hig-red-text: #FF6961;
    --hig-fill-solid: #2C2C2E;
  }
}