/* Фирменные токены «Дневника тренировок».
   Значения — из раздела «Дизайн» CLAUDE.md. Хардкод цветов вне этого файла запрещён. */

:root,
[data-bs-theme="light"] {
  --app-bg: #F6F7F9;
  --app-card: #FFFFFF;
  --app-raised: #F0F2F5;
  --app-line: rgba(15, 23, 32, 0.10);
  --app-text: #16202B;
  --app-text-secondary: #5A6675;
  --app-text-muted: #8A95A5;
  --app-accent: #C6F13E;
  --app-on-accent: #141A08;
  /* Акцент как цвет текста на фоне страницы: на светлой теме сам #C6F13E нечитаем */
  --app-accent-text: #4F6B00;
  --app-success: #006300;
  --app-danger: #C4342B;
  /* Подложки с оттенком акцента и статусов (приём TailAdmin): активный пункт
     боковой панели, бейджи динамики. На белом лайм бледнеет, поэтому
     прозрачность светлой темы выше, чем тёмной. */
  --app-accent-soft: rgba(198, 241, 62, 0.30);
  --app-success-soft: rgba(0, 99, 0, 0.10);
  /* Переключатель-сегменты: подложка и активный сегмент */
  --app-segment-bg: var(--app-raised);
  --app-segment-active: var(--app-card);

  /* Виды спорта — цвет закреплён за видом, а не за порядком в наборе */
  --app-sport-strength: #2a78d6;
  --app-sport-bike: #eb6834;
  --app-sport-run: #1baf7a;
  --app-sport-ski: #eda100;
  /* Остальные виды спорта (свои и новые общие) — слоты Sport.palette */
  --app-sport-extra-1: #8a5cd8;
  --app-sport-extra-2: #d4407e;
  --app-sport-extra-3: #1792b5;
  --app-sport-extra-4: #9c6b3c;

  --app-shadow-card: 0 1px 2px rgba(15, 23, 32, 0.04);
  /* Тень шторки — влево, на таблицу под ней */
  --app-shadow-drawer: -8px 0 24px rgba(15, 23, 32, 0.08);
  --app-accent-glow: 0 6px 20px rgba(198, 241, 62, 0.28);
  --app-backdrop: rgba(15, 23, 32, 0.45);

  /* Наведение подсвечивает поверхность яркостью, а не новым цветом: приём уже
     работает у .btn-accent, и он не изобретает цвет вне макетов. */
  --app-hover-filter: brightness(0.97);
  --app-shadow-hover: 0 6px 18px rgba(15, 23, 32, 0.10);
}

[data-bs-theme="dark"] {
  --app-bg: #0D1015;
  --app-card: #151A21;
  --app-raised: #1B222B;
  --app-line: rgba(255, 255, 255, 0.08);
  --app-text: #EDF1F7;
  --app-text-secondary: #9AA5B5;
  --app-text-muted: #77828F;
  --app-accent: #C6F13E;
  --app-on-accent: #141A08;
  --app-accent-text: #C6F13E;
  --app-success: #0ca30c;
  --app-danger: #E5645C;
  --app-accent-soft: rgba(198, 241, 62, 0.12);
  --app-success-soft: rgba(12, 163, 12, 0.16);
  --app-segment-bg: var(--app-bg);
  --app-segment-active: var(--app-raised);

  --app-sport-strength: #3987e5;
  --app-sport-bike: #d95926;
  --app-sport-run: #199e70;
  --app-sport-ski: #c98500;
  --app-sport-extra-1: #9d7bea;
  --app-sport-extra-2: #e0619a;
  --app-sport-extra-3: #2ba6c8;
  --app-sport-extra-4: #b58658;

  --app-shadow-card: none;
  --app-shadow-drawer: -8px 0 24px rgba(0, 0, 0, 0.45);
  --app-accent-glow: 0 6px 24px rgba(198, 241, 62, 0.22);
  --app-backdrop: rgba(3, 5, 8, 0.66);

  /* В тёмной теме поверхность под курсором светлеет, а не темнеет. */
  --app-hover-filter: brightness(1.14);
  --app-shadow-hover: 0 6px 20px rgba(0, 0, 0, 0.45);
}

