/* ─────────────────────────────────────────────────────────────────────────
   Тема «lab.» — бумажный тёплый фон, чёрные чернила, один красно-оранжевый
   акцент. Палитра задаётся токенами :root ниже. Tailwind-утилиты синей/
   индиго/голубой/янтарной гаммы ре-маппятся на новую палитру через
   !important-оверрайды (тот же приём, что и тёмная тема, — без парных
   классов в каждом шаблоне).
   ───────────────────────────────────────────────────────────────────────── */
:root {
  color-scheme: light;

  --paper:        #ECEAE3;  /* фон страницы */
  --surface:      #ffffff;  /* карточки */
  --surface-soft: #F1EFE8;  /* инпуты, навбар, мягкие плашки */
  --surface-mute: #E6E3DA;  /* нейтральный статус */
  --line:         #DBD7CC;  /* тонкие рамки */
  --line-strong:  #1B1B1B;  /* «редакционные» линии (хедер) */
  --ink:          #1B1B1B;  /* основной текст, чёрный */
  --muted:        #6E6A61;  /* вторичный текст */
  --muted-strong: #3C3934;

  --accent:        #E0451E; /* заливки, блоки, кнопки */
  --accent-hover:  #C33C18;
  --accent-ink:    #B7381A; /* акцентный текст на светлом (контраст ≥4.5) */
  --accent-tint:   #F6E7E0; /* очень светлая плашка */
  --accent-tint-2: #F0D6CC;
  --accent-border: #E7C3B4;
}

