/* pish — токены дизайн-системы. Источник истины для лендинга и продукта.
   Откуда значения: макеты сцен landing/mocks/s1…s8 (обратное извлечение), сверка с мастер-кадрами
   и референсами — plans/landing-build-2026-10-15.md, § 9, шаг 6.1. Копия для сайта —
   site/assets/css/tokens.css (страж CI сверяет побайтно).
   Темы (18.10 владелец, вместо D17): светлая и тёмная для лендинга и продукта; выбор —
   data-theme="light|dark" на <html>, без атрибута — как в системе.
   Лист документа (--doc-*) тема интерфейса НЕ меняет: он белый всегда. Тёмным его делает
   отдельная кнопка — data-doc-theme="dark" на самом листе.
   Правило: вне этого файла в CSS нет #hex и px, кроме помеченных исключений. */

:root {
  color-scheme: light;
  /* ── 1. Базовая палитра (сырые значения; в компонентах не использовать напрямую) ── */
  --c-white: #ffffff;
  --c-mist-50: #f7f8f9;
  --c-mist-100: #f4f5f6;
  --c-mist-200: #eceef0;
  --c-mist-300: #e3e5e8;
  --c-mist-400: #cfd3d7;
  --c-ink-400: #9aa0a6;
  --c-ink-500: #636a72;
  --c-ink-600: #5a5f65;
  --c-ink-900: #1a1a1a;

  --c-orange-500: #e8502e;
  --c-orange-600: #d4431f;
  --c-orange-700: #b93c20;
  --c-teal-50: #e6efed;
  --c-teal-200: #bcd9d4;
  --c-teal-500: #1fa595;
  --c-teal-700: #13756a;
  --c-yellow-400: #f5d84a;
  --c-yellow-700: #c9a514;
  --c-oak-300: #d4ae80;
  /* тёплая подложка лендинга под ролики (замер кадров; решение владельца 18.10: «тёплая») */
  --c-sand-100: #f6f1eb;
  --c-sand-200: #f0e9e1;
  --c-sand-300: #e5ddd2;
  --c-sand-400: #d3c9bc;
  --c-red-600: #c0392b;
  --c-blue-600: #3b6fd8;
  /* для тёмной темы */
  --c-graphite-950: #141619;
  --c-graphite-925: #181a1e;
  --c-graphite-900: #1c1f23;
  --c-graphite-875: #1f2226;
  --c-graphite-850: #23272b;
  --c-graphite-700: #2d3237;
  --c-graphite-600: #40464d;
  --c-fog-500: #6e757d;
  --c-fog-400: #8d949c;
  --c-fog-300: #a9afb6;
  --c-paper-night-ink: #e6e3dc;
  --c-orange-400: #f6714f;
  --c-teal-300: #6fdcca;
  --c-teal-400: #34b8a7;
  --c-teal-800: #1d5650;
  --c-teal-900: #133733;
  --c-teal-950: #153c37;
  --c-red-400: #f2695c;
  --c-blue-400: #7398f5;

  /* ── 2. Смысловые цвета (их используют компоненты) ── */
  --bg: var(--c-mist-200);            /* подложка страницы и рабочего стола */
  --surface: var(--c-white);          /* бумага: карточки, листы, панели */
  --surface-sunken: var(--c-mist-100);/* поле ввода, утопленная зона */
  --surface-hover: var(--c-mist-50);
  --ink: var(--c-ink-900);            /* основной текст */
  --ink-2: var(--c-ink-600);          /* вторичный текст (AA на бумаге и подложке) */
  --ink-3: var(--c-ink-400);          /* только иконки, плейсхолдеры, выключенное: для текста не проходит AA */
  --ink-muted-text: var(--c-ink-500); /* третичный ТЕКСТ: AA на бумаге и подложке (5.5 / 4.7) */
  --line: var(--c-mist-300);          /* разделители, рамки */
  --line-strong: var(--c-mist-400);   /* рамка поля, граница кнопки-призрака */

  --action: var(--c-orange-500);      /* действие: главная кнопка, курсор, «запустить» */
  --action-ink: var(--c-ink-900);     /* текст на заливке действия мелким кеглем (AA 4.7) */
  --action-ink-large: var(--c-white); /* белый на действии — только крупный (≥ 19px полужирный, 3.7) */
  --action-text: var(--c-orange-700); /* оранжевый ТЕКСТ на бумаге и подложке (AA 5.6 / 4.8) */
  --action-edge: var(--c-orange-700); /* торец кнопки действия; белый текст на нём проходит AA (5.6) */
  --action-hover: var(--c-orange-600);
  /* кнопка действия — вариант «В» (решение владельца 18.10): белый на тёмном оранжевом, AA любым кеглем */
  --action-button: var(--c-orange-600);
  --action-button-ink: var(--c-white);

  --done: var(--c-teal-500);          /* готово, результат, источник */
  --done-ink: var(--c-ink-900);       /* текст на бирюзе (AA 5.7); белый не проходит (3.1) */
  --done-text: var(--c-teal-700);     /* бирюзовый текст на бумаге и подложке (AA 5.6 / 4.8) */
  --done-soft: var(--c-teal-50);      /* подложка «готово» */
  --done-soft-strong: var(--c-teal-200);

  --note: var(--c-yellow-400);        /* замечание, выделение-маркер */
  --note-ink: var(--c-ink-900);       /* текст на жёлтом (AA 12.3) */
  --note-edge: var(--c-yellow-700);

  --danger: var(--c-red-600);         /* ошибка, удаление, зачёркнутое */
  --link: var(--c-blue-600);          /* ссылка-источник ¶ в документе: только на бумаге (4.7), на подложке 4.1 */
  --oak: var(--c-oak-300);            /* только окружение лендинга и роликов, в интерфейсе нет */
  --focus: var(--c-teal-500);         /* кольцо фокуса */
  --ink-on-accent: var(--c-white);    /* белый текст на тёмных заливках */

  /* лист документа: область работы с текстом. Только сырые --c-*, чтобы тема интерфейса его не трогала */
  --doc-bg: var(--c-white);
  --doc-ink: var(--c-ink-900);
  --doc-ink-2: var(--c-ink-600);
  --doc-line: var(--c-mist-300);
  --doc-mark: var(--c-yellow-400);    /* выделение-маркер, замечание */
  --doc-mark-ink: var(--c-ink-900);
  --doc-ins-bg: var(--c-teal-50);     /* вставленное в правке */
  --doc-ins-ink: var(--c-teal-700);
  --doc-del: var(--c-red-600);        /* зачёркнутое */
  --doc-link: var(--c-blue-600);      /* ссылка-источник ¶ */
  --doc-scheme: light;

  /* ── 3. Шрифты ── */
  --font-ui: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Playfair Display", "Times New Roman", serif;  /* только лендинг (D20) */
  --font-doc: "Source Serif 4", Georgia, serif;                   /* текст документа в продукте */
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* шкала интерфейса (плотность рабочего инструмента) */
  --text-2xs: 11px;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-md: 15px;
  --text-lg: 17px;
  --text-xl: 20px;
  --text-2xl: 24px;
  /* шкала лендинга */
  --text-body: clamp(16px, 1.25vw, 18px);
  --display-sm: clamp(28px, 3vw, 40px);
  --display-md: clamp(32px, 3.6vw, 52px);
  --display-lg: clamp(40px, 6.2vw, 92px);

  --leading-tight: 1.04;
  --leading-snug: 1.15;
  --leading-base: 1.45;
  --leading-relaxed: 1.6;
  --tracking-display: -0.025em;
  --tracking-tight: -0.01em;
  --tracking-label: 0.08em;           /* mono-метки капсом */

  /* ── 4. Отступы: сетка 4/8 ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;
  --gutter: clamp(16px, 4vw, 56px);
  --content-max: 1240px;

  /* ── 5. Форма ── */
  /* 18.10 владелец: «скругления меньше» — вдвое против макетов (4/8/12/16) */
  --radius-xs: 2px;    /* метка, бейдж в строке, маркер */
  --radius-sm: 4px;    /* фишка: язык, ¶, таймкод */
  --radius-md: 6px;    /* кнопка, плашка, поле, строка файла */
  --radius-lg: 10px;   /* карточка, лист */
  --radius-pill: 999px;/* только тумблер, аватар, точка шага */
  --radius-control: var(--radius-md);
  --border-width: 1px;

  /* «цветной торец» вместо размытых теней: сплошной сдвиг цветом смысла */
  --edge-size: 5px;
  --edge-size-lg: 6px;
  --edge-action: var(--edge-size) var(--edge-size) 0 var(--action);
  --edge-done: var(--edge-size) var(--edge-size) 0 var(--done);
  --edge-note: var(--edge-size) var(--edge-size) 0 var(--note);
  --edge-ink: var(--edge-size) var(--edge-size) 0 var(--ink);
  --ring: 0 0 0 0 transparent;              /* контур карточки: в светлой не нужен, в тёмной — волосяная линия */
  --edge-button: 0 4px 0 var(--action-edge);   /* толщина кнопки действия, уходит при нажатии */
  /* мягкая контактная тень — только лендинг, в продукте не используется (D19) */
  --shadow-contact: 0 1px 0 rgb(26 26 26 / 0.05), 0 14px 32px -18px rgb(40 48 56 / 0.35);
  --focus-ring: 0 0 0 3px var(--surface), 0 0 0 5px var(--focus);

  /* ── 6. Движение (замер трёх референсов 18.10: трекинг и энергия кадров, 25 fps) ── */
  /* сцены лендинга: масштаб роликов */
  --stagger: 0.2s;          /* строки, ярлыки: медиана 0.18, IQR 0.15–0.28 */
  --stagger-layer: 0.1s;    /* слои стопки и веера: 0.08–0.17 */
  --stagger-lg: 0.56s;      /* крупные карточки: 0.55–0.56 */
  --dur-fast: 0.2s;         /* схлопывание, возврат */
  --dur-base: 0.65s;        /* подъём, посадка, полоса прогресса */
  --dur-slow: 1.25s;        /* раскрытие листа, рулон */
  --pause-group: 0.4s;      /* пауза между сериями: 0.3–0.8 */
  /* интерфейс продукта: те же пропорции, ×0.4 */
  --ui-stagger: 0.08s;
  --ui-dur-fast: 0.1s;
  --ui-dur-base: 0.26s;
  --ui-dur-slow: 0.5s;
  --dur-press: 0.09s;       /* нажатие: вниз */
  --dur-release: 0.26s;     /* нажатие: возврат */
  --press-depth: 3px;       /* 7 % высоты кнопки 44 */
  /* кривые: перелёта и пружины в референсах нет (откат ≤ 3 % пути) — back и spring не заводим */
  --ease-out: cubic-bezier(0, 0, 0.58, 1);            /* раскрытие, полоса */
  --ease-out-strong: cubic-bezier(0.1, 0.6, 0.75, 1); /* передний край, вылет */
  --ease-settle: cubic-bezier(0.215, 0.61, 0.355, 1); /* посадка на место */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);      /* камера, перекладка */

  /* ── 7. Слои ── */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-overlay: 1000;
  --z-toast: 1100;
}

