/* Hand-written dark overrides for the Tailwind-compiled chrome (site.css) and the
   header's inline dropdown CSS. Scoped to :root[data-theme="dark"] (the toggle-driven
   theme); NO Tailwind rebuild. Loaded globally by base.html — inert in light mode.
   Dark hexes mirror atlas.css :root[data-theme="dark"].
   NB: distinct from catalog-dark.css, which is the catalog's always-on dark scoped
   under the `body.theme-dark` marker class — this file must NOT use that substring
   (tests assert `"theme-dark" not in body` on non-catalog pages). */

:root[data-theme="dark"] body{background:#17100a;color:#f2e7d5}

/* header (bg-canvas/85 + border-line/70 in Tailwind) */
:root[data-theme="dark"] header.sticky{background:rgba(23,16,10,.85);border-color:rgba(59,44,28,.75)}
:root[data-theme="dark"] header .text-espresso{color:#f2e7d5}   /* brand wordmark */
:root[data-theme="dark"] header .text-ink{color:#e6d6bd}         /* nav links */

/* header "Энциклопедия"/"Каталог" dropdown (hardcoded hex lives in header.html <style>) */
:root[data-theme="dark"] .nav-dd-menu{background:#221812;border-color:#3b2c1c;box-shadow:0 14px 30px rgba(0,0,0,.5)}
:root[data-theme="dark"] .nav-dd-menu a{color:#e6d6bd}
:root[data-theme="dark"] .nav-dd-menu a:hover,
:root[data-theme="dark"] .nav-dd-menu a:focus{background:#2c2016;color:#e08a4f}
:root[data-theme="dark"] .nav-dd-menu .dd-eyebrow{color:#d8b16f}

/* footer is already espresso-dark (bg-espresso) in both themes — intentionally left as-is. */

/* ── Site-wide flip of the core Tailwind semantic tokens (phase-1.5): makes
   non-encyclopedia pages (landing, /podbor/, «О нас») readable in dark, since bare
   utility classes don't flip on their own. rgb(../var(--tw-*-opacity)) form preserves
   opacity modifiers. LEFT as-is (text-on-dark / already-dark): text-canvas, text-white,
   bg-espresso*, bg-cognac*, bg-brass*.
   NB: [class*="..."] substring selectors (not bare classes) — Tailwind opacity
   modifiers compile to their own class (text-ink/85, bg-surface/40, ...) which a
   bare `.text-ink`/`.bg-surface` selector never matches, leaving them light/invisible
   in dark. Substring matching catches every modifier at once. `[class*="text-cognac"]`
   covers text-cognac AND text-cognac-700 (and their hover:/group-hover: variants —
   those compile to the same literal substring in the class attribute). ── */
:root[data-theme="dark"] [class*="text-ink"]{color:rgb(242 231 213/var(--tw-text-opacity,1))}
:root[data-theme="dark"] [class*="text-espresso"]{color:rgb(242 231 213/var(--tw-text-opacity,1))}
:root[data-theme="dark"] [class*="text-muted"]{color:rgb(169 143 110/var(--tw-text-opacity,1))}
:root[data-theme="dark"] [class*="text-cognac"]{color:rgb(224 138 79/var(--tw-text-opacity,1))}
:root[data-theme="dark"] [class*="text-brass"]{color:rgb(216 177 111/var(--tw-text-opacity,1))}
:root[data-theme="dark"] [class*="bg-surface"]{background-color:rgb(34 24 18/var(--tw-bg-opacity,1))}
/* CAUTION: "bg-canvas" (not "canvas") — must not also catch `text-canvas` (text-on-dark, left alone) */
:root[data-theme="dark"] [class*="bg-canvas"]{background-color:rgb(23 16 10/var(--tw-bg-opacity,1))}
/* hairlines: catch every opacity variant of border-line / ring-line at once */
:root[data-theme="dark"] [class*="border-line"]{border-color:#3b2c1c}
:root[data-theme="dark"] [class*="ring-line"]{--tw-ring-color:#3b2c1c}

/* ── Hardcoded-light surfaces: bare `.bg-white` (an *exact* class match — NOT a
   substring — so `bg-white/10`/`bg-white/15` glass chips on the already-dark hero
   gradients on /podbor/ and / are correctly left alone). Darkens the /podbor/ form
   card, «О нас» principle cards, and catalog/journal product-card image mounts so
   the (now-cream) text-ink inside them stays legible instead of cream-on-white. ── */
:root[data-theme="dark"] .bg-white{background-color:#221812}

/* .btn-ghost and .formfield (input/select/textarea) are Tailwind @apply component
   classes: their colors are baked into one compiled rule at build time, so the
   generic [class*="text-ink"] etc. flips above never see them (the rendered element
   only carries the class name "btn-ghost"/"formfield", not "text-ink"/"bg-white").
   Without this, .btn-ghost ("Выбрать изделие" on /) renders dark-ink-on-dark-body
   (invisible), and .formfield inputs (/podbor/ form) stay stark white boxes. */
:root[data-theme="dark"] .btn-ghost{border-color:#3b2c1c;color:#f2e7d5}
:root[data-theme="dark"] .btn-ghost:hover{border-color:#f2e7d5}
:root[data-theme="dark"] .formfield input,
:root[data-theme="dark"] .formfield select,
:root[data-theme="dark"] .formfield textarea{background-color:#2c2016;border-color:#3b2c1c;color:#f2e7d5}
:root[data-theme="dark"] .formfield input::placeholder,
:root[data-theme="dark"] .formfield textarea::placeholder{color:#a98f6e;opacity:1}
:root[data-theme="dark"] .formfield input:focus,
:root[data-theme="dark"] .formfield select:focus,
:root[data-theme="dark"] .formfield textarea:focus{border-color:#e08a4f}
:root[data-theme="dark"] .formfield select{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23f2e7d5' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] .formfield option{background:#221812;color:#f2e7d5}