/* ---------- Токены цвета HR-3S: палитра и роли ----------
   Подключается ПЕРВЫМ, до app.css и learn.css, во всех шаблонах с app.css и в project.html.
   План: docs/DESIGN-IDS-PLAN.md, раздел 2.

   Два слоя:
     1. палитра --c-*: сырые значения, больше нигде в CSS цветов быть не должно
        (исключения: цвета локаций — в базе, цвета браслетов в лонгридах — предметные, логотип);
     2. роли (--bg, --surface, --ink, --accent, --success…): только их используют компоненты.
   Сейчас роли и шкалы держат прежние значения классики.
   Тема IDS (этапы 4–6) переопределит значения ролей под :root[data-ui="ids"] в ids.css, компоненты не трогаем.

   Старые имена (--key, --sand, --line…) — псевдонимы ролей до этапа 7.
   Оставшиеся в app.css/learn.css var(--key…), var(--peach…) с пометкой «IDS: …» — места,
   где роль в IDS другая, чем в классике (прогресс, категории, аватар, кнопки): их переведут на этапах 3 и 6.

   Селекторы плоские: вложенного CSS нет в старых WebView Telegram (iOS < 17.2). */

:root{
  /* ---------- 0. Размер текста ----------
     --fs-k — множитель кегля и высот контролов. Выбор человека: <html data-fs="m|l|xl"> — «Обычный», «Крупный», «Очень крупный»
     (сервер из users.font_scale — app/theme.py и _ui_attrs.html; у гостя — head-скрипт _ui_head.html из localStorage;
     кнопка «Аа» и выбор на главной — app/static/fontsize.js). docs/DESIGN.md, «Размер шрифта». */
  --fs-k:1;

  /* ---------- 1. Палитра ---------- */
  --c-white:#ffffff;
  --c-black:0 0 0;          /* для rgb(var(--c-black) / a) */
  --c-cream:#f9f7f3;        /* тёплый фон сайта */
  --c-cream-2:#faf8f5;      /* тише белого: прошедшее, чужой месяц, наведение на белом */
  --c-sand-100:#f3ece4;     /* песок: подложка меню на сайте, заливка */
  --c-tan-200:#ecd9c8;      /* песок сильнее: трек прогресса, попытки */
  --c-linen:#ded3c8;        /* линии: рамки полей и плашек */
  --c-khaki:192 186 172;    /* тонкие линии: rgb(var(--c-khaki) / a) */
  --c-umber:59 39 22;       /* тёплый тёмный: тени и подложка диалога */
  --c-card:#f3f0eb;         /* бронь на сетке */
  --c-card-2:#eae4db;       /* своя бронь */
  --c-stone-300:#8a8279;    /* приглушённый текст, значки */
  --c-stone-700:#4d4b43;    /* вторичный текст */
  --c-stone-900:#1b1b1b;    /* основной текст */
  --c-green-50:#e4efea;
  --c-green-100:#cfe3d9;
  --c-green-700:#086048;    /* фирменный зелёный */
  --c-green-800:#084937;
  --c-peach-100:#ffecd1;    /* логотип, кнопки сайта, прогресс видео */
  --c-peach-200:#f9dfbb;
  --c-red-50:#fbe9e7;
  --c-red-600:#c8281e;
  --c-signal:#ff0c0c;       /* только «сейчас» в календаре */

  /* ---------- 2. Роли ---------- */
  --bg:var(--c-cream);                  /* фон страниц */
  --surface:var(--c-white);             /* карточки, списки, сетка календаря, диалоги, поля, шапки */
  --surface-2:var(--c-cream-2);         /* тихое состояние на белом: наведение строки, прошедший день, чужой месяц */
  --fill:var(--c-sand-100);             /* заливка: сегмент, чипы, метки, врезки, кнопки-плашки */
  --fill-2:var(--c-tan-200);            /* заливка сильнее: трек прогресса, попытки */
  --hairline:rgb(var(--c-khaki) / .4);         /* разделители строк, рамки карточек */
  --hairline-faint:rgb(var(--c-khaki) / .22);  /* часовые линии календаря */
  --border:var(--c-linen);              /* декоративная рамка плашки на белом */
  --border-strong:var(--c-linen);       /* поля, чекбоксы, пустой статус — всё, что должно читаться как поле (в IDS 3:1) */
  --ink:var(--c-stone-900);
  --ink-2:var(--c-stone-700);
  --ink-3:var(--c-stone-300);           /* приглушённый текст */
  --ink-disabled:var(--c-stone-300);
  --icon:var(--c-stone-300);            /* значки и шевроны, не текст */
  --accent:var(--c-green-700);          /* действие: кнопки, ссылки, выбранное, текущее, фокус */
  --accent-hover:var(--c-green-800);
  --accent-press:var(--c-green-800);
  --accent-tint:var(--c-green-50);      /* выбранное, наведение на ссылку-плашку */
  --accent-tint-2:var(--c-green-100);
  --focus:var(--c-green-700);
  --focus-ring:var(--c-green-50);       /* кольцо фокуса поля */
  --on-color:var(--c-white);            /* текст на насыщенной заливке */
  --emphasis:var(--c-green-700);        /* голос лонгридов и цифры: номера шагов, маркеры, итоговая линия */
  --emphasis-tint:var(--c-green-50);
  --attention:var(--c-green-700);       /* «Важно», «Правило» в лонгридах */
  --success:var(--c-green-700);         /* пройдено, сдан, сохранено */
  --success-tint:var(--c-green-50);
  --warning:var(--c-red-600);           /* обязательная встреча, «скоро срок» */
  --warning-tint:var(--c-red-50);
  --danger:var(--c-red-600);            /* ошибка, просрочка, удаление */
  --danger-tint:var(--c-red-50);
  --event:var(--c-green-700);           /* мероприятие в календаре */
  --event-tint:var(--c-green-50);
  --event-tint-2:var(--c-green-100);
  --weekend:var(--c-red-600);           /* выходные в календаре */
  --now:var(--c-signal);                /* линия «сейчас» */
  --bk:var(--c-card);                   /* брони на белой сетке: чужие / свои / прошедшие */
  --bk-mine:var(--c-card-2);
  --bk-past:var(--c-card);
  --mark:var(--c-peach-100);            /* подсветка найденного */
  --backdrop:rgb(var(--c-umber) / .35); /* подложка под диалогом; в ::backdrop — с запасным литералом */
  /* цвета шапки и фона Telegram: JS читает их хелпером tgColor. Не --tg-*: этот префикс пишет SDK Telegram */
  --shell-header:var(--c-white);
  --shell-bg:var(--c-cream);

  /* ---------- Тени ---------- */
  --shadow-1:0 1px 2px rgb(var(--c-black) / .08);      /* поднятый сегмент */
  --shadow-2:0 8px 30px rgb(var(--c-umber) / .12);     /* всплывающее: меню, подсказки, диалог, тост */
  --shadow-3:0 -8px 30px rgb(var(--c-umber) / .18);    /* шторка снизу */
  --shadow-card:0 2px 10px rgb(var(--c-umber) / .05);  /* карточка на фоне (в IDS — без тени) */
  --shadow-bar:0 -8px 30px rgb(var(--c-umber) / .08);  /* нижняя панель действий */
  --shadow-fab:0 6px 20px rgb(var(--c-umber) / .28);   /* плавающая кнопка */

  /* ---------- 3. Шкалы (этап 5) ----------
     Значения — прежние числа классики: токен стоит там, где число не изменилось (кегль и радиус — не больше чем на 1 px).
     Места, где классика держит своё число, а в IDS — токен, собраны в ids.css, раздел 6 (кнопки 38 → 40, диалог 14 → 16…).
     Решения IDS (16 px на телефоне, высота 44 на телефоне, угасание наведения 0,5 с, кольцо фокуса) — только в ids.css. */
  /* кегль: 10 ступеней вместо 24 размеров (план 3.2); значки, стрелки и эмодзи — не текст, в шкалу не входят.
     Каждая ступень умножается на --fs-k — размер текста, который выбрал человек (раздел «Размер шрифта» ниже) */
  --fs-3xs:calc(10px * var(--fs-k));   /* коды в кружках, получасовые метки оси */
  --fs-2xs:calc(12px * var(--fs-k));   /* надзаголовки, метки, бейджи, шапки таблиц, дни недели */
  --fs-xs:calc(13px * var(--fs-k));    /* мета строк, подписи, подсказки */
  --fs-s:calc(14px * var(--fs-k));     /* вторичный текст, таблицы, компактные кнопки */
  --fs-m:calc(15px * var(--fs-k));     /* основной текст, кнопки, названия строк (в IDS на телефоне 16) */
  --fs-l:calc(17px * var(--fs-k));     /* заголовок карточки и раздела меню */
  --fs-xl:calc(20px * var(--fs-k));    /* заголовок страницы на телефоне, секции, вопрос теста */
  --fs-2xl:calc(24px * var(--fs-k));   /* заголовок страницы */
  --fs-3xl:calc(28px * var(--fs-k));   /* цифры статистики */
  --fs-4xl:calc(44px * var(--fs-k));   /* результат теста */
  --fs-prose:calc(16px * var(--fs-k)); /* тексты для чтения: лонгрид (в IDS — clamp 16→19 px) */
  --fs-field:calc(16px * var(--fs-k)); /* поиск и поля на телефоне: с 16 px iOS не увеличивает страницу при фокусе (в IDS — --fs-m) */
  /* отступы и гэпы: IDS 8/16/24 — это --space-xs/m/l. Числа вне шкалы (6, 10, 14, 18…) пока остаются числами:
     округление сдвинуло бы классику на 2 px и больше — это решение темы (этапы 6–7) */
  --space-3xs:2px; --space-2xs:4px; --space-xs:8px; --space-s:12px; --space-m:16px;
  --space-l:24px; --space-xl:32px; --space-2xl:48px; --space-3xl:64px;
  /* радиусы */
  --r-xs:4px;      /* сегмент внутри трека, чекбокс теста, mark */
  --r-s:6px;       /* кнопки, поля, значки типов, пункты меню */
  --r-m:10px;      /* карточки, плашки, меню, тосты */
  --r-l:16px;      /* шторка снизу (в классике диалог на десктопе — 14, в IDS — 16) */
  --r-pill:999px;  /* метки, чипы, бейджи, FAB */
  /* высоты контролов: растут вместе с текстом (--fs-k) — кнопка, поле и цель нажатия не теснее надписи */
  --h-xs:calc(28px * var(--fs-k));     /* мини-кнопки в строках */
  --h-s:calc(32px * var(--fs-k));      /* сегменты, компактные кнопки, кнопки-иконки */
  --h-m:calc(40px * var(--fs-k));      /* поля, селекты, датапикер, поиск (в IDS на телефоне 44) */
  --h-l:calc(48px * var(--fs-k));      /* FAB, нижняя кнопка действия */
  --bw-s:1px; --bw-m:2px;  /* линии: рамки и разделители / фокус и подчёркивание вкладки */
  /* движение: в классике наведение загорается и гаснет за 0,15 с; в IDS — 0 и 0,5 с (ids.css) */
  --dur-instant:0s; --dur-fast:.1s; --dur-out:.15s; --ease:ease;
  /* слои */
  --z-fab:15; --z-sticky:20; --z-pop:30; --z-toast:50;
  --shadow-focus:0 0 0 3px var(--focus-ring);   /* кольцо фокуса поля */

  /* ---------- Псевдонимы старых имён (до этапа 7) ---------- */
  --radius:var(--r-m);
  --radius-sm:var(--r-s);
  --sand:var(--fill);
  --sand-2:var(--fill-2);
  --line:var(--border);
  --line-soft:var(--hairline);
  --line-faint:var(--hairline-faint);
  --card:var(--bk);
  --card-mine:var(--bk-mine);
  --key:var(--accent);
  --key-hover:var(--accent-hover);
  --key-tint:var(--accent-tint);
  --key-tint-2:var(--accent-tint-2);
  --peach:var(--c-peach-100);
  --peach-hover:var(--c-peach-200);
  --shadow:var(--shadow-2);
}
@media (max-width:700px){
  :root{--backdrop:rgb(var(--c-umber) / .45)}  /* шторка на телефоне — подложка плотнее */
}
/* «Крупный» и «Очень крупный»: основной текст 15 → 17 и 19,5 px, подписи 13 → 15 и 17 px (docs/DESIGN.md, «Размер шрифта») */
:root[data-fs="l"]{--fs-k:1.15}
:root[data-fs="xl"]{--fs-k:1.3}