/* ДержиКурс — токены скинов (Финтех / 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; }

/* Карточка: поверхность + рамка + радиус + тень из токенов.
   В 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));
}

/* Элементы, существующие только в одном скине */
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); }
}
/* Убрать стрелки/автозаполнение у полей конвертера */
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; }