/* ═══════════════════════════════════════════════════════════════════════
   dark-v4.css — dark-mode remap for the inline-styled v4 pages
   (2026-09-11, owner: "fix all dark mode issues in each and every section").

   The v4 design (homepage, use-case pages, nav, footer, tools, blog, legal)
   was converted from a prototype that hard-codes its light palette in
   `style=""` attributes: background:#fff, border:1px solid #ececf4,
   color:#16161d and so on. Class-based rules cannot beat an inline style,
   so in dark mode those cards stayed white while the token-driven text on
   them turned near-white — invisible copy. Same trick as responsive-v4.css:
   attribute selectors on the literal declaration, with !important, mapping
   each literal to the token that replaces it in the dark palette.

   Load order: LAST, after responsive-v4.css. Only ever active under
   [data-theme="dark"]; light mode is untouched by this file.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── surfaces ─────────────────────────────────────────────────────────── */
[data-theme="dark"] [style*="background:#fff;"],
[data-theme="dark"] [style$="background:#fff"],
[data-theme="dark"] [style*="background:#ffffff"],
[data-theme="dark"] [style*="background:#fbfbfd"],
[data-theme="dark"] [style*="background:rgba(255,255,255,.96)"],
[data-theme="dark"] [style*="background:rgba(255,255,255,.82)"] { background: var(--rv-surface) !important; }

[data-theme="dark"] [style*="background:#fafaff"],
[data-theme="dark"] [style*="background:#f7f6fd"],
[data-theme="dark"] [style*="background:#f5f5fa"],
[data-theme="dark"] [style*="background:#f4f4f9"],
[data-theme="dark"] [style*="background:#f4f2ff"],
[data-theme="dark"] [style*="background:#f0f0f6"],
[data-theme="dark"] [style*="background:#f2f2f7"] { background: var(--rv-surface-2) !important; }

[data-theme="dark"] [style*="background:#f0effa"],
[data-theme="dark"] [style*="background:#e7e6f3"],
[data-theme="dark"] [style*="background:#e2e0f0"],
[data-theme="dark"] [style*="background:#ececf4"],
[data-theme="dark"] [style*="background:#ede9fe"],
[data-theme="dark"] [style*="background:rgba(22,22,29,.03)"],
[data-theme="dark"] [style*="background:rgba(22,22,29,.04)"],
[data-theme="dark"] [style*="background:rgba(22,22,29,.05)"],
[data-theme="dark"] [style*="background:rgba(22,22,29,.06)"] { background: var(--rv-surface-4) !important; }

[data-theme="dark"] [style*="background:#fef2f2"] { background: var(--rv-danger-wash) !important; }
[data-theme="dark"] [style*="background:#e8f8f1"],
[data-theme="dark"] [style*="background:#dcfce7"],
[data-theme="dark"] [style*="background:#f0fdf7"] { background: var(--rv-success-wash) !important; }

/* Ink panels (dark cards in light mode) become a raised surface so they
   still read as a distinct block against the dark page. Their copy is
   already #fff / #f0f0f8 so it stays readable. */
[data-theme="dark"] [style*="background:#16161d"],
[data-theme="dark"] [style*="background:#0f0f16"],
[data-theme="dark"] [style*="background:linear-gradient(150deg,#16161d,#241f42)"] { background: var(--rv-surface-2) !important; box-shadow: inset 0 0 0 1px var(--rv-border) !important; }

/* light grey progress tracks / rails */
[data-theme="dark"] [style*="background:#a0a0b2"] { background: var(--rv-muted) !important; }

/* ── borders ──────────────────────────────────────────────────────────── */
[data-theme="dark"] [style*="solid #ececf4"],
[data-theme="dark"] [style*="solid #e4e4ef"],
[data-theme="dark"] [style*="solid #e9e9f1"],
[data-theme="dark"] [style*="solid #e6e1fb"],
[data-theme="dark"] [style*="solid #e3e1f7"],
[data-theme="dark"] [style*="solid #dcdce8"],
[data-theme="dark"] [style*="solid #f1f1f6"],
[data-theme="dark"] [style*="solid #f0f0f7"],
[data-theme="dark"] [style*="solid #e6e6ef"],
[data-theme="dark"] [style*="dashed #d6d4ee"],
[data-theme="dark"] [style*="solid rgba(22,22,29,.05)"],
[data-theme="dark"] [style*="solid rgba(22,22,29,.06)"],
[data-theme="dark"] [style*="solid rgba(22,22,29,.07)"],
[data-theme="dark"] [style*="solid rgba(22,22,29,.08)"] { border-color: var(--rv-border) !important; }

[data-theme="dark"] [style*="solid #ddd6fe"],
[data-theme="dark"] [style*="solid rgba(109,92,230,.22)"] { border-color: var(--rv-primary-pale) !important; }
[data-theme="dark"] [style*="solid #b9e8d4"] { border-color: var(--rv-success-pale) !important; }
[data-theme="dark"] [style*="solid #fecaca"] { border-color: var(--rv-danger-pale) !important; }
/* avatar rings sit on a surface, so the ring takes the surface colour */
[data-theme="dark"] [style*="solid #fbfbfd"],
[data-theme="dark"] [style*="solid #fff;"],
[data-theme="dark"] [style*="solid #fff\""] { border-color: var(--rv-surface) !important; }

