/* tokens.css — единый источник дизайн-токенов CampSpace.
   Канон: docs/DESIGN_TOKENS_BIRCH.md. Не редактировать значения здесь без
   синхронизации с этим документом — он источник правды, это файл-подключение. */

/* Слой микроанимаций. Подключён здесь, а не 26 отдельными <link> в каждом экране:
   tokens.css уже импортируют все экраны, поэтому единственная строка даёт общую
   планку движения всему CampSpace и не требует правки HTML. Идёт ПЕРВЫМ — значит
   любой экран может перекрыть его своим <style> без !important.
   Канон: ANIMATION_GUIDELINES.md. */
@import url("css/motion.css");

/* Self-hosted шрифты (Birch v2.1, task_20260908_115104). Раньше 25 файлов
   web/*.html грузили Google Fonts <link> напрямую (внешний CDN — недопустимо
   для гос-сектора/закрытого контура, см. docs/DESIGN_GOV_SECTOR_COMPLIANCE_v1.md).
   Подключено здесь одной строкой по тому же принципу, что и motion.css выше —
   не нужно трогать HTML каждого экрана снова при следующей смене шрифта. */
@import url("css/fonts-local.css");

:root {
  /* Схема для нативных элементов браузера (скроллбары, чекбоксы, date-picker).
     Без неё системный chrome остаётся светлым посреди тёмной темы. */
  color-scheme: light;

  /* Поверхности */
  --bg:          #f5f2ec;   /* тёплый cream — главный фон */
  --bg-card:     #ffffff;
  --bg-card-2:   #fdf9f4;
  --bg-glass:    rgba(255,255,255,0.72);
  --bg-sidebar:  #1a2f20;   /* глубокий лесной зелёный */
  --bg-sidebar-2:#243828;
  --bg-input:    #f0ece3;

  /* Текст */
  --text:        #1c1a16;   /* тёплый почти-чёрный */
  --text-dim:    #6b6458;
  --text-ghost:  #b0a898;
  --text-inv:    #f5f2ec;   /* на тёмном фоне (sidebar) */
  --text-inv-dim:#9bb89f;

  /* Акценты */
  --green:       #1a6e3a;   /* основной — доверие, природа */
  --green-light: #e8f4ed;
  --green-mid:   #4d9e6b;
  --amber:       #c07a28;   /* тепло, энергия, CTA */
  --amber-light: #fef3e2;
  --amber-mid:   #e8962e;
  --rose:        #b53f3f;   /* опасность/ошибка — мягче red; затемнён для AA-мелкого текста (task f6d7ab): rose/rose-light 4.84, text-inv/rose 5.02 */
  --rose-light:  #fdeaea;
  --sky:         #2d6b9f;   /* информация */
  --sky-light:   #e8f3fc;
  --ok:          #36a06b;

  /* Границы */
  --line:        rgba(28,26,22,0.10);
  --line-mid:    rgba(28,26,22,0.16);
  --line-sidebar:rgba(255,255,255,0.10);
  --line-inv:    rgba(255,255,255,0.10);

  /* --- Семантика, введённая под тёмную тему (task_20260907_162457) ---
     Эти токены существуют ровно потому, что без них соответствующие места
     вёрстки НЕ МОГУТ переключиться: там стоял литерал. См. аудит
     scripts/audit_hardcoded_colors_162457.py — класс BARE. */

  /* Текст/иконка ПОВЕРХ цветной заливки (кнопка --green, бейдж --rose).
     В светлой теме заливка тёмная → белый. В тёмной заливка светлая → тёмный.
     Это причина, по которой `color:#fff` на .btn-primary — дефект, а не стиль. */
  --on-accent:   #ffffff;

  /* Текст на АМБЕРНОЙ заливке. Отдельный токен нужен потому, что амбер —
     единственный бренд-цвет, который светлый в ОБЕИХ темах (#c07a28 / #e8a552),
     и универсальный --on-accent там не работает: в светлой теме он белый и даёт
     3.47 — известный унаследованный долг Н-2. Тёмные чернила дают 5.01 (light)
     и 8.74 (dark), то есть AA проходит уже в обеих. */
  --on-amber:    #1c1a16;

  /* Затемнение под модалкой/шторкой (было rgba(0,0,0,.5..6) россыпью). */
  --overlay:     rgba(28,26,22,0.55);

  /* Базовый «чернильный» цвет для НЕтиповых теней, которые нельзя свести к
     --shadow-*. Отдельный токен нужен потому, что тень — единственная краска,
     которая в тёмной теме должна стать ЧЕРНЕЕ, а не светлее: свести её к --text
     значило бы получить светящийся ореол вместо тени (в dark --text ≈ #ece9e0).
     Применение: color-mix(in srgb, var(--shadow-ink) 12%, transparent). */
  --shadow-ink:  #1c1a16;

  /* Полупрозрачные подложки статусных тегов и подсветок строк. В тёмной теме
     тот же приём не работает: тень цвета на тёмном фоне читается иначе, поэтому
     значения там подобраны отдельно, а не «та же альфа». */
  --tint-green:  rgba(26,110,58,0.10);
  --tint-amber:  rgba(192,122,40,0.12);
  --tint-rose:   rgba(181,63,63,0.12);
  --tint-sky:    rgba(45,107,159,0.10);
  --tint-neutral:rgba(28,26,22,0.06);
  /* «-strong» — та же семантика, но плотнее: рамка тега, свечение, кольцо
     вокруг иконки. Отдельные токены, а не «та же альфа побольше», потому что в
     тёмной теме подложка и рамка расходятся не пропорционально. */
  --tint-green-strong: rgba(26,110,58,0.22);
  --tint-amber-strong: rgba(192,122,40,0.22);
  --tint-rose-strong:  rgba(181,63,63,0.22);
  --tint-sky-strong:   rgba(45,107,159,0.22);
  --row-stripe:  rgba(28,26,22,0.02);   /* зебра таблицы */
  --row-hover:   rgba(28,26,22,0.045);  /* tr:hover */
  --hover-inv:   rgba(255,255,255,0.04);/* hover на тёмной поверхности (сайдбар) */
  --green-hover: #155e31;               /* :hover заливки primary-кнопки */

  /* Категориальная палитра — для рядов, у которых НЕТ статусного смысла
     (пол ребёнка на схеме расселения, аватары, серии графиков). Раньше это были
     литералы #5b8def/#40a9ff/#c084fc — в тёмной теме они остались бы теми же
     насыщенными и «выпали» бы из палитры. Подобраны так, чтобы поверх них
     читался --on-accent (проверяется скриптом контраста). */
  --cat-blue:    #2f6fb5;
  --cat-violet:  #7b46ad;

  /* Кольцо фокуса/свечение (было rgba(192,122,40,.3x) в 20+ местах). */
  --focus-ring:  rgba(192,122,40,0.35);

  /* Цвет плитки браузера/статус-бара PWA — <meta name="theme-color">.
     JS-модуль темы синхронизирует meta с этим значением при переключении. */
  --theme-color: #f5f2ec;

  /* Типографика — Birch v2.1 (task_20260908_115104, ждёт финального
     подтверждения владельца, см. docs/DESIGN_TOKENS_BIRCH.md «Ревизия v2.1»).
     Outfit/Plus Jakarta Sans (v2.0) заменены: у Outfit НЕТ кириллицы вообще,
     у Plus Jakarta Sans есть только cyrillic-ext (редкие доп. буквы, НЕ
     русский алфавит) — весь русский текст проекта рендерился системным
     фолбэком, а не «утверждённым» шрифтом, с момента принятия v2.0. Rubik —
     геометричный, скруглённый, ближайший по характеру аналог Outfit — с
     полной кириллицей. Manrope — тёплый гуманистический, тот же принцип, что
     Plus Jakarta Sans, тоже с полной кириллицей (и уже был телом шрифта v1). */
  --disp:  'Rubik', sans-serif;              /* заголовки, логотип */
  --body:  'Manrope', sans-serif;            /* основной текст */
  --mono:  'JetBrains Mono', monospace; /* код, моноширинные данные */

  /* Геометрия */
  --r:     14px;   /* основной радиус карточек/инпутов */
  --r-sm:  8px;    /* кнопки, бейджи, nav-элементы */
  --r-lg:  20px;   /* крупные контейнеры */
  --r-xl:  28px;   /* login-card, modal */

  /* Тени */
  --shadow-sm:  0 1px 3px rgba(28,26,22,0.06), 0 1px 2px rgba(28,26,22,0.04);
  --shadow:     0 4px 16px rgba(28,26,22,0.08), 0 1px 4px rgba(28,26,22,0.06);
  --shadow-lg:  0 12px 40px rgba(28,26,22,0.12), 0 4px 12px rgba(28,26,22,0.08);
  --shadow-xl:  0 24px 64px rgba(28,26,22,0.16), 0 8px 24px rgba(28,26,22,0.10);

  /* Motion: кривые + длительности.
     Имена намеренно совпадают с family-calendar/web/tokens.css — общий
     css/motion.css опирается только на них, а значения у каждой темы свои. */
  --spring:     cubic-bezier(0.34, 1.56, 0.64, 1); /* overshoot — для hover/появления */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);     /* плавный выезд */
  --ease-in:    cubic-bezier(0.4, 0, 1, 1);         /* ускорение */
  --dur-fast:   0.16s;  /* реакция на палец: hover/active/фокус */
  --dur:        0.28s;  /* основная: модалки, тосты, смена экрана */
  --dur-slow:   0.6s;   /* крупные/декоративные: ripple, reveal */

  /* Z-шкала — семантическая, чтобы не плодить z-index:9999 по экранам. */
  --z-base: 0; --z-dropdown: 100; --z-sticky: 200; --z-backdrop: 300;
  --z-modal: 400; --z-toast: 500; --z-tooltip: 600;

  /* Layout */
  --sidebar-w:  240px;
  --topbar-h:   60px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ТЁМНАЯ ТЕМА (task_20260907_162457)

   Переопределяются ТОЛЬКО значения цветов. Геометрия, типографика, motion и
   z-шкала общие — по требованию владельца «макет остаётся тем же, меняется
   только палитра».

   Как включается. Атрибут на корневом элементе: <html data-theme="dark">.
   Ставит его web/js/theme_switch.js — СИНХРОННО, из <head>, до первой отрисовки
   (иначе страница мигнёт светлым). Значение "system" в localStorage означает
   «следовать prefers-color-scheme»; модуль разрешает его в конкретный dark/light
   и слушает смену системной темы на лету. Намеренно НЕТ дублирующего
   `@media (prefers-color-scheme: dark)` блока: он потребовал бы держать копию
   всех 40 значений и расходиться с ней при первой же правке.

   Контраст. Каждое значение ниже проверено по WCAG 2.1, а не подобрано на глаз:
       python3 scripts/check_theme_contrast_162457.py --theme dark
   Порог 4.5 для текста, 3.0 для не-текста (рамки, кольца фокуса).
   Ключевая асимметрия с Birch: акценты в тёмной теме ОСВЕТЛЯЮТСЯ (#1a6e3a даёт
   к тёмному фону 2.1 — нечитаемо), а подложки тегов, наоборот, затемняются.
   ═══════════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  color-scheme: dark;

  /* Поверхности — тёплый нейтральный тёмный (не сине-чёрный: Birch тёплая) */
  --bg:          #14150f;
  --bg-card:     #1c1e17;
  --bg-card-2:   #22251c;
  --bg-glass:    rgba(28,30,23,0.78);
  --bg-sidebar:  #0f1a12;   /* тот же лесной зелёный, глубже */
  --bg-sidebar-2:#16261a;
  --bg-input:    #262a20;

  /* Текст */
  --text:        #ece9e0;
  --text-dim:    #a8a294;
  --text-ghost:  #7b7568;
  --text-inv:    #ece9e0;   /* сайдбар в тёмной теме тоже тёмный */
  --text-inv-dim:#9bb89f;

  /* Акценты — осветлены под тёмный фон */
  --green:       #6cc98d;
  --green-light: #16281c;   /* подложка ok-тега */
  --green-mid:   #4ea973;
  --amber:       #e8a552;
  --amber-light: #2c2314;
  --amber-mid:   #c9862f;
  --rose:        #f08d84;
  --rose-light:  #2f1a18;
  --sky:         #7ab9ea;
  --sky-light:   #16232e;
  --ok:          #5fc78f;

  /* Границы — светлые с малой альфой */
  --line:        rgba(236,233,224,0.12);
  --line-mid:    rgba(236,233,224,0.20);
  --line-sidebar:rgba(255,255,255,0.10);
  --line-inv:    rgba(255,255,255,0.10);

  /* Семантика (см. одноимённый блок в :root) */
  --on-accent:   #10150f;   /* тёмный текст на СВЕТЛОЙ заливке акцента */
  --on-amber:    #10150f;   /* амбер светлый и здесь — чернила те же, см. :root */
  --overlay:     rgba(0,0,0,0.66);
  --shadow-ink:  #000000;   /* тень в тёмной теме — чистый чёрный, см. :root */
  --tint-green:  rgba(108,201,141,0.14);
  --tint-amber:  rgba(232,165,82,0.14);
  --tint-rose:   rgba(240,141,132,0.14);
  --tint-sky:    rgba(122,185,234,0.13);
  --tint-neutral:rgba(236,233,224,0.07);
  --tint-green-strong: rgba(108,201,141,0.32);
  --tint-amber-strong: rgba(232,165,82,0.32);
  --tint-rose-strong:  rgba(240,141,132,0.32);
  --tint-sky-strong:   rgba(122,185,234,0.32);
  --row-stripe:  rgba(236,233,224,0.03);
  --row-hover:   rgba(236,233,224,0.06);
  --green-hover: #86d6a2;   /* в тёмной теме hover ОСВЕТЛЯЕТ, а не затемняет */
  --cat-blue:    #8ec2f5;
  --cat-violet:  #c9a3ee;
  --hover-inv:   rgba(255,255,255,0.06);
  --focus-ring:  rgba(232,165,82,0.40);
  --theme-color: #14150f;

  /* Тени — на тёмном фоне мягкая серая тень не видна, нужна плотнее и чернее */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.40), 0 1px 2px rgba(0,0,0,0.30);
  --shadow:     0 4px 16px rgba(0,0,0,0.46), 0 1px 4px rgba(0,0,0,0.34);
  --shadow-lg:  0 12px 40px rgba(0,0,0,0.54), 0 4px 12px rgba(0,0,0,0.40);
  --shadow-xl:  0 24px 64px rgba(0,0,0,0.62), 0 8px 24px rgba(0,0,0,0.46);
}