/* =============================================================================
   theme.css - слой оформления поверх style.css

   Как это работает
   1. Все «решения о внешнем виде» - это CSS-переменные (токены). Компоненты в style.css
      читают только токены, никаких #hex внутри правил.
   2. Режим (светлый/тёмный) - класс body.light-mode, как и раньше.
   3. Скин - атрибут html[data-skin="…"]. Скин переопределяет токены для ОБОИХ режимов:
        html[data-skin="x"] body             → тёмный режим
        html[data-skin="x"] body.light-mode  → светлый режим
   4. Новый скин = один блок ниже (≈40 строк токенов) + запись в Theme.SKINS (theme.js).
      Скин «default» ничего не переопределяет: внешний вид идентичен текущему.
   ============================================================================= */

/* ---------- 1. Токены по умолчанию (повторяют текущий внешний вид) ---------- */
:root {
  /* типографика */
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: var(--font-ui);
  /* форма */
  --radius-card: 20px;
  --radius-sub: 14px;
  --radius-badge: 6px;
  --shell-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  /* активный переключатель / главная кнопка (было #1E293B/#FFFFFF в 15 местах, с !important) */
  --control-active-bg: #334155;
  --control-active-fg: #F8FAFC;
  --control-active-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  /* серии диаграммы (были tailwind-классами bg-blue-500… внутри JS-строк и HTML) */
  --series-orders: #3B82F6;
  --series-surge:  #FCE000;
  --series-rating: #FB923C;
  --series-bonus:  #A855F7;
  --series-goals:  #EC4899;
  --series-tips:   #34D399;
}
body.light-mode {
  --control-active-bg: #1E293B;
  --control-active-fg: #FFFFFF;
}

/* ---------- 2. Семантические классы вместо bg-blue-500 и т.п. ---------- */
.seg-orders { background-color: var(--series-orders); }
.seg-surge  { background-color: var(--series-surge); }
.seg-rating { background-color: var(--series-rating); }
.seg-bonus  { background-color: var(--series-bonus); }
.seg-goals  { background-color: var(--series-goals); }
.seg-tips   { background-color: var(--series-tips); }