/* ── text ─────────────────────────────────────────────────────────────── */
[data-theme="dark"] [style*="color:#16161d"]:not([style*="background-color:#16161d"]),
[data-theme="dark"] [style*="color:#0f0f16"]:not([style*="background-color:#0f0f16"]),
[data-theme="dark"] [style*="color:#1a1a24"] { color: var(--rv-ink) !important; }
[data-theme="dark"] [style*="color:#40404f"] { color: var(--rv-ink-soft) !important; }
[data-theme="dark"] [style*="color:#5c5c70"] { color: var(--rv-body) !important; }
[data-theme="dark"] [style*="color:#8e8ea3"],
[data-theme="dark"] [style*="color:#77778c"],
[data-theme="dark"] [style*="color:#7c7c92"],
[data-theme="dark"] [style*="color:#6a6a7e"],
[data-theme="dark"] [style*="color:#8a8aa0"] { color: var(--rv-muted-2) !important; }
[data-theme="dark"] [style*="color:#6d5ce6"] { color: var(--rv-primary) !important; }
[data-theme="dark"] [style*="color:#5b4dd1"],
[data-theme="dark"] [style*="color:#4c3fbf"] { color: var(--rv-primary-bright) !important; }
[data-theme="dark"] [style*="color:#c81e1e"] { color: var(--rv-danger) !important; }
[data-theme="dark"] [style*="color:#00915f"] { color: var(--rv-success-deep) !important; }

/* ── hover states from home-v4-states.css (class-based, light literals) ── */
[data-theme="dark"] .hvx2:hover, [data-theme="dark"] .hvx3:hover, [data-theme="dark"] .hvx5:hover,
[data-theme="dark"] .hvx9:hover, [data-theme="dark"] .hvx28:hover { background: var(--rv-surface-3) !important; }
[data-theme="dark"] .hvx2:hover, [data-theme="dark"] .hvx35:hover, [data-theme="dark"] .hvx36:hover { color: var(--rv-ink) !important; }
/* .hvx26 / .hvx33 are light pills with dark text — they stay light on hover, so #0f0f16 / #16161d are right there. */

/* ── native controls ──────────────────────────────────────────────────── */
[data-theme="dark"] .hv-design input:not([type=range]):not([type=checkbox]):not([type=radio]),
[data-theme="dark"] .hv-design textarea,
[data-theme="dark"] .hv-design select { color: var(--rv-ink); color-scheme: dark; }
[data-theme="dark"] .hv-design input::placeholder,
[data-theme="dark"] .hv-design textarea::placeholder { color: var(--rv-muted); }

/* ── serialised forms ─────────────────────────────────────────────────
   Once JS touches el.style (home-v4.js sets position/display on the drop
   zone, mode cards …) the browser rewrites the whole attribute as
   "background: rgb(250, 250, 255)". Same literals, second spelling. */
[data-theme="dark"] [style*="background: rgb(255, 255, 255)"],
[data-theme="dark"] [style*="background-color: rgb(255, 255, 255)"] { background-color: var(--rv-surface) !important; }
[data-theme="dark"] [style*="background: rgb(250, 250, 255)"],
[data-theme="dark"] [style*="background-color: rgb(250, 250, 255)"],
[data-theme="dark"] [style*="background: rgb(247, 246, 253)"],
[data-theme="dark"] [style*="background: rgb(244, 242, 255)"] { background-color: var(--rv-surface-2) !important; }
[data-theme="dark"] [style*="background: rgb(240, 239, 250)"] { background-color: var(--rv-surface-4) !important; }
[data-theme="dark"] [style*="background: rgb(22, 22, 29)"],
[data-theme="dark"] [style*="background-color: rgb(22, 22, 29)"] { background-color: var(--rv-surface-2) !important; }
[data-theme="dark"] [style*="solid rgb(236, 236, 244)"],
[data-theme="dark"] [style*="dashed rgb(214, 212, 238)"],
[data-theme="dark"] [style*="solid rgb(228, 228, 239)"] { border-color: var(--rv-border) !important; }
[data-theme="dark"] [style*="color: rgb(22, 22, 29)"]:not([style*="background-color: rgb(22, 22, 29)"]) { color: var(--rv-ink) !important; }
[data-theme="dark"] [style*="color: rgb(92, 92, 112)"] { color: var(--rv-body) !important; }
[data-theme="dark"] [style*="color: rgb(142, 142, 163)"] { color: var(--rv-muted-2) !important; }

/* footer wordmark (inline text-clipped light gradient) */
[data-theme="dark"] [style*="linear-gradient(180deg,#e7e4fb"] { background: linear-gradient(180deg, #2a2450 0%, #14141f 90%) !important; -webkit-background-clip: text !important; background-clip: text !important; }

/* use-case hero badges (config/usecases.php badge_tone: light wash + dark text) */
[data-theme="dark"] [style*="background:#eef6ff"] { background: #10203a !important; border-color: #1e3a6e !important; color: #8ab4ff !important; }
[data-theme="dark"] [style*="background:#fffbeb"] { background: var(--rv-warn-wash, #2a2210) !important; border-color: #5c4a12 !important; color: #fbbf24 !important; }
[data-theme="dark"] [style*="background:#fef2f2"] { color: var(--rv-danger) !important; border-color: var(--rv-danger-pale) !important; }
[data-theme="dark"] [style*="background:#f0effa"][style*="color:#5b4dd1"] { color: var(--rv-primary) !important; border-color: var(--rv-primary-pale) !important; }