html { scrollbar-color: #c8c3b5 var(--paper); }
body { background: var(--paper) !important; }

/* ─── Шрифты ──────────────────────────────────────────────────────────────
   Дисплей — Unbounded (геометрический, «лабораторный»), текст — IBM Plex Sans,
   технические подписи капсом — IBM Plex Mono. Все с кириллицей.
   ──────────────────────────────────────────────────────────────────────── */
:root {
  --font-sans:    'Commissioner', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Unbounded', 'Commissioner', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

body { font-family: var(--font-sans); }

/* заголовки и всё «чёрное» начертание → Unbounded */
h1, h2, h3, h4,
.font-black, .font-display {
  font-family: var(--font-display) !important;
  letter-spacing: -0.02em;
}
.text-xl.font-black { letter-spacing: -0.03em; }

/* мелкие технические подписи капсом → моноширинный */
.text-xs.uppercase,
.text-xs.tracking-widest,
.text-xs.tracking-wide,
.text-\[10px\].uppercase {
  font-family: var(--font-mono) !important;
  letter-spacing: 0.04em;
  font-weight: 500;
}

/* моноширинные цифры-счётчики (XP, таймер) читаемее в Plex Mono */
#xp-counter, .tabular-nums { font-family: var(--font-mono) !important; }

/* ── Бренд-токены ──────────────────────────────────────────────────────── */
.text-gradient {                 /* «Battle» в логотипе — плоский акцент */
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: var(--accent);
}

.btn-gradient {
  background: var(--accent);
  color: #fff;
  box-shadow: none;
}
.btn-gradient:hover { background: var(--accent-hover); }

.logo-mark {
  background: var(--ink);
  box-shadow: none;
  border-radius: 5px;
}

.progress-track { background: var(--surface-mute); }
.progress-fill  { background: var(--accent); }

.glow-border { box-shadow: 0 0 0 1px var(--line); }
.glow-yellow { box-shadow: 0 0 0 1px var(--line); }

/* ── Хедер: тонкая тёмная линия снизу, как в референсе ─────────────────── */
header.site-header {
  background: var(--surface);
  border-color: var(--line-strong) !important;
}

/* ── Ре-маппинг Tailwind-утилит на новую палитру ──────────────────────── */
/* акцент вместо синего / индиго / голубого */
.bg-blue-50, .bg-indigo-50, .bg-sky-50               { background-color: var(--accent-tint) !important; }
.bg-blue-100                                          { background-color: var(--accent-tint-2) !important; }
.bg-blue-500, .bg-blue-600                            { background-color: var(--accent) !important; }
.hover\:bg-blue-700:hover                             { background-color: var(--accent-hover) !important; }

.text-blue-400, .text-blue-500, .text-blue-600,
.text-blue-700, .text-blue-800, .text-blue-900,
.text-indigo-600, .text-indigo-700, .text-sky-700     { color: var(--accent-ink) !important; }

.border-blue-100, .border-blue-200, .border-blue-300,
.border-indigo-200, .border-sky-200                   { border-color: var(--accent-border) !important; }
.border-blue-400, .border-blue-500, .border-blue-600  { border-color: var(--accent) !important; }

.focus\:border-blue-400:focus                         { border-color: var(--accent) !important; }
.hover\:border-blue-200:hover                          { border-color: var(--accent-border) !important; }
.hover\:border-blue-300:hover                          { border-color: var(--accent-border) !important; }

/* градиентная плашка соло-челленджа → плоская тёплая */
.from-indigo-50 {
  --tw-gradient-from: var(--accent-tint) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(246 231 224 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.to-blue-50 { --tw-gradient-to: var(--accent-tint) var(--tw-gradient-to-position) !important; }

/* peer-checked (конфиг практики) */
.peer:checked ~ .peer-checked\:bg-blue-600           { background-color: var(--accent) !important; }
.peer:checked ~ .peer-checked\:bg-blue-50            { background-color: var(--accent-tint) !important; }
.peer:checked ~ .peer-checked\:border-blue-600,
.peer:checked ~ .peer-checked\:border-blue-400,
.peer:checked ~ .peer-checked\:border-blue-300       { border-color: var(--accent) !important; }
.peer:checked ~ .peer-checked\:text-blue-700         { color: var(--accent-ink) !important; }
.peer:checked ~ .peer-checked\:text-white            { color: #fff !important; }

/* янтарь → чернила / нейтраль (в референсе жёлтого нет) */
.text-amber-500, .text-amber-600                      { color: var(--ink) !important; }
.bg-amber-50                                           { background-color: var(--surface-soft) !important; }
.border-amber-200, .border-amber-300                  { border-color: var(--line) !important; }
.border-amber-500\/30                                  { border-color: var(--line) !important; }
.bg-amber-500\/10                                      { background-color: var(--surface-soft) !important; }

/* тёплые нейтрали вместо холодного slate */
.bg-slate-50                                           { background-color: var(--surface-soft) !important; }
.bg-slate-100                                          { background-color: var(--surface-mute) !important; }
.border-slate-200, .border-slate-300                  { border-color: var(--line) !important; }

/* ─────────────────────────────────────────────────────────────────────────
   Модерн: острые формы, никаких скруглений/пилюль. Сносим border-radius у
   всех поверхностей (карточки, пилюли навигации, чипы, кнопки) и приводим
   поля ввода к плоскому виду — тонкая тёмная рамка + акцентный фокус-ринг.
   ───────────────────────────────────────────────────────────────────────── */
[class*="rounded"]      { border-radius: 0 !important; }
.btn-gradient, .logo-mark { border-radius: 0 !important; }

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
select,
textarea {
  border-radius: 0 !important;
  background-color: #fff !important;
  border: 1px solid var(--line-strong) !important;
  box-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;
}
input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus {
  outline: none !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(224, 69, 30, 0.16) !important;
}
input[type="checkbox"], input[type="radio"] {
  border-radius: 0 !important;
  accent-color: var(--accent);
}
::placeholder { color: #9b968c !important; opacity: 1; }

/* внутри задания ФИПИ — не трогаем нативные поля движка проверки */
.task-embed input,
.task-embed select,
.task-embed textarea {
  border: revert !important;
  background-color: revert !important;
  box-shadow: none !important;
}

/* ── Задание в исходной вёрстке ФИПИ ──────────────────────────────────── */
.task-embed {
  color: #1b1b1b;
  font-size: 0.95rem;
  line-height: 1.5;
}
.task-embed table { width: 100%; border-collapse: collapse; }
.task-embed td, .task-embed th { padding: 6px 8px; }
.task-embed img { max-width: 100%; height: auto; }

/* ─────────────────────────────────────────────────────────────────────────
   Тёмная тема — упрощённый оверлей поверх светлой разметки. Тот же красный
   акцент, но чуть светлее для контраста на тёмном фоне.
   ───────────────────────────────────────────────────────────────────────── */
:root[data-theme='dark'] {
  color-scheme: dark;
  --accent-ink: #F26B45;
}

:root[data-theme='dark'] body { background: #14100E !important; }

:root[data-theme='dark'] .bg-white,
:root[data-theme='dark'] .bg-slate-50 {
  background-color: #1E1A17 !important;
}

:root[data-theme='dark'] .bg-slate-100 {
  background-color: #2A2521 !important;
}

/* акцентные плашки в тёмной теме — тёмный тёпло-красный фон, не светлый */
:root[data-theme='dark'] .bg-blue-50,
:root[data-theme='dark'] .bg-indigo-50,
:root[data-theme='dark'] .bg-sky-50,
:root[data-theme='dark'] .bg-blue-100 {
  background-color: #2A1D17 !important;
}
:root[data-theme='dark'] .from-indigo-50 {
  --tw-gradient-from: #2A1D17 var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(42 29 23 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
:root[data-theme='dark'] .to-blue-50 {
  --tw-gradient-to: #211712 var(--tw-gradient-to-position) !important;
}
:root[data-theme='dark'] .border-blue-100,
:root[data-theme='dark'] .border-blue-200,
:root[data-theme='dark'] .border-blue-300,
:root[data-theme='dark'] .border-indigo-200,
:root[data-theme='dark'] .border-sky-200 { border-color: #3A2A22 !important; }

:root[data-theme='dark'] .border-slate-200,
:root[data-theme='dark'] .border-slate-300 {
  border-color: #2E2925 !important;
}

:root[data-theme='dark'] header.site-header {
  background: #14100E;
  border-color: #2E2925 !important;
}

:root[data-theme='dark'] .text-slate-900 { color: #F3EFE7 !important; }
:root[data-theme='dark'] .text-slate-700,
:root[data-theme='dark'] .text-slate-600 { color: #CBC5B9 !important; }
:root[data-theme='dark'] .text-slate-500 { color: #9A948A !important; }

/* в тёмной теме чёрные чернила-оверрайды сверху надо вернуть в светлые */
:root[data-theme='dark'] .text-amber-500,
:root[data-theme='dark'] .text-amber-600 { color: #EDE7DA !important; }
:root[data-theme='dark'] .bg-amber-50 { background-color: #211712 !important; }
:root[data-theme='dark'] .border-amber-200,
:root[data-theme='dark'] .border-amber-300 { border-color: #3A2A22 !important; }

/* прочие светлые тинты (rose/orange/emerald) → тёмные в тёмной теме,
   иначе светлый текст на светлом фоне */
:root[data-theme='dark'] .bg-rose-50,
:root[data-theme='dark'] .bg-orange-50,
:root[data-theme='dark'] .bg-emerald-50 { background-color: #211712 !important; }
:root[data-theme='dark'] .bg-rose-100,
:root[data-theme='dark'] .bg-orange-100,
:root[data-theme='dark'] .bg-emerald-100 { background-color: #2C201A !important; }
:root[data-theme='dark'] .from-rose-50 {
  --tw-gradient-from: #2A1D17 var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(42 29 23 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
:root[data-theme='dark'] .to-orange-50 { --tw-gradient-to: #211712 var(--tw-gradient-to-position) !important; }
:root[data-theme='dark'] .border-rose-200,
:root[data-theme='dark'] .border-emerald-200,
:root[data-theme='dark'] .border-orange-200 { border-color: #3A2A22 !important; }
:root[data-theme='dark'] .text-emerald-700 { color: #4ADE80 !important; }
:root[data-theme='dark'] .text-rose-700 { color: #FB7185 !important; }

/* выбранные пилюли конфига практики в тёмной теме */
:root[data-theme='dark'] .peer:checked ~ .peer-checked\:bg-blue-50 { background-color: #2A1D17 !important; }
:root[data-theme='dark'] .peer:checked ~ .peer-checked\:text-blue-700 { color: #F26B45 !important; }

:root[data-theme='dark'] .logo-mark { background: #F3EFE7; }
:root[data-theme='dark'] .logo-mark svg rect { fill: #14100E !important; }

:root[data-theme='dark'] input:not([type="checkbox"]):not([type="radio"]),
:root[data-theme='dark'] select,
:root[data-theme='dark'] textarea {
  background-color: #1A1613 !important;
  border-color: #4A423B !important;
  color: #F3EFE7 !important;
}
:root[data-theme='dark'] input:not([type="checkbox"]):not([type="radio"]):focus,
:root[data-theme='dark'] select:focus,
:root[data-theme='dark'] textarea:focus {
  border-color: var(--accent-ink) !important;
  box-shadow: 0 0 0 3px rgba(242, 107, 69, 0.18) !important;
}

:root[data-theme='dark'] .task-embed { color: #1b1b1b; }