/* ── 8. Тёмная тема интерфейса. Оба блока одинаковы: tools/design/tokens_json.py --check это сверяет ── */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--c-graphite-950);
  --surface: var(--c-graphite-900);
  --surface-sunken: var(--c-graphite-925);
  --surface-hover: var(--c-graphite-850);
  --ink: var(--c-mist-200);            /* 14.2 на бумаге */
  --ink-2: var(--c-fog-300);           /* 7.5 */
  --ink-3: var(--c-fog-500);           /* только знаки: 3.6 */
  --ink-muted-text: var(--c-fog-400);  /* 5.4 */
  --line: var(--c-graphite-700);
  --line-strong: var(--c-graphite-600);
  --action-text: var(--c-orange-400);  /* 5.8 на бумаге */
  --done-text: var(--c-teal-400);      /* 6.7 */
  --done-soft: var(--c-teal-900);
  --done-soft-strong: var(--c-teal-800);
  --danger: var(--c-red-400);          /* 5.5 */
  --link: var(--c-blue-400);           /* 5.9 */
  --focus: var(--c-teal-400);
  --shadow-contact: 0 1px 0 rgb(0 0 0 / 0.4), 0 14px 32px -18px rgb(0 0 0 / 0.7);
  --ring: inset 0 0 0 var(--border-width) var(--line);
  --edge-ink: var(--edge-size) var(--edge-size) 0 var(--c-fog-500);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: var(--c-graphite-950);
    --surface: var(--c-graphite-900);
    --surface-sunken: var(--c-graphite-925);
    --surface-hover: var(--c-graphite-850);
    --ink: var(--c-mist-200);            /* 14.2 на бумаге */
    --ink-2: var(--c-fog-300);           /* 7.5 */
    --ink-3: var(--c-fog-500);           /* только знаки: 3.6 */
    --ink-muted-text: var(--c-fog-400);  /* 5.4 */
    --line: var(--c-graphite-700);
    --line-strong: var(--c-graphite-600);
    --action-text: var(--c-orange-400);  /* 5.8 на бумаге */
    --done-text: var(--c-teal-400);      /* 6.7 */
    --done-soft: var(--c-teal-900);
    --done-soft-strong: var(--c-teal-800);
    --danger: var(--c-red-400);          /* 5.5 */
    --link: var(--c-blue-400);           /* 5.9 */
    --focus: var(--c-teal-400);
    --shadow-contact: 0 1px 0 rgb(0 0 0 / 0.4), 0 14px 32px -18px rgb(0 0 0 / 0.7);
    --ring: inset 0 0 0 var(--border-width) var(--line);
    --edge-ink: var(--edge-size) var(--edge-size) 0 var(--c-fog-500);
  }
}