/* ---------- 3. Скин «Печать» (ризография) ---------- */
html[data-skin="print"] body {
  --font-ui: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
  --font-display: 'Unbounded', 'Arial Black', sans-serif;
  --radius-card: 4px; --radius-sub: 3px; --radius-badge: 2px;
  --shell-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
  --bg-outer: #0D0E13; --bg-shell: #14151B; --bg-card: #1B1D25; --bg-elevated: #232631; --bg-pill: #101116;
  --border-subtle: rgba(241, 238, 230, 0.16); --border-strong: rgba(241, 238, 230, 0.3);
  --text-main: #F1EEE6; --text-secondary: #A0A6B6; --text-muted: #7C8294;
  --ya-yellow: #FFE800; --ya-yellow-hover: #F2DC00; --ya-yellow-text: #20212B;
  --surface-hover: rgba(241, 238, 230, 0.05);
  --shadow-card: 4px 4px 0 rgba(255, 72, 176, 0.35);
  --control-active-bg: #FFE800; --control-active-fg: #20212B; --control-active-shadow: none;
  --series-orders: #2B97E8; --series-surge: #FFE800; --series-rating: #FF6C2F;
  --series-bonus: #765BA7; --series-goals: #FF48B0; --series-tips: #00A95C;
}
html[data-skin="print"] body.light-mode {
  --bg-outer: #DDE1E8; --bg-shell: #ECEEF2; --bg-card: #FBFAF6; --bg-elevated: #F1F2F5; --bg-pill: #E4E7EC;
  --border-subtle: rgba(32, 33, 43, 0.18); --border-strong: rgba(32, 33, 43, 0.34);
  --text-main: #20212B; --text-secondary: #4E5463; --text-muted: #7B8190;
  --surface-hover: rgba(32, 33, 43, 0.05);
  --shadow-card: 4px 4px 0 rgba(0, 120, 191, 0.28);
  --series-orders: #0078BF;
}
html[data-skin="print"] body::before {            /* зерно бумаги */
  content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: 0.16;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
html[data-skin="print"] body:not(.light-mode)::before { filter: invert(1); }

/* ---------- 4. Скин «Киберпанк» ---------- */
html[data-skin="cyberpunk"] body {
  --font-ui: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  --font-display: 'Russo One', Impact, sans-serif;
  --radius-card: 4px; --radius-sub: 3px; --radius-badge: 2px;
  --shell-shadow: 0 0 0 1px rgba(0, 229, 255, 0.35), 0 24px 60px -20px rgba(255, 43, 214, 0.55);
  --bg-outer: #05030C; --bg-shell: #0A0716; --bg-card: #0E0A1C; --bg-elevated: #160F2B; --bg-pill: #07040F;
  --border-subtle: rgba(0, 229, 255, 0.2); --border-strong: rgba(0, 229, 255, 0.45);
  --text-main: #EDE9FF; --text-secondary: #A59FCB; --text-muted: #7C74A8;
  --ya-yellow: #FCEE0A; --ya-yellow-hover: #E8DA00; --ya-yellow-text: #07040F;
  --surface-hover: rgba(0, 229, 255, 0.07);
  --shadow-card: 0 0 0 1px rgba(0, 229, 255, 0.22), 0 12px 32px -14px rgba(255, 43, 214, 0.5);
  --badge-green-text: #39FF88; --badge-red-text: #FF4D6A;
  --control-active-bg: #FCEE0A; --control-active-fg: #07040F; --control-active-shadow: 0 0 14px -2px #FCEE0A;
  --series-orders: #00E5FF; --series-surge: #FCEE0A; --series-rating: #FF8A00;
  --series-bonus: #B14CFF; --series-goals: #FF2BD6; --series-tips: #39FF88;
}
html[data-skin="cyberpunk"] body.light-mode {
  --bg-outer: #E6DFF5; --bg-shell: #EEE9F8; --bg-card: #FFFFFF; --bg-elevated: #F4F0FB; --bg-pill: #E8E2F4;
  --border-subtle: rgba(22, 16, 43, 0.18); --border-strong: rgba(22, 16, 43, 0.4);
  --text-main: #16102B; --text-secondary: #5A5278; --text-muted: #8A82A8;
  --ya-yellow: #E6C800; --ya-yellow-text: #16102B; --surface-hover: rgba(22, 16, 43, 0.05);
  --shadow-card: 0 0 0 1px rgba(212, 20, 159, 0.2), 0 10px 26px -14px rgba(212, 20, 159, 0.35);
  --badge-green-text: #07915C; --badge-red-text: #D91E48;
  --control-active-bg: #FCEE0A; --control-active-fg: #16102B; --control-active-shadow: 0 0 0 1px #16102B;
  --series-orders: #00B8D4; --series-bonus: #A63DFF; --series-goals: #F01FC4; --series-tips: #14D66E;
}
html[data-skin="cyberpunk"] body {
  background-image: radial-gradient(520px 380px at 100% -60px, rgba(255, 43, 214, 0.28), transparent),
                    radial-gradient(520px 420px at -20% 55%, rgba(0, 229, 255, 0.16), transparent);
}
html[data-skin="cyberpunk"] body::after {          /* сканлайны */
  content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.22) 0 1px, transparent 1px 3px);
}
html[data-skin="cyberpunk"] body.light-mode::after { opacity: 0.18; }

/* ---------- 5. Общие потребители токенов (скин-независимо) ---------- */
.app-shell { box-shadow: var(--shell-shadow); }
.app-shell h1, .app-shell h2, .app-shell h3 { font-family: var(--font-display); }
.ya-seg-btn-active,
.ya-switch-opt.ya-switch-opt-active,
.ya-preset-btn-active,
.btn-primary,
.ya-btn-slate {
  background-color: var(--control-active-bg) !important;
  color: var(--control-active-fg) !important;
}
.ya-seg-btn-active,
.ya-switch-opt.ya-switch-opt-active {            /* тень была только у переключателей */
  box-shadow: var(--control-active-shadow) !important;
}
@media (prefers-reduced-motion: reduce) {
  html[data-skin] *, html[data-skin] *::before, html[data-skin] *::after { animation: none !important; transition: none !important; }
}

/* Компоненты, которые раньше имели «зашитые» значения формы и шрифта */
body { font-family: var(--font-ui); }
.ya-card { border-radius: var(--radius-card); }
.ya-subcard { border-radius: var(--radius-sub); }
.ya-badge { border-radius: var(--radius-badge); }