/* Радиусы, размеры, шрифты — общие для тем */
:root {
  --app-radius-card: 16px;
  --app-radius-field: 12px;
  --app-radius-pill: 999px;

  --app-font-sans: "Manrope", system-ui, sans-serif;
  --app-font-num: "Unbounded", system-ui, sans-serif;

  --app-tap-target: 44px;
  --app-header-height: 56px;
  --app-bottom-nav-height: 64px;

  /* Шкала отступов: имя = значение в четвертях rem (4 = 1rem). Управляет
     расстояниями между блоками. Оптические подгонки внутри компонентов
     (0.125 / 0.375 / 0.625 / 0.875rem) в шкалу не тянем — они не про ритм
     страницы, а про конкретный элемент. */
  --app-space-1: 0.25rem;
  --app-space-2: 0.5rem;
  --app-space-3: 0.75rem;
  --app-space-4: 1rem;
  --app-space-5: 1.25rem;
  --app-space-6: 1.5rem;
  --app-space-8: 2rem;
  --app-space-12: 3rem;
  --app-space-14: 3.5rem;
  --app-space-16: 4rem;

  /* Боковой отступ страницы. Один и тот же у шапки и у .app-main — иначе на
     широком мониторе лого и контент стоят на разных вертикалях.
     Переопределяется по брейкпоинтам ниже. */
  --app-gutter: var(--app-space-4);

  /* Внутренний боковой отступ карточки — один на все карточки экрана. Раньше
     плитки брали 20px, а строки 16px, и левые края текста в соседних карточках
     (профиль: «Тема» и «Отдых между подходами») стояли на разных вертикалях.
     На телефоне 16px, как в макетах; на десктопе карточки шире и дышат на 20px. */
  --app-card-inset: var(--app-space-4);

  /* Размер заголовка страницы. Токеном, а не только свойством .app-page-title:
     по нему кнопка «назад» выравнивается на строку заголовка. */
  --app-title-size: 1.75rem;

  /* Меры содержимого. Ширину задаёт страница, а не компонент: один и тот же
     .app-rows живёт в профиле, справочнике и «моих видах спорта», и это три
     разные раскладки. */
  --app-measure-narrow: 26rem;
  --app-measure-form: 34rem;
  --app-measure-dual: 70rem;
  /* Предел страницы на ПК — 1600px: на 1920 остаются поля, а строки и сетки
     ещё не растягиваются до нечитаемых. По нему же выровнена шапка. */
  --app-measure-page: 100rem;
  /* Широкое окно — там, где у содержимого две колонки: выбор упражнения,
     новая тренировка рядом с подготовленными. */
  --app-measure-wide: 56rem;
  /* Боковая панель ПК: развёрнутая — с подписями, «рельс» — одни иконки
     (с 768 до 1200 и в свёрнутом состоянии). */
  --app-measure-sidebar: 17.5rem;
  --app-measure-rail: 5.5rem;
  /* Шкала цели на неделю: шире полукруг только раздувает карточку */
  --app-measure-goal: 17.5rem;
  /* Шторка упражнения поверх таблицы справочника (с 1200): ширина окна, но не
     больше половины экрана — таблице под ней должно оставаться место. */
  --app-measure-drawer: min(var(--app-measure-wide), 50vw);
  /* Мера строки текста: длиннее ~75 знаков глаз теряет начало следующей
     строки. Новость на ПК идёт строкой во всю ширину, а текст держит эту меру. */
  --app-measure-text: 44rem;
  /* Колонка даты и ярлыков у строки новости на ПК */
  --app-measure-meta: 11rem;

  /* Число колонок «досок» — сеток из одинаковых карточек (итог, история на
     средних экранах, новости, строки справочников). Одно на все экраны, чтобы
     колонки соседних страниц не жили каждая своей жизнью. */
  --app-board-cols: 1;

  /* Движение. Быстрое — на цвет и фон, чтобы отклик читался мгновенно;
     базовое — на тень и подъём, где резкость выглядит дёрганой. */
  --app-motion-fast: 120ms;
  --app-motion-base: 180ms;
  --app-motion-ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --app-lift: -1px;
  --app-transition-ui:
    background-color var(--app-motion-fast) var(--app-motion-ease),
    border-color var(--app-motion-fast) var(--app-motion-ease),
    color var(--app-motion-fast) var(--app-motion-ease),
    filter var(--app-motion-fast) var(--app-motion-ease),
    box-shadow var(--app-motion-base) var(--app-motion-ease),
    transform var(--app-motion-base) var(--app-motion-ease);

  /* Фокус с клавиатуры. Лаймовый --bs-focus-ring-color на светлой теме почти
     не виден, поэтому обводка берёт «чернильный» акцент — он читаем в обеих
     темах. --bs-focus-ring-color остаётся тем, чем был: рингом текстовых полей. */
  --app-focus-outline: 2px solid var(--app-accent-text);
  --app-focus-offset: 2px;
}

