/* ============================================================================
   LEMARK Auto — ТЁМНАЯ ТЕМА (theme-dark.css)
   Подключается ПОСЛЕДНИМ, когда active_theme == "dark".
   Активируется атрибутом html[data-theme="dark"] (ставит base.html).

   Как это работает:
   1) Единая приватная dark-палитра (--_*) — единственный источник правды.
   2) Она разворачивается во ВСЕ токены, что используют страницы: как безпрефиксные
      (--bg, --surface, --ink ...), так и префиксные копии (--au-*, --ml-*, --ord-*,
      --r-*, --lmk-*) и токены шапки (--h-*, --lmrk-*). Значения у всех страниц —
      копии палитры CLAUDE.md, поэтому одно dark-значение на роль покрывает все.
   3) Хардкод-литералы в шаблонах заменены на var(--token, <литерал>) отдельным
      проходом — они подхватывают эти же токены и темнеют, а в светлой теме
      падают на литерал-fallback (полный no-op).
   4) Каркас base.html (шапка-стекло, футер, cookie, выпадашка поиска) и
      Tailwind-утилиты переопределяются точечно ниже.

   Чтобы поменять оттенок тёмной темы — правьте ТОЛЬКО блок «Приватная палитра».
   ========================================================================== */

/* Нативные контролы, скроллбары, автозаполнение — в тёмной гамме */
html[data-theme="dark"] { color-scheme: dark; }

