/*
 * Peremen — токены дизайн-системы.
 * Структура и имена — PEREMEN-CLAUDE-BRIEF.md, раздел 6. Палитра — выбор владельца
 * (29.10.2026): белоснежный фон и тёмно-синий акцент. Дополнения к брифу помечены «добавлено».
 * Фон и поверхность в светлой теме оба белые: карточки отделяются тонкой линией --p-line
 * и вторым фоном --p-secondary-bg (поля, нижняя навигация), а не тенью.
 *
 * ЕДИНСТВЕННОЕ место, где задаются цвета. app.css, компоненты и JS используют только
 * переменные --p-*; чтобы сменить палитру, достаточно поменять значения в этом файле
 * (в трёх блоках: светлая тема, тёмная тема, тёмная тема до запуска JS) и перезапустить
 * tools/check-contrast.mjs. Роли: --p-brand — акцент (знак, мелкие элементы идентичности),
 * --p-action — основное действие (в Telegram берётся из темы клиента).
 *
 * Порядок приоритета: тема Telegram (--tg-theme-*) → фирменные запасные значения.
 * telegram.js выставляет --tg-theme-* из themeParams и, если пара цветов Telegram
 * не проходит проверку контраста, переопределяет --p-muted / --p-link / --p-action локально.
 */

:root {
  color-scheme: light;
  --p-fallback-bg: #ffffff;
  --p-fallback-surface: #ffffff;
  --p-fallback-secondary-bg: #f5f7fb;
  --p-fallback-text: #0f1b2d;
  --p-fallback-muted: #566278;
  --p-fallback-line: #e2e7ef;
  --p-control-border: #7a8699;
  --p-brand: #1e3a8a;
  --p-on-brand: #ffffff;
  --p-brand-soft: #ebf0fa;
  --p-danger: #b42318;
  --p-overlay-shadow: 0 12px 36px rgb(15 27 45 / 12%);

  --p-bg: var(--tg-theme-bg-color, var(--p-fallback-bg));
  --p-surface: var(--tg-theme-section-bg-color, var(--p-fallback-surface));
  --p-secondary-bg: var(--tg-theme-secondary-bg-color, var(--p-fallback-secondary-bg));
  --p-text: var(--tg-theme-text-color, var(--p-fallback-text));
  --p-muted: var(--tg-theme-hint-color, var(--p-fallback-muted));
  --p-line: var(--tg-theme-section-separator-color, var(--p-fallback-line));
  --p-action: var(--tg-theme-button-color, var(--p-brand));
  --p-on-action: var(--tg-theme-button-text-color, var(--p-on-brand));
  --p-link: var(--tg-theme-link-color, var(--p-brand));
  --p-focus: var(--p-action);

  /* Шрифты — выбор владельца (29.10.2026), самохостинг в fonts/ (styles/fonts.css), лицензия OFL. */
  --p-font: "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --p-font-head: "Caveat", "Onest", cursive;
  --p-text-xs: .75rem;
  --p-text-sm: .875rem;
  --p-text-base: 1rem;
  --p-text-lg: 1.125rem;
  --p-title-sm: 1.5rem;
  --p-title-lg: 1.75rem;
  --p-weight-regular: 400;
  --p-weight-medium: 500;
  --p-weight-strong: 600;
  --p-leading-body: 1.55;
  --p-leading-title: 1.2;
  /* Добавлено: Caveat визуально мельче — заголовок экрана 34 px, плотный интерлиньяж. */
  --p-title-head: 2.125rem;
  --p-title-head-long: 1.75rem;
  --p-brand-word: 1.75rem;
  --p-leading-head: 1.1;

  --p-space-1: .25rem;
  --p-space-2: .5rem;
  --p-space-3: .75rem;
  --p-space-4: 1rem;
  --p-space-5: 1.25rem;
  --p-space-6: 1.5rem;
  --p-space-8: 2rem;
  --p-space-12: 3rem;
  --p-radius-control: .75rem;
  --p-radius-card: 1rem;
  --p-radius-sheet: 1.5rem;
  --p-content-max: 40rem;
  --p-page-gutter: 1.25rem;
  --p-target-min: 2.75rem;
  --p-duration-fast: 140ms;
  --p-duration-normal: 180ms;
  --p-ease: cubic-bezier(.2, .7, .3, 1);

  /* Значения заполняет адаптер SDK после проверки доступности. */
  --p-safe-top: env(safe-area-inset-top, 0px);
  --p-safe-bottom: env(safe-area-inset-bottom, 0px);
  --p-content-safe-top: 0px;
  --p-content-safe-bottom: 0px;

  /* Добавлено: боковые safe area — в альбомной ориентации вырез экрана сбоку. */
  --p-safe-left: env(safe-area-inset-left, 0px);
  --p-safe-right: env(safe-area-inset-right, 0px);
  --p-content-safe-left: 0px;
  --p-content-safe-right: 0px;

  /* Добавлено: второй фон (поля ввода, нижняя навигация, полосы) — структура без теней. */
  /* --p-fallback-secondary-bg задан в блоках тем выше и ниже. */

  /* Добавлено: нейтральная дорожка шкалы бюджета — факт без оценочного цвета. */
  --p-track: var(--p-brand-soft);
  /* Добавлено: неподвижный placeholder загрузки — без мерцания и «дыхания». */
  --p-placeholder: var(--p-line);

  /* Добавлено: производные оттенки состояний. Все цвета интерфейса живут только в этом файле. */
  --p-row-hover: color-mix(in srgb, var(--p-text) 4%, var(--p-surface));
  --p-action-hover: color-mix(in srgb, var(--p-action) 88%, var(--p-text));
  --p-control-hover: color-mix(in srgb, var(--p-text) 5%, var(--p-surface));
  --p-quiet-hover: color-mix(in srgb, var(--p-link) 8%, transparent);
  --p-error-border: color-mix(in srgb, var(--p-danger) 45%, var(--p-line));
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --p-fallback-bg: #0b1220;
  --p-fallback-surface: #131c2e;
  --p-fallback-secondary-bg: #0f1727;
  --p-fallback-text: #eaf0f8;
  --p-fallback-muted: #a7b2c4;
  --p-fallback-line: #26324a;
  --p-control-border: #6f7d95;
  --p-brand: #9db8ff;
  --p-on-brand: #0b1a3a;
  --p-brand-soft: #1c2a47;
  --p-danger: #ffb4a9;
  --p-overlay-shadow: 0 12px 36px rgb(0 0 0 / 28%);
}

/*
 * Добавлено: тёмная тема до запуска JS (нет data-theme) — без вспышки светлого экрана ночью.
 * Значения дублируют блок выше; при изменении палитры менять оба места.
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --p-fallback-bg: #0b1220;
    --p-fallback-surface: #131c2e;
    --p-fallback-secondary-bg: #0f1727;
    --p-fallback-text: #eaf0f8;
    --p-fallback-muted: #a7b2c4;
    --p-fallback-line: #26324a;
    --p-control-border: #6f7d95;
    --p-brand: #9db8ff;
    --p-on-brand: #0b1a3a;
    --p-brand-soft: #1c2a47;
    --p-danger: #ffb4a9;
    --p-overlay-shadow: 0 12px 36px rgb(0 0 0 / 28%);
  }
}

@media (max-width: 360px) {
  :root { --p-page-gutter: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --p-duration-fast: 0ms; --p-duration-normal: 0ms; }
}