/* ============================================================
   osxc-pro.ru — theme.css
   Палитра C «Полевой журнал» (светлая, по умолчанию) + тёмная.
   Подключать ПЕРВЫМ на каждой странице (через header.js тоже).
   Правило: в HTML/JS никаких hex — только var(--...).
   ============================================================ */

:root {
  color-scheme: light;

  /* --- Поверхности --- */
  --bg:            #F7F6F0;  /* фон страницы — «бумага» */
  --surface:       #FFFFFF;  /* карточки, панели */
  --surface-2:     #F0EFE7;  /* вложенные блоки, строки таблиц через одну, инпуты */
  --surface-3:     #E8E6DB;  /* hover строк, выбранная вкладка */
  --overlay:       rgba(38, 38, 31, 0.45); /* подложка модалок */

  /* --- Текст --- */
  --text:          #26261F;  /* основной */
  --text-muted:    #56564C;  /* вторичный, подписи — затемнено с #66665A (26.09.2026): контраст на
                                 белом/бумаге был 5.4-5.8:1, жалоба «сливается»; сейчас 6.9-7.4:1 */
  --text-faint:    #67675D;  /* плейсхолдеры, метаданные — затемнено с #8A8A7C (26.09.2026): контраст
                                 БЫЛ 3.0-3.5:1 (провал WCAG AA 4.5:1, реальная причина «сливается»);
                                 сейчас 4.95-5.7:1 на всех поверхностях включая surface-2 */
  --text-on-accent:#FFFFFF;

  /* --- Границы --- */
  --border:        #E3E1D5;
  --border-strong: #CFCCBC;

  /* --- Акцент (сине-зелёный «чернила полевого журнала») --- */
  --accent:        #2F6F62;
  --accent-hover:  #255A4F;
  --accent-soft:   #DDEDE8;  /* фон бейджей/выделений */
  --accent-text:   #1F4F45;  /* текст на --accent-soft */
  --accent-bright: #216350;  /* яркий акцент-хайлайт (был --accent3/--green на страницах) */
  --focus-ring:    0 0 0 3px rgba(47, 111, 98, 0.35);

  /* --- Статусы / сигналы (🟢🟡🔴⚪ продажи и вишлиста) --- */
  --success:       #2E7D32;
  --success-soft:  #E3F1E3;
  --warning:       #8A5F00;  /* затемнено с #9A6A00 — на --surface-2 контраст был 4.10, ниже 4.5:1 */
  --warning-soft:  #FBF0D4;
  --danger:        #B3261E;
  --danger-soft:   #F9E1DE;
  --neutral:       #7A7A6D;
  --neutral-soft:  #ECEBE3;
  --accent-warm:      #B5562B;  /* был --orange на страницах */
  --accent-warm-soft: #F6E8DD;

  /* --- Цвета редкости (затемнены под светлый фон, контраст ≥ 4.5:1 на белом) --- */
  --r0: #6B6B6B;  /* серый   0–100 */
  --r1: #2E8B3A;  /* зелёный 100.1–115 */
  --r2: #2A6CC4;  /* синий   115.1–130 */
  --r3: #7B3FC4;  /* фиол.   130.1–145 */
  --r4: #C62828;  /* красный 145.1–160 */
  --r5: #9A7B0A;  /* золотой 160.1–175 */
  --r6: #A020C8;  /* уник.   175–190 */

  /* --- Графики (Chart.js берёт через getComputedStyle) --- */
  --chart-line:    #2F6F62;
  --chart-line-2:  #B5562B;
  --chart-fill:    rgba(47, 111, 98, 0.12);
  --chart-grid:    #E3E1D5;
  --chart-text:    #66665A;

  /* --- Типографика / геометрия --- */
  --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --font-mono: "JetBrains Mono", "Consolas", ui-monospace, monospace;
  --radius-sm: 6px;
  --radius:    8px;
  --radius-lg: 12px;
  --shadow:    0 1px 2px rgba(38, 38, 31, 0.06), 0 2px 8px rgba(38, 38, 31, 0.04);
}