/* Переопределение переменных Bootstrap нашими токенами */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
  --bs-body-bg: var(--app-bg);
  --bs-body-color: var(--app-text);
  --bs-secondary-color: var(--app-text-secondary);
  --bs-tertiary-color: var(--app-text-muted);
  --bs-border-color: var(--app-line);
  --bs-emphasis-color: var(--app-text);
  --bs-heading-color: var(--app-text);
  --bs-link-color: var(--app-text);
  --bs-link-hover-color: var(--app-text);

  --bs-primary: var(--app-accent);
  --bs-primary-rgb: 198, 241, 62;
  --bs-success: var(--app-success);
  --bs-danger: var(--app-danger);
  --bs-focus-ring-color: rgba(198, 241, 62, 0.35);

  --bs-body-font-family: var(--app-font-sans);
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;

  --bs-border-radius: var(--app-radius-field);
  --bs-border-radius-sm: 10px;
  --bs-border-radius-lg: var(--app-radius-card);
  --bs-border-radius-xl: var(--app-radius-card);
  --bs-border-radius-pill: var(--app-radius-pill);
}

/* Боковой отступ страницы растёт вместе с экраном. Задаётся здесь один раз,
   а шапка и .app-main его только читают — так они не могут разойтись. */
@media (min-width: 768px) {
  :root {
    --app-gutter: var(--app-space-6);
    --app-card-inset: var(--app-space-5);
    --app-title-size: 2rem;
    --app-board-cols: 2;
    /* Высота шапки считается из её же отступа и тач-таргета, а не задаётся
       числом: по ней встают липкие блоки и якоря, и прежние 56px при реальных
       68/76 уводили их под шапку. На телефоне токен прежний — мобильный вид
       не трогаем. */
    --app-header-pad: var(--app-space-3);
    --app-header-height: calc(
      var(--app-tap-target) + 2 * var(--app-header-pad) + env(safe-area-inset-top)
    );
  }
}

@media (min-width: 1200px) {
  :root {
    /* 2rem, а не 3.5: рядом с боковой панелью широкие поля съедали бы ширину
       контента — у 1440 и так 17.5rem уходит на навигацию. */
    --app-gutter: var(--app-space-8);
    --app-board-cols: 3;
    --app-header-pad: var(--app-space-4);
  }
}

/* Уважение к настройке ОС. Гасим токены движения, а не
   «* { transition: none !important }»: иначе умрёт и функциональный переход
   полосы таймера отдыха (.app-progress-bar), а она не украшение, а индикатор. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --app-motion-fast: 0.01ms;
    --app-motion-base: 0.01ms;
    --app-lift: 0px;
  }
}