html[data-theme="dark"] {
  /* ─────────── Приватная палитра (единственный источник правды) ─────────── */
  --_bg:          #0E1016;   /* фон страницы — почти чёрный с синевой (не pure black) */
  --_surface:     #171A22;   /* карточки, панели */
  --_surface-2:   #1F232D;   /* приподнятые/hover-поверхности, инпуты */
  --_ink:         #E8EAF1;   /* основной текст (≈13:1 на surface) — не чистo-белый */
  --_ink-2:       #B4BAC7;   /* вторичный текст (≈7.5:1) */
  --_muted:       #868D9D;   /* приглушённый/мета (≈4.3:1) */
  --_muted-2:     #5E6675;   /* очень слабый/disabled */
  --_line:        #2A2E3A;   /* границы */
  --_line-2:      #23262F;   /* слабые границы/разделители */

  --_primary:     #7E84FF;   /* брендовый фиолетовый, осветлён под тёмный фон (≈5:1) */
  --_primary-soft:#A99CFF;
  --_primary-bg:  #1E2145;   /* тёмная фиолетовая подложка (eyebrow, badge) */

  --_accent:      #FF8FA1;
  --_accent-soft: #FFBE8A;
  --_used:        #D89A52;   /* б/у — коричневый, осветлён */
  --_used-bg:     #2A2214;

  --_success:     #37C97B;   --_success-bg: #12271C;
  --_error:       #FF5C5C;   --_error-bg:   #2C1519;
  --_warning:     #F0A231;   --_warning-bg: #2B2010;

  --_shadow-sm:   0 1px 2px rgba(0,0,0,.40);
  --_shadow-md:   0 4px 16px rgba(0,0,0,.50), 0 2px 4px rgba(0,0,0,.40);
  --_shadow-lg:   0 24px 60px rgba(0,0,0,.65);

  /* ─────────── Безпрефиксные токены (index, cart, product, search ...) ─────────── */
  --bg:var(--_bg);              --surface:var(--_surface);      --surface-2:var(--_surface-2);
  --ink:var(--_ink);            --ink-2:var(--_ink-2);          --muted:var(--_muted);          --muted-2:var(--_muted-2);
  --line:var(--_line);          --line-2:var(--_line-2);
  --primary:var(--_primary);    --primary-soft:var(--_primary-soft);  --primary-bg:var(--_primary-bg);
  --accent:var(--_accent);      --accent-soft:var(--_accent-soft);
  --used:var(--_used);          --used-bg:var(--_used-bg);
  --success:var(--_success);    --success-bg:var(--_success-bg);
  --error:var(--_error);        --error-bg:var(--_error-bg);     --err:var(--_error);
  --warning:var(--_warning);    --warning-bg:var(--_warning-bg); --warn-bg:var(--_warning-bg);
  --shadow-sm:var(--_shadow-sm); --shadow-md:var(--_shadow-md);  --shadow-lg:var(--_shadow-lg);

  /* ─────────── Префикс --au-* (pages/about) ─────────── */
  --au-bg:var(--_bg); --au-surface:var(--_surface); --au-surface-2:var(--_surface-2);
  --au-ink:var(--_ink); --au-ink-2:var(--_ink-2); --au-muted:var(--_muted); --au-muted-2:var(--_muted-2);
  --au-line:var(--_line); --au-line-2:var(--_line-2);
  --au-primary:var(--_primary); --au-primary-soft:var(--_primary-soft); --au-primary-bg:var(--_primary-bg);
  --au-accent:var(--_accent); --au-accent-soft:var(--_accent-soft);
  --au-success:var(--_success); --au-error:var(--_error); --au-error-bg:var(--_error-bg);
  --au-shadow-sm:var(--_shadow-sm); --au-shadow-md:var(--_shadow-md);

  /* ─────────── Префикс --ml-* (catalog/models) ─────────── */
  --ml-bg:var(--_bg); --ml-surface:var(--_surface); --ml-surface-2:var(--_surface-2);
  --ml-ink:var(--_ink); --ml-ink-2:var(--_ink-2); --ml-muted:var(--_muted); --ml-muted-2:var(--_muted-2);
  --ml-line:var(--_line); --ml-line-2:var(--_line-2);
  --ml-primary:var(--_primary); --ml-primary-soft:var(--_primary-soft); --ml-primary-bg:var(--_primary-bg);
  --ml-accent:var(--_accent); --ml-success:var(--_success);
  --ml-shadow-sm:var(--_shadow-sm); --ml-shadow-md:var(--_shadow-md); --ml-shadow-lg:var(--_shadow-lg);

  /* ─────────── Префикс --ord-* (account/orders) ─────────── */
  --ord-bg:var(--_bg); --ord-surface:var(--_surface); --ord-surface-2:var(--_surface-2);
  --ord-ink:var(--_ink); --ord-ink-2:var(--_ink-2); --ord-muted:var(--_muted); --ord-muted-2:var(--_muted-2);
  --ord-line:var(--_line); --ord-line-2:var(--_line-2);
  --ord-primary:var(--_primary); --ord-primary-soft:var(--_primary-soft); --ord-primary-bg:var(--_primary-bg);
  --ord-accent:var(--_accent); --ord-accent-soft:var(--_accent-soft);
  --ord-success:var(--_success); --ord-success-bg:var(--_success-bg);
  --ord-error:var(--_error); --ord-error-bg:var(--_error-bg);
  --ord-shadow-sm:var(--_shadow-sm); --ord-shadow-md:var(--_shadow-md);

  /* ─────────── Префикс --r-* (account/return, pages/return, results) ─────────── */
  --r-bg:var(--_bg); --r-surface:var(--_surface); --r-surface-2:var(--_surface-2);
  --r-ink:var(--_ink); --r-ink-2:var(--_ink-2); --r-muted:var(--_muted); --r-muted-2:var(--_muted-2);
  --r-line:var(--_line); --r-line-2:var(--_line-2);
  --r-primary:var(--_primary); --r-primary-bg:var(--_primary-bg);
  --r-accent:var(--_accent);
  --r-success:var(--_success); --r-success-bg:var(--_success-bg);
  --r-error:var(--_error); --r-error-bg:var(--_error-bg);
  --r-warning:var(--_warning); --r-warning-bg:var(--_warning-bg);
  --r-shadow-sm:var(--_shadow-sm); --r-shadow-md:var(--_shadow-md);

  /* ─────────── Префикс --lmk-* ─────────── */
  --lmk-bg:var(--_bg); --lmk-surface:var(--_surface); --lmk-surface-2:var(--_surface-2);
  --lmk-ink:var(--_ink); --lmk-ink-2:var(--_ink-2); --lmk-muted:var(--_muted); --lmk-muted-2:var(--_muted-2);
  --lmk-line:var(--_line); --lmk-line-2:var(--_line-2);
  --lmk-primary:var(--_primary); --lmk-primary-soft:var(--_primary-soft); --lmk-primary-bg:var(--_primary-bg);
  --lmk-accent:var(--_accent);
  --lmk-used:var(--_used); --lmk-used-bg:var(--_used-bg);
  --lmk-success:var(--_success); --lmk-success-bg:var(--_success-bg);
  --lmk-shadow-sm:var(--_shadow-sm); --lmk-shadow-md:var(--_shadow-md); --lmk-shadow-lg:var(--_shadow-lg);

  /* ─────────── Токены шапки --h-* (base.html topbar/header) ─────────── */
  --h-surface:#12141B; --h-ink:var(--_ink); --h-ink-2:var(--_ink-2); --h-muted:var(--_muted);
  --h-line:var(--_line); --h-line-2:var(--_line-2); --h-bg-2:#1F232D;
  --h-accent:#7E93FF; --h-accent-soft:#1C2444;
  --h-glow:rgba(126,132,255,.22);
  --h-shadow-md:var(--_shadow-md); --h-shadow-lg:var(--_shadow-lg);

  /* ─────────── Старые токены шапки --lmrk-* ─────────── */
  --lmrk-text:var(--_ink); --lmrk-muted:var(--_muted); --lmrk-border:var(--_line);
  --lmrk-bg-top:#12141B; --lmrk-accent:#FF6B6B; --lmrk-btn-bg:#2E323E;
}