/* ── 10. Тёплая подложка лендинга: data-stage="warm" на <html>, только в светлой теме; продукт — без неё ── */
:root[data-stage="warm"][data-theme="light"] {
  --bg: var(--c-sand-200);
  --surface-sunken: var(--c-sand-100);
  --line: var(--c-sand-300);
  --line-strong: var(--c-sand-400);
}

@media (prefers-color-scheme: light) {
  :root[data-stage="warm"]:not([data-theme="dark"]) {
    --bg: var(--c-sand-200);
    --surface-sunken: var(--c-sand-100);
    --line: var(--c-sand-300);
    --line-strong: var(--c-sand-400);
  }
}

/* ── 9. Тёмный лист документа: только по отдельной кнопке, не по теме ── */
[data-doc-theme="dark"] {
  --doc-bg: var(--c-graphite-875);
  --doc-ink: var(--c-paper-night-ink); /* 12.5 */
  --doc-ink-2: var(--c-fog-300);       /* 7.2 */
  --doc-line: var(--c-graphite-700);
  --doc-ins-bg: var(--c-teal-950);
  --doc-ins-ink: var(--c-teal-300);    /* 7.4 на подложке вставки */
  --doc-del: var(--c-red-400);
  --doc-link: var(--c-blue-400);
  --doc-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --stagger: 0s;
    --stagger-layer: 0s;
    --stagger-lg: 0s;
    --dur-fast: 0.01s;
    --dur-base: 0.01s;
    --dur-slow: 0.01s;
    --pause-group: 0s;
    --ui-stagger: 0s;
    --ui-dur-fast: 0.01s;
    --ui-dur-base: 0.01s;
    --ui-dur-slow: 0.01s;
    --press-depth: 0px;
  }
}