/* ================= Тёмная тема =================
   Сверено с реальными цветами сайта на Шаге 0 задачи 0.4 (24.09.2026):
   grep по :root{} всех страниц показал 4 разные палитры одновременно
   (несостыковка, не намеренный дизайн). Взята за канон «Основная зелёная» —
   встречается на 7 из 8 публичных страниц (index/about/builds/feedback/404/
   constructor/craft): --bg:#080e07 --bg2:#0d150b --bg3:#131e10 --bg4:#1a2816,
   accent:#63c245. Страницы на «Варианте Б» (warehouse/arsenal/auction/
   optimizer, accent:#5aaa3f) и рассинхронизированная шкала редкости в
   craft.html (r4/r5/r6 были переставлены местами) унифицированы под неё —
   решение пользователя, см. CHANGELOG_CLAUDE.md, задача 0.4. Тема здесь
   переключается ТОЛЬКО явным атрибутом (theme.js, по умолчанию светлая) —
   без @media(prefers-color-scheme), поэтому единственный селектор ниже. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #080e07; --surface: #0d150b; --surface-2: #131e10; --surface-3: #1a2816;
  --overlay: rgba(0,0,0,0.6);
  /* Текстовые токены осветлены на 20% к белому 26.09.2026 (жалоба «сливается местами») —
     формула: channel + (255-channel)*0.20. Контраст был и так ≥4.5:1 у всех, но здесь про
     субъективную читаемость на монохромной зелёной палитре, не только формулу WCAG. */
  --text: #D9E6CC; --text-muted: #9CB18B; --text-faint: #8BA67F; --text-on-accent: #0a1408;
  --border: #1f2e1a; --border-strong: #2d4226;
  --accent: #63c245; --accent-hover: #4a9432; --accent-soft: rgba(99,194,69,0.15);
  --accent-text: #97DC77; --accent-bright: #97DC77;
  --focus-ring: 0 0 0 3px rgba(99,194,69,0.4);
  --success: #97DC77; --success-soft: rgba(126,212,85,0.15);
  --warning: #D3C66E; --warning-soft: rgba(200,184,74,0.15);
  --danger: #D66969; --danger-soft: rgba(204,68,68,0.15);
  --neutral: #9CB18B; --neutral-soft: rgba(132,158,110,0.15);
  --accent-warm: #e07820; --accent-warm-soft: rgba(224,120,32,0.15);
  --r0: #888888; --r1: #63c245; --r2: #5b9aee; --r3: #9966ee;
  --r4: #ee3333; --r5: #ddaa22; --r6: #cc44ff;
  --chart-line: #63c245; --chart-line-2: #e07820; --chart-fill: rgba(99,194,69,0.15);
  --chart-grid: #1f2e1a; --chart-text: #849e6e;
  --shadow: 0 1px 2px rgba(0,0,0,0.4);
}

/* ================= База ================= */
html { background: var(--bg); }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); }
a:hover { color: var(--accent-hover); }
hr { border: 0; border-top: 1px solid var(--border); }
::selection { background: var(--accent-soft); color: var(--accent-text); }

/* ================= Компоненты (минимальный общий набор) ================= */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

input, select, textarea {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
}
input::placeholder, textarea::placeholder { color: var(--text-faint); }
input:focus, select:focus, textarea:focus, button:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-color: var(--accent);
}

.btn {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  cursor: pointer;
}
.btn:hover { background: var(--surface-2); }
.btn-primary {
  background: var(--accent);
  color: var(--text-on-accent);
  border-color: var(--accent);
}
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

table { border-color: var(--border); }
th { color: var(--text-muted); background: var(--surface-2); }
tr:nth-child(even) td { background: var(--surface-2); }
tr:hover td { background: var(--surface-3); }
td, th { border-color: var(--border); }

/* Бейджи */
.badge { border-radius: var(--radius-sm); padding: 2px 8px; font-size: 12px; }
.badge-accent  { background: var(--accent-soft);  color: var(--accent-text); }
.badge-success { background: var(--success-soft); color: var(--success); }
.badge-warning { background: var(--warning-soft); color: var(--warning); }
.badge-danger  { background: var(--danger-soft);  color: var(--danger); }
.badge-neutral { background: var(--neutral-soft); color: var(--neutral); }

/* Редкость: текст и рамка */
.rar-0 { color: var(--r0); } .rar-1 { color: var(--r1); } .rar-2 { color: var(--r2); }
.rar-3 { color: var(--r3); } .rar-4 { color: var(--r4); } .rar-5 { color: var(--r5); }
.rar-6 { color: var(--r6); }
.rar-border-0 { border-color: var(--r0) !important; } .rar-border-1 { border-color: var(--r1) !important; }
.rar-border-2 { border-color: var(--r2) !important; } .rar-border-3 { border-color: var(--r3) !important; }
.rar-border-4 { border-color: var(--r4) !important; } .rar-border-5 { border-color: var(--r5) !important; }
.rar-border-6 { border-color: var(--r6) !important; }

/* Переключатель темы в шапке */
.theme-toggle {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
  border-radius: var(--radius);
  padding: 4px 10px;
  cursor: pointer;
  font-size: 14px;
}
.theme-toggle:hover { color: var(--text); background: var(--surface-2); }

@media (prefers-reduced-motion: no-preference) {
  body, .card, .btn, input, select, textarea, td { transition: background-color .15s, color .15s, border-color .15s; }
}