/* ============================================================================
   КАРКАС base.html — то, что не проходит через токены
   ========================================================================== */

/* Тело и фон */
html[data-theme="dark"] body,
html[data-theme="dark"] body#page-body {
  background: var(--_bg);
  color: var(--_ink);
}

/* Плавный переход при смене темы уже недоступен пользователю (тема глобальная),
   но оставляем корректный цвет выделения и подсветку тапов */
html[data-theme="dark"] ::selection { background: rgba(126,132,255,.32); color: #fff; }

/* Скроллбар */
html[data-theme="dark"] ::-webkit-scrollbar { width: 12px; height: 12px; }
html[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--_bg); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #2E333F; border-radius: 8px; border: 3px solid var(--_bg);
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #3A404E; }

/* ── Плавающая стеклянная шапка (rgba-белый хардкод) ── */
html[data-theme="dark"] .lmrk-header-glass {
  background: rgba(20,22,30,.82);
  border-color: rgba(255,255,255,.07);
}
html[data-theme="dark"] .lmrk-topbar { background: #12141B; }

/* ── Выпадашка поиска (.lmrk-suggest / .sg-*) ── */
html[data-theme="dark"] .lmrk-suggest {
  background: var(--_surface);
  border-color: var(--_line);
  box-shadow: var(--_shadow-lg);
}
html[data-theme="dark"] .sg-section-label,
html[data-theme="dark"] .sg-item,
html[data-theme="dark"] .sg-footer,
html[data-theme="dark"] .sg-hist-head { background: var(--_surface); }
html[data-theme="dark"] .sg-item:hover,
html[data-theme="dark"] .sg-item.focused { background: var(--_surface-2); }
html[data-theme="dark"] .sg-item__name { color: var(--_ink); }
html[data-theme="dark"] .sg-item__meta,
html[data-theme="dark"] .sg-section-label,
html[data-theme="dark"] .sg-footer { color: var(--_muted); }
html[data-theme="dark"] .sg-item__ico--brand,
html[data-theme="dark"] .sg-item__ico--model { background: var(--_surface-2); }
html[data-theme="dark"] .sg-item__ico--vin,
html[data-theme="dark"] .sg-item__ico--model,
html[data-theme="dark"] .sg-item__vin-code { color: var(--_primary); }
html[data-theme="dark"] .sg-item__ico--vin { background: var(--_primary-bg); }
html[data-theme="dark"] .sg-footer { border-top-color: var(--_line-2); }
html[data-theme="dark"] .sg-hist-clear:hover { color: var(--_primary); background: var(--_primary-bg); }

/* ── Боковой drawer (моб. меню lemark) ── */
html[data-theme="dark"] .lmrk-drawer,
html[data-theme="dark"] .lmrk-drawer__panel { background: var(--_surface); color: var(--_ink); }
html[data-theme="dark"] .lmrk-drawer__link:hover { background: var(--_surface-2); }

/* ── Price-lock тост / замок ── */
html[data-theme="dark"] .price-lock-ico {
  background: linear-gradient(135deg,#1F232D,#171A22);
  border-color: var(--_line);
}
html[data-theme="dark"] .price-lock-toast {
  background: var(--_surface);
  border-color: var(--_line);
  box-shadow: var(--_shadow-lg);
}
html[data-theme="dark"] .price-lock-toast-close:hover { background: var(--_surface-2); color: var(--_ink); }

/* ============================================================================
   ФУТЕР и COOKIE-баннеры (Tailwind-утилиты) — общий каркас на всех страницах
   ========================================================================== */
html[data-theme="dark"] footer.bg-white { background: var(--_surface); border-top-color: var(--_line); }
html[data-theme="dark"] footer .border-t { border-top-color: var(--_line); }

html[data-theme="dark"] #cookie-banner,
html[data-theme="dark"] #cookie-settings {
  background: var(--_surface) !important;
  border-color: var(--_line) !important;
}

/* ============================================================================
   Точечные Tailwind-утилиты в тёмной теме
   (перебивают утилиты за счёт большей специфичности html[data-theme=dark] .cls)
   Действуют глобально в dark — это и нужно: серый текст → светлее, белый фон → тёмный.
   ========================================================================== */

/* Поверхности */
html[data-theme="dark"] .bg-white       { background-color: var(--_surface); }
html[data-theme="dark"] .bg-gray-50      { background-color: var(--_bg); }
html[data-theme="dark"] .bg-gray-100     { background-color: var(--_surface-2); }
html[data-theme="dark"] .bg-slate-50     { background-color: var(--_bg); }
html[data-theme="dark"] .bg-blue-50      { background-color: var(--_primary-bg); }

/* Текст */
html[data-theme="dark"] .text-gray-900,
html[data-theme="dark"] .text-gray-800,
html[data-theme="dark"] .text-slate-900,
html[data-theme="dark"] .text-black       { color: var(--_ink); }
html[data-theme="dark"] .text-gray-700,
html[data-theme="dark"] .text-gray-600,
html[data-theme="dark"] .text-slate-700   { color: var(--_ink-2); }
html[data-theme="dark"] .text-gray-500,
html[data-theme="dark"] .text-gray-400,
html[data-theme="dark"] .text-slate-500   { color: var(--_muted); }

/* Границы */
html[data-theme="dark"] .border-gray-100,
html[data-theme="dark"] .border-gray-200,
html[data-theme="dark"] .border-gray-300,
html[data-theme="dark"] .border-slate-200 { border-color: var(--_line); }

/* Hover-состояния навигации */
html[data-theme="dark"] .hover\:bg-gray-50:hover  { background-color: var(--_surface-2); }
html[data-theme="dark"] .hover\:bg-gray-100:hover { background-color: var(--_surface-2); }
html[data-theme="dark"] .hover\:bg-blue-50:hover  { background-color: var(--_primary-bg); }
html[data-theme="dark"] .hover\:text-gray-600:hover { color: var(--_ink-2); }

/* Разделительная граница по умолчанию (Tailwind preflight: border-color #e5e7eb) */
html[data-theme="dark"] .border-t,
html[data-theme="dark"] .border-b,
html[data-theme="dark"] .border { border-color: var(--_line); }

/* ============================================================================
   Мелочи, которые токен-флип не ловит
   ========================================================================== */

/* Полупрозрачные белые «шторки»-градиенты (cutoff-фейды над списками) — затемняем */
html[data-theme="dark"] .lc-cutoff-fade,
html[data-theme="dark"] [class*="cutoff"] {
  background: linear-gradient(180deg, rgba(23,26,34,0) 0%, var(--_surface) 60%) !important;
}

/* Скелетоны-shimmer в тёмной гамме */
html[data-theme="dark"] .skeleton-line,
html[data-theme="dark"] [class*="skeleton"] {
  background: linear-gradient(90deg, #1B1F28 0%, #262B36 50%, #1B1F28 100%) !important;
  background-size: 200% 100% !important;
}

/* Картинки-заглушки «нет фото» — мягче на тёмном */
html[data-theme="dark"] .lm-imgph,
html[data-theme="dark"] [class*="placeholder"] { background: var(--_surface-2); }

/* Инпуты/textarea/select — тёмная подложка на случай, если стиль опирается на дефолт */
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  background-color: var(--_surface-2);
  color: var(--_ink);
  border-color: var(--_line);
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: var(--_muted-2); }