/* ДержиКурс — токены скинов (Финтех / Travel) × темы. Подключается
   index.html и admin.html; Tailwind-классы (bg-surface, text-muted…)
   ссылаются на эти переменные через tailwind.config. */

/* ================= Токены скинов =================
   Формат цвета — RGB-триплет, чтобы Tailwind мог добавлять прозрачность
   (bg-accent/40). Значения — из design/export/TOKENS.md. */

/* A. Финтех — светлая */
:root, html[data-skin="fintech"] {
  --font-ui: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --r-card: 16px; --r-ctl: 12px; --r-field: 12px; --r-tbl: 8px; --r-seg: 9px; --r-sheet: 28px;
  --sh-card: 0 1px 2px rgba(0,0,0,.04); --sh-hero: 0 1px 2px rgba(0,0,0,.04);
  --c-page: 242 244 246; --c-surface: 255 255 255; --c-surface2: 247 248 250; --c-field: 255 255 255;
  --c-soft: 230 247 240; --c-seg: 230 234 238; --c-segon: 255 255 255; --c-segink: 11 18 25;
  --c-line: 225 230 235; --c-line2: 225 230 235; --c-track: 237 240 243;
  --c-ink: 11 18 25; --c-muted: 91 104 117; --c-faint: 123 135 148; --c-ghost: 154 166 178;
  --c-accent: 5 150 105; --c-accenthover: 4 120 87; --c-onaccent: 255 255 255;
  --c-warn: 217 119 6; --c-danger: 220 38 38; --c-dangersoft: 254 226 226;
  --c-hero1: 5 150 105; --c-hero2: 4 120 87; --c-heroink: 255 255 255; --c-heromuted: 255 255 255;
  --c-heroon: 255 255 255; --c-heroonink: 5 150 105; --c-herowarn: 253 224 71; --c-herodanger: 254 202 202;
}
/* A. Финтех — тёмная */
html.dark, html.dark[data-skin="fintech"] {
  --sh-card: none; --sh-hero: none;
  --c-page: 11 15 20; --c-surface: 17 24 32; --c-surface2: 13 19 26; --c-field: 13 19 26;
  --c-soft: 14 42 34; --c-seg: 17 24 32; --c-segon: 27 37 48; --c-segink: 232 237 242;
  --c-line: 27 36 46; --c-line2: 36 48 64; --c-track: 27 37 48;
  --c-ink: 232 237 242; --c-muted: 154 166 178; --c-faint: 107 122 138; --c-ghost: 62 74 87;
  --c-accent: 16 185 129; --c-accenthover: 52 211 153; --c-onaccent: 4 20 13;
  --c-warn: 245 158 11; --c-danger: 248 113 113; --c-dangersoft: 59 17 17;
  --c-hero1: 14 42 34; --c-hero2: 17 24 32; --c-heroink: 232 237 242; --c-heromuted: 154 166 178;
  --c-heroon: 16 185 129; --c-heroonink: 4 20 13; --c-herowarn: 245 158 11; --c-herodanger: 248 113 113;
}
/* B. Travel — светлая */
html[data-skin="travel"] {
  --font-ui: "Rubik", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --r-card: 22px; --r-ctl: 18px; --r-field: 16px; --r-tbl: 12px; --r-seg: 12px; --r-sheet: 30px;
  --sh-card: 0 1px 2px rgba(60,40,10,.08); --sh-hero: 0 12px 30px -14px rgba(15,95,71,.5);
  --c-page: 244 235 221; --c-surface: 255 253 248; --c-surface2: 244 235 221; --c-field: 244 235 221;
  --c-soft: 234 244 238; --c-seg: 233 222 201; --c-segon: 15 95 71; --c-segink: 255 255 255;
  --c-line: 241 232 216; --c-line2: 233 222 201; --c-track: 233 222 201;
  --c-ink: 27 42 37; --c-muted: 107 123 115; --c-faint: 122 140 132; --c-ghost: 154 166 159;
  --c-accent: 15 95 71; --c-accenthover: 11 74 56; --c-onaccent: 255 255 255;
  --c-warn: 217 119 6; --c-danger: 220 38 38; --c-dangersoft: 254 226 226;
  --c-hero1: 15 95 71; --c-hero2: 11 74 56; --c-heroink: 241 245 242; --c-heromuted: 167 211 193;
  --c-heroon: 255 255 255; --c-heroonink: 15 95 71; --c-herowarn: 251 191 36; --c-herodanger: 252 165 165;
}
/* B. Travel — тёмная */
html.dark[data-skin="travel"] {
  --sh-card: none; --sh-hero: none;
  --c-page: 12 26 23; --c-surface: 18 38 34; --c-surface2: 15 33 29; --c-field: 12 26 23;
  --c-soft: 26 58 49; --c-seg: 18 38 34; --c-segon: 52 211 153; --c-segink: 6 42 31;
  --c-line: 26 58 49; --c-line2: 31 66 55; --c-track: 12 26 23;
  --c-ink: 241 245 242; --c-muted: 167 211 193; --c-faint: 127 163 148; --c-ghost: 63 94 83;
  --c-accent: 52 211 153; --c-accenthover: 110 231 183; --c-onaccent: 6 42 31;
  --c-warn: 245 158 11; --c-danger: 248 113 113; --c-dangersoft: 59 17 17;
  --c-hero1: 26 58 49; --c-hero2: 18 38 34; --c-heroink: 241 245 242; --c-heromuted: 167 211 193;
  --c-heroon: 52 211 153; --c-heroonink: 6 42 31; --c-herowarn: 245 158 11; --c-herodanger: 248 113 113;
}

body { font-family: var(--font-ui); font-variant-numeric: tabular-nums; }

/* Нативные контролы (поля ввода, календарь и часы у type=date/time,
   полосы прокрутки) браузер рисует по color-scheme. Без этого в тёмной
   теме поля оставались белыми, а текст в них — светлым по светлому. */
:root { color-scheme: light; }
html.dark { color-scheme: dark; }

/* Карточка: поверхность + рамка + радиус + тень из токенов.
   В Travel карточки без рамки (тень вместо неё). */
.card {
  background: rgb(var(--c-surface));
  border: 1px solid rgb(var(--c-line));
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
}
html[data-skin="travel"] .card { border-color: transparent; }

/* Hero-градиент (Travel: карточка итога, «Потрачено», билет пейволла) */
.hero {
  background: linear-gradient(160deg, rgb(var(--c-hero1)), rgb(var(--c-hero2)));
  color: rgb(var(--c-heroink));
  border-radius: var(--r-card);
  box-shadow: var(--sh-hero);
}

/* Дневной лимит превышен (#totalCard[data-state="over"], ставит
   renderTodayBudget): карточка итога краснеет — обещание онбординга и ЛК.
   Финтех — рамка и мягкий красный фон; Travel — hero перекрашивается в
   тёмно-красный градиент, «на hero»-цвета остаются белыми (контраст кольца). */
#totalCard[data-state="over"] .card {
  border-color: rgb(var(--c-danger));
  background: rgb(var(--c-dangersoft));
}
#totalCard[data-state="over"] .hero {
  --c-hero1: var(--c-danger);
  --c-hero2: 127 29 29;
  --c-heroon: 255 255 255;
  --c-herodanger: 255 255 255;
  --c-herowarn: 255 255 255;
}

/* Нижняя шторка для модалок (списки и формы). Ручка — псевдоэлемент,
   чтобы JS мог свободно заменять innerHTML карточки. */
.sheet {
  background: rgb(var(--c-surface));
  border-radius: var(--r-sheet) var(--r-sheet) 0 0;
  box-shadow: 0 -8px 30px rgba(0,0,0,.12);
}
.sheet::before {
  content: ""; display: block; width: 40px; height: 4px; border-radius: 2px;
  margin: 0 auto 10px; background: rgb(var(--c-line2));
}

/* Появление модалок: подложка проявляется, шторка выезжает снизу вверх.
   Анимация перезапускается сама — контейнер переключается display:none → flex,
   и содержимое отрисовывается заново. */
@keyframes modalFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes dialogIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.modal { animation: modalFade .24s ease-out; }
.modal > * { animation: sheetUp .42s cubic-bezier(.32, .72, 0, 1); }
@media (min-width: 1024px) {
  /* По центру экрана выезд снизу неуместен — мягкое проявление */
  .modal > * { animation: dialogIn .3s ease-out; }
}
@media (prefers-reduced-motion: reduce) {
  .modal, .modal > * { animation: none; }
}

/* Компьютер (от 1024 px): нижние шторки становятся окном по центру —
   скругление со всех сторон, ручка «потянуть вверх» не нужна. */
@media (min-width: 1024px) {
  .sheet { border-radius: var(--r-sheet); }
  .sheet::before { display: none; }
}

/* Элементы, существующие только в одном скине */
html[data-skin="travel"] .sk-fintech { display: none !important; }
html[data-skin="fintech"] .sk-travel { display: none !important; }

/* Тактильный отклик: кнопка чуть «вдавливается» при нажатии.
   Только если пользователь не просил уменьшить движение. */
@media (prefers-reduced-motion: no-preference) {
  button { transition: transform .08s ease, background-color .12s ease, color .12s ease; }
  button:active:not(:disabled) { transform: scale(0.94); }
}
/* Подсказка категории «поймалась»: пока человек печатает «завтрак», кнопка
   категории в форме добавления сама становится «Еда» — и чтобы это заметили,
   она подпрыгивает с расходящимся акцентным кольцом, иконка «приземляется»
   с поворотом, цвет вспыхивает акцентом и оседает в muted (подсказка, не
   выбор). Класс .cat-pop ставит renderCatBtn({ pop: true }) и снимает по
   animationend; перезапуск на том же элементе — через снятие класса и
   принудительный reflow. Под prefers-reduced-motion анимации нет. */
@media (prefers-reduced-motion: no-preference) {
  .cat-pop { animation: catPop .6s cubic-bezier(.2, .9, .3, 1.15); }
  .cat-pop > span:first-child {
    display: inline-block;
    animation: catIcon .6s cubic-bezier(.2, .9, .3, 1.3);
  }
}
@keyframes catPop {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgb(var(--c-accent) / .6);  color: rgb(var(--c-accent)); }
  30%  { transform: scale(1.08); }
  65%  { color: rgb(var(--c-accent)); }
  100% { transform: scale(1);    box-shadow: 0 0 0 14px rgb(var(--c-accent) / 0); color: rgb(var(--c-muted)); }
}
@keyframes catIcon {
  0%   { transform: scale(.2) rotate(-30deg); opacity: 0; }
  55%  { transform: scale(1.3) rotate(8deg);  opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}
/* Запись добавлена. Сохранение идёт без ожидания ответа сервера (офлайн
   промис не резолвится вовсе), поэтому подтверждение — визуальное и сразу:
   кнопка коротко пружинит под текстом «Добавлено ✓», а новая строка въезжает
   в историю сверху с гаснущим акцентным контуром — видно, куда ушла сумма.
   Контур рисуем outline (не box-shadow): он не съедает тень карточки Финтеха
   и не занимает места в потоке. Классы .btn-done / .row-in ставит app.js. */
@media (prefers-reduced-motion: no-preference) {
  .btn-done { animation: btnDone .45s cubic-bezier(.2, .9, .3, 1.1); }
  .row-in {
    outline: 2px solid transparent;
    outline-offset: 2px;
    animation: rowIn .55s cubic-bezier(.2, .9, .3, 1.05);
  }
}
@keyframes btnDone {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.035); }
  100% { transform: scale(1); }
}
@keyframes rowIn {
  0%   { opacity: 0; transform: translateY(-12px) scale(.97); outline-color: rgb(var(--c-accent) / .55); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: none; outline-color: rgb(var(--c-accent) / 0); }
}
/* Убрать стрелки/автозаполнение у полей конвертера */
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; }