/* ══════════════════════════════════════════════════════════════════════════
   AminDMS · theme.css
   Single source of truth for the dark / light appearance of the Admin app,
   the Salesman Portal and the Security app.

   HOW IT WORKS
   ------------
   1. Design tokens live on :root, overridden by [data-theme="light"].
   2. The app was written dark-first with literal hex values baked into
      Tailwind arbitrary utilities (bg-[#1c1c21], text-[#6b6b80], ...) and
      into per-view <style> blocks. Rewriting ~7,000 literals across 60 files
      would be both risky and impossible to keep correct for the markup that
      views inject at runtime via innerHTML.
      Instead every literal-hex utility is REMAPPED here onto its token, so
      one variable now drives both themes everywhere — including dynamically
      rendered rows, modals and sheets.
   3. Selectors are prefixed with :root purely for specificity: (0,2,0) beats
      Tailwind's own (0,1,0) regardless of stylesheet order, while still
      losing to hover/focus variants (0,3,0) so interactive states keep working.

   Nothing in here uses !important, so a component can always opt out with a
   more specific rule.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: dark;

  /* ── surfaces ─────────────────────────────────────────────── */
  --bg:            #0d0d0f;   /* page */
  --surface:       #151518;   /* panels, sidebar, modals */
  --surface-2:     #1c1c21;   /* cards sitting on a panel */
  --surface-3:     #222228;   /* raised / hovered rows */
  --input-bg:      #0d0d0f;   /* form fields, inset wells */
  --chip:          #2a2a32;   /* pills, tags, segmented buttons */
  --chip-strong:   #333340;

  /* ── lines ────────────────────────────────────────────────── */
  --border:        #2a2a32;
  --border-soft:   #1e1e24;
  --border-strong: #3a3a44;

  /* ── type ─────────────────────────────────────────────────── */
  /* --text-dim and --text-faint were #6b6b80 / #4a4a5a, which put form labels
     and field hints at 3.2:1 and 2.0:1 against the card they sit on. Both are
     lifted here to real, readable values while keeping four distinct steps in
     the ramp, so the dark theme still looks like itself. */
  --text:       #ffffff;
  --text-soft:  #b0b0c2;
  --text-muted: #9797ad;
  --text-dim:   #86869e;
  --text-faint: #75758b;   /* placeholders, hints, disabled */
  --text-ghost: #62627a;   /* decorative only — dividers, watermarks */

  /* ── effects ──────────────────────────────────────────────── */
  --hover:        rgba(255,255,255,.05);
  --hover-strong: rgba(255,255,255,.10);
  --shadow:       rgba(0,0,0,.40);
  --scrim:        rgba(0,0,0,.80);
  --scrim-soft:   rgba(0,0,0,.60);
  --veil:         rgba(255,255,255,.15);  /* badge on a solid surface */

  /* ── semantic (hue) ───────────────────────────────────────── */
  /* Two shades per hue: the bare name is INK (text, icons), -strong is the
     FILL a solid badge or button uses. In dark they are near-identical; in
     light the ink shade drops far enough to clear AA even when it sits on
     its own 10-25% tint, which is how every status pill in the app is built. */
  --c-red:     #f87171;  --c-red-strong:     #ef4444;
  --c-green:   #10b981;  --c-green-strong:   #10b981;
  --c-amber:   #fbbf24;  --c-amber-strong:   #f59e0b;
  --c-blue:    #60a5fa;  --c-blue-strong:    #3b82f6;
  --c-purple:  #c084fc;  --c-purple-strong:  #a855f7;
  --c-violet:  #a78bfa;  --c-violet-strong:  #8b5cf6;
  --c-orange:  #fb923c;  --c-orange-strong:  #f97316;
  --c-yellow:  #facc15;  --c-yellow-strong:  #eab308;
  --c-cyan:    #22d3ee;  --c-sky:            #38bdf8;
  --c-pink:    #f472b6;  --c-rose:           #fb7185;
  --c-teal:    #2dd4bf;  --c-indigo:         #818cf8;  --c-lime: #a3e635;

  /* Ink that sits ON a solid accent / semantic fill. Stays white in both
     themes because those fills stay saturated in both themes. */
  --on-solid: #ffffff;
}

[data-theme="light"] {
  color-scheme: light;

  --bg:            #eceff4;
  --surface:       #f7f9fc;
  --surface-2:     #ffffff;
  --surface-3:     #eff2f7;
  --input-bg:      #ffffff;
  --chip:          #e7ebf2;
  --chip-strong:   #d9dfe9;

  --border:        #e0e4ec;
  --border-soft:   #ebeef3;
  --border-strong: #c6ccd8;

  /* Each step clears AA (4.5:1) against every light surface it can land on,
     which is why the scale is tighter than the dark one — on a white card
     there is far less room below the text before it stops being readable. */
  --text:       #14161d;
  --text-soft:  #343a49;
  --text-muted: #4e5668;
  --text-dim:   #5f677a;
  --text-faint: #656d80;
  --text-ghost: #868ea0;

  --hover:        rgba(15,23,42,.045);
  --hover-strong: rgba(15,23,42,.085);
  --shadow:       rgba(15,23,42,.10);
  --scrim:        rgba(15,23,42,.45);
  --scrim-soft:   rgba(15,23,42,.30);
  --veil:         rgba(15,23,42,.08);

  /* Darkened so they clear WCAG AA against a light surface. The -strong
     pair keeps the saturated fill colour used for solid badges/buttons. */
  --c-red:     #b91c1c;  --c-red-strong:     #dc2626;
  --c-green:   #065f46;  --c-green-strong:   #059669;
  --c-amber:   #92400e;  --c-amber-strong:   #d97706;
  --c-blue:    #1d4ed8;  --c-blue-strong:    #2563eb;
  --c-purple:  #7e22ce;  --c-purple-strong:  #9333ea;
  --c-violet:  #6d28d9;  --c-violet-strong:  #7c3aed;
  --c-orange:  #9a3412;  --c-orange-strong:  #ea580c;
  --c-yellow:  #854d0e;  --c-yellow-strong:  #ca8a04;
  --c-cyan:    #155e75;  --c-sky:            #075985;
  --c-pink:    #9d174d;  --c-rose:           #9f1239;
  --c-teal:    #115e59;  --c-indigo:         #3730a3;  --c-lime: #3f6212;
}

/* ── accent ───────────────────────────────────────────────────────────────
   The accent keeps its hue in both themes as a FILL (a solid orange button
   with white ink reads the same either way). As INK it cannot: #f97316 on a
   white card is 2.7:1. --accent-ink is that same hue pulled down to an
   AA-clearing shade, and is what every `color:` declaration now uses.
   In dark the two are identical, so nothing about the current look moves. */
:root { --accent-ink: var(--accent); --accent-ink-strong: var(--accent-strong); }

[data-theme="light"] {
  --accent-soft:   color-mix(in srgb, var(--accent) 12%, #ffffff);
  --accent-border: color-mix(in srgb, var(--accent) 38%, #ffffff);
}
[data-theme="light"][data-accent="orange"]{--accent-ink:#ab3b0a;--accent-ink-strong:#9a3412;}
[data-theme="light"][data-accent="red"]   {--accent-ink:#b91c1c;--accent-ink-strong:#991b1b;}
[data-theme="light"][data-accent="blue"]  {--accent-ink:#1d4ed8;--accent-ink-strong:#1e40af;}
[data-theme="light"][data-accent="green"] {--accent-ink:#166534;--accent-ink-strong:#14532d;}
[data-theme="light"][data-accent="yellow"]{--accent-ink:#854d0e;--accent-ink-strong:#713f12;}
[data-theme="light"][data-accent="purple"]{--accent-ink:#7e22ce;--accent-ink-strong:#6b21a8;}
[data-theme="light"][data-accent="black"] {--accent-ink:#1e293b;--accent-ink-strong:#0f172a;}


/* ────────── accent used as ink (Tailwind utilities) ────────── */
[data-theme="light"] .text-\[var\(--accent\)\]{color:var(--accent-ink)}
[data-theme="light"] .text-\[var\(--accent-strong\)\]{color:var(--accent-ink-strong)}
[data-theme="light"] .hover\:text-\[var\(--accent\)\]:hover{color:var(--accent-ink)}
[data-theme="light"] .hover\:text-\[var\(--accent-strong\)\]:hover{color:var(--accent-ink-strong)}
[data-theme="light"] .group:hover .group-hover\:text-\[var\(--accent\)\]{color:var(--accent-ink)}
[data-theme="light"] .group:hover .group-hover\:text-\[var\(--accent-strong\)\]{color:var(--accent-ink-strong)}
[data-theme="light"] .focus\:text-\[var\(--accent\)\]:focus{color:var(--accent-ink)}
[data-theme="light"] .focus\:text-\[var\(--accent-strong\)\]:focus{color:var(--accent-ink-strong)}
[data-theme="light"] .border-\[var\(--accent\)\]{border-color:var(--accent-ink)}

/* ────────── literal-hex → token remap · backgrounds ────────── */
:root .bg-\[\#0c0c0e\]{background-color:var(--bg)}
:root .hover\:bg-\[\#0c0c0e\]:hover{background-color:var(--bg)}
:root .focus\:bg-\[\#0c0c0e\]:focus{background-color:var(--bg)}
:root .active\:bg-\[\#0c0c0e\]:active{background-color:var(--bg)}
:root .group:hover .group-hover\:bg-\[\#0c0c0e\]{background-color:var(--bg)}
:root .disabled\:bg-\[\#0c0c0e\]:disabled{background-color:var(--bg)}
:root .bg-\[\#0d0d0f\]{background-color:var(--input-bg)}
:root .hover\:bg-\[\#0d0d0f\]:hover{background-color:var(--input-bg)}
:root .focus\:bg-\[\#0d0d0f\]:focus{background-color:var(--input-bg)}
:root .active\:bg-\[\#0d0d0f\]:active{background-color:var(--input-bg)}
:root .group:hover .group-hover\:bg-\[\#0d0d0f\]{background-color:var(--input-bg)}
:root .disabled\:bg-\[\#0d0d0f\]:disabled{background-color:var(--input-bg)}
:root .bg-\[\#111113\]{background-color:var(--bg)}
:root .hover\:bg-\[\#111113\]:hover{background-color:var(--bg)}
:root .focus\:bg-\[\#111113\]:focus{background-color:var(--bg)}
:root .active\:bg-\[\#111113\]:active{background-color:var(--bg)}
:root .group:hover .group-hover\:bg-\[\#111113\]{background-color:var(--bg)}
:root .disabled\:bg-\[\#111113\]:disabled{background-color:var(--bg)}
:root .bg-\[\#111114\]{background-color:var(--bg)}
:root .hover\:bg-\[\#111114\]:hover{background-color:var(--bg)}
:root .focus\:bg-\[\#111114\]:focus{background-color:var(--bg)}
:root .active\:bg-\[\#111114\]:active{background-color:var(--bg)}
:root .group:hover .group-hover\:bg-\[\#111114\]{background-color:var(--bg)}
:root .disabled\:bg-\[\#111114\]:disabled{background-color:var(--bg)}
:root .bg-\[\#111118\]{background-color:var(--bg)}
:root .hover\:bg-\[\#111118\]:hover{background-color:var(--bg)}
:root .focus\:bg-\[\#111118\]:focus{background-color:var(--bg)}
:root .active\:bg-\[\#111118\]:active{background-color:var(--bg)}
:root .group:hover .group-hover\:bg-\[\#111118\]{background-color:var(--bg)}
:root .disabled\:bg-\[\#111118\]:disabled{background-color:var(--bg)}
:root .bg-\[\#151518\]{background-color:var(--surface)}
:root .hover\:bg-\[\#151518\]:hover{background-color:var(--surface)}
:root .focus\:bg-\[\#151518\]:focus{background-color:var(--surface)}
:root .active\:bg-\[\#151518\]:active{background-color:var(--surface)}
:root .group:hover .group-hover\:bg-\[\#151518\]{background-color:var(--surface)}
:root .disabled\:bg-\[\#151518\]:disabled{background-color:var(--surface)}
:root .bg-\[\#1a1a1f\]{background-color:var(--surface)}
:root .hover\:bg-\[\#1a1a1f\]:hover{background-color:var(--surface)}
:root .focus\:bg-\[\#1a1a1f\]:focus{background-color:var(--surface)}
:root .active\:bg-\[\#1a1a1f\]:active{background-color:var(--surface)}
:root .group:hover .group-hover\:bg-\[\#1a1a1f\]{background-color:var(--surface)}
:root .disabled\:bg-\[\#1a1a1f\]:disabled{background-color:var(--surface)}
:root .bg-\[\#1a1a20\]{background-color:var(--surface)}
:root .hover\:bg-\[\#1a1a20\]:hover{background-color:var(--surface)}
:root .focus\:bg-\[\#1a1a20\]:focus{background-color:var(--surface)}
:root .active\:bg-\[\#1a1a20\]:active{background-color:var(--surface)}
:root .group:hover .group-hover\:bg-\[\#1a1a20\]{background-color:var(--surface)}
:root .disabled\:bg-\[\#1a1a20\]:disabled{background-color:var(--surface)}
:root .bg-\[\#1a1a24\]{background-color:var(--surface)}
:root .hover\:bg-\[\#1a1a24\]:hover{background-color:var(--surface)}
:root .focus\:bg-\[\#1a1a24\]:focus{background-color:var(--surface)}
:root .active\:bg-\[\#1a1a24\]:active{background-color:var(--surface)}
:root .group:hover .group-hover\:bg-\[\#1a1a24\]{background-color:var(--surface)}
:root .disabled\:bg-\[\#1a1a24\]:disabled{background-color:var(--surface)}
:root .bg-\[\#1c1c21\]{background-color:var(--surface-2)}
:root .hover\:bg-\[\#1c1c21\]:hover{background-color:var(--surface-2)}
:root .focus\:bg-\[\#1c1c21\]:focus{background-color:var(--surface-2)}
:root .active\:bg-\[\#1c1c21\]:active{background-color:var(--surface-2)}
:root .group:hover .group-hover\:bg-\[\#1c1c21\]{background-color:var(--surface-2)}
:root .disabled\:bg-\[\#1c1c21\]:disabled{background-color:var(--surface-2)}
:root .bg-\[\#1e1e24\]{background-color:var(--surface-2)}
:root .hover\:bg-\[\#1e1e24\]:hover{background-color:var(--surface-2)}
:root .focus\:bg-\[\#1e1e24\]:focus{background-color:var(--surface-2)}
:root .active\:bg-\[\#1e1e24\]:active{background-color:var(--surface-2)}
:root .group:hover .group-hover\:bg-\[\#1e1e24\]{background-color:var(--surface-2)}
:root .disabled\:bg-\[\#1e1e24\]:disabled{background-color:var(--surface-2)}
:root .bg-\[\#222228\]{background-color:var(--surface-3)}
:root .hover\:bg-\[\#222228\]:hover{background-color:var(--surface-3)}
:root .focus\:bg-\[\#222228\]:focus{background-color:var(--surface-3)}
:root .active\:bg-\[\#222228\]:active{background-color:var(--surface-3)}
:root .group:hover .group-hover\:bg-\[\#222228\]{background-color:var(--surface-3)}
:root .disabled\:bg-\[\#222228\]:disabled{background-color:var(--surface-3)}
:root .bg-\[\#252529\]{background-color:var(--surface-3)}
:root .hover\:bg-\[\#252529\]:hover{background-color:var(--surface-3)}
:root .focus\:bg-\[\#252529\]:focus{background-color:var(--surface-3)}
:root .active\:bg-\[\#252529\]:active{background-color:var(--surface-3)}
:root .group:hover .group-hover\:bg-\[\#252529\]{background-color:var(--surface-3)}
:root .disabled\:bg-\[\#252529\]:disabled{background-color:var(--surface-3)}
:root .bg-\[\#252530\]{background-color:var(--surface-2)}
:root .hover\:bg-\[\#252530\]:hover{background-color:var(--surface-2)}
:root .focus\:bg-\[\#252530\]:focus{background-color:var(--surface-2)}
:root .active\:bg-\[\#252530\]:active{background-color:var(--surface-2)}
:root .group:hover .group-hover\:bg-\[\#252530\]{background-color:var(--surface-2)}
:root .disabled\:bg-\[\#252530\]:disabled{background-color:var(--surface-2)}
:root .bg-\[\#2a2a32\]{background-color:var(--chip)}
:root .hover\:bg-\[\#2a2a32\]:hover{background-color:var(--chip)}
:root .focus\:bg-\[\#2a2a32\]:focus{background-color:var(--chip)}
:root .active\:bg-\[\#2a2a32\]:active{background-color:var(--chip)}
:root .group:hover .group-hover\:bg-\[\#2a2a32\]{background-color:var(--chip)}
:root .disabled\:bg-\[\#2a2a32\]:disabled{background-color:var(--chip)}
:root .bg-\[\#2a2a36\]{background-color:var(--surface-3)}
:root .hover\:bg-\[\#2a2a36\]:hover{background-color:var(--surface-3)}
:root .focus\:bg-\[\#2a2a36\]:focus{background-color:var(--surface-3)}
:root .active\:bg-\[\#2a2a36\]:active{background-color:var(--surface-3)}
:root .group:hover .group-hover\:bg-\[\#2a2a36\]{background-color:var(--surface-3)}
:root .disabled\:bg-\[\#2a2a36\]:disabled{background-color:var(--surface-3)}
:root .bg-\[\#2a2a3a\]{background-color:var(--surface-3)}
:root .hover\:bg-\[\#2a2a3a\]:hover{background-color:var(--surface-3)}
:root .focus\:bg-\[\#2a2a3a\]:focus{background-color:var(--surface-3)}
:root .active\:bg-\[\#2a2a3a\]:active{background-color:var(--surface-3)}
:root .group:hover .group-hover\:bg-\[\#2a2a3a\]{background-color:var(--surface-3)}
:root .disabled\:bg-\[\#2a2a3a\]:disabled{background-color:var(--surface-3)}
:root .bg-\[\#2f2f36\]{background-color:var(--surface-3)}
:root .hover\:bg-\[\#2f2f36\]:hover{background-color:var(--surface-3)}
:root .focus\:bg-\[\#2f2f36\]:focus{background-color:var(--surface-3)}
:root .active\:bg-\[\#2f2f36\]:active{background-color:var(--surface-3)}
:root .group:hover .group-hover\:bg-\[\#2f2f36\]{background-color:var(--surface-3)}
:root .disabled\:bg-\[\#2f2f36\]:disabled{background-color:var(--surface-3)}
:root .bg-\[\#333\]{background-color:var(--chip-strong)}
:root .hover\:bg-\[\#333\]:hover{background-color:var(--chip-strong)}
:root .focus\:bg-\[\#333\]:focus{background-color:var(--chip-strong)}
:root .active\:bg-\[\#333\]:active{background-color:var(--chip-strong)}
:root .group:hover .group-hover\:bg-\[\#333\]{background-color:var(--chip-strong)}
:root .disabled\:bg-\[\#333\]:disabled{background-color:var(--chip-strong)}
:root .bg-\[\#333340\]{background-color:var(--chip-strong)}
:root .hover\:bg-\[\#333340\]:hover{background-color:var(--chip-strong)}
:root .focus\:bg-\[\#333340\]:focus{background-color:var(--chip-strong)}
:root .active\:bg-\[\#333340\]:active{background-color:var(--chip-strong)}
:root .group:hover .group-hover\:bg-\[\#333340\]{background-color:var(--chip-strong)}
:root .disabled\:bg-\[\#333340\]:disabled{background-color:var(--chip-strong)}
:root .bg-\[\#3a3a44\]{background-color:var(--chip-strong)}
:root .hover\:bg-\[\#3a3a44\]:hover{background-color:var(--chip-strong)}
:root .focus\:bg-\[\#3a3a44\]:focus{background-color:var(--chip-strong)}
:root .active\:bg-\[\#3a3a44\]:active{background-color:var(--chip-strong)}
:root .group:hover .group-hover\:bg-\[\#3a3a44\]{background-color:var(--chip-strong)}
:root .disabled\:bg-\[\#3a3a44\]:disabled{background-color:var(--chip-strong)}
:root .bg-\[\#8888a0\]{background-color:var(--text-muted)}
:root .hover\:bg-\[\#8888a0\]:hover{background-color:var(--text-muted)}
:root .focus\:bg-\[\#8888a0\]:focus{background-color:var(--text-muted)}
:root .active\:bg-\[\#8888a0\]:active{background-color:var(--text-muted)}
:root .group:hover .group-hover\:bg-\[\#8888a0\]{background-color:var(--text-muted)}
:root .disabled\:bg-\[\#8888a0\]:disabled{background-color:var(--text-muted)}

/* ────────── literal-hex → token remap · text ────────── */
:root .text-\[\#10b981\]{color:var(--c-green)}
:root .hover\:text-\[\#10b981\]:hover{color:var(--c-green)}
:root .focus\:text-\[\#10b981\]:focus{color:var(--c-green)}
:root .active\:text-\[\#10b981\]:active{color:var(--c-green)}
:root .group:hover .group-hover\:text-\[\#10b981\]{color:var(--c-green)}
:root .disabled\:text-\[\#10b981\]:disabled{color:var(--c-green)}
:root .text-\[\#2a2a32\]{color:var(--text-ghost)}
:root .hover\:text-\[\#2a2a32\]:hover{color:var(--text-ghost)}
:root .focus\:text-\[\#2a2a32\]:focus{color:var(--text-ghost)}
:root .active\:text-\[\#2a2a32\]:active{color:var(--text-ghost)}
:root .group:hover .group-hover\:text-\[\#2a2a32\]{color:var(--text-ghost)}
:root .disabled\:text-\[\#2a2a32\]:disabled{color:var(--text-ghost)}
:root .text-\[\#3a3a44\]{color:var(--text-ghost)}
:root .hover\:text-\[\#3a3a44\]:hover{color:var(--text-ghost)}
:root .focus\:text-\[\#3a3a44\]:focus{color:var(--text-ghost)}
:root .active\:text-\[\#3a3a44\]:active{color:var(--text-ghost)}
:root .group:hover .group-hover\:text-\[\#3a3a44\]{color:var(--text-ghost)}
:root .disabled\:text-\[\#3a3a44\]:disabled{color:var(--text-ghost)}
:root .text-\[\#3a3a45\]{color:var(--text-ghost)}
:root .hover\:text-\[\#3a3a45\]:hover{color:var(--text-ghost)}
:root .focus\:text-\[\#3a3a45\]:focus{color:var(--text-ghost)}
:root .active\:text-\[\#3a3a45\]:active{color:var(--text-ghost)}
:root .group:hover .group-hover\:text-\[\#3a3a45\]{color:var(--text-ghost)}
:root .disabled\:text-\[\#3a3a45\]:disabled{color:var(--text-ghost)}
:root .text-\[\#3a3a48\]{color:var(--text-ghost)}
:root .hover\:text-\[\#3a3a48\]:hover{color:var(--text-ghost)}
:root .focus\:text-\[\#3a3a48\]:focus{color:var(--text-ghost)}
:root .active\:text-\[\#3a3a48\]:active{color:var(--text-ghost)}
:root .group:hover .group-hover\:text-\[\#3a3a48\]{color:var(--text-ghost)}
:root .disabled\:text-\[\#3a3a48\]:disabled{color:var(--text-ghost)}
:root .text-\[\#3a3a4a\]{color:var(--text-ghost)}
:root .hover\:text-\[\#3a3a4a\]:hover{color:var(--text-ghost)}
:root .focus\:text-\[\#3a3a4a\]:focus{color:var(--text-ghost)}
:root .active\:text-\[\#3a3a4a\]:active{color:var(--text-ghost)}
:root .group:hover .group-hover\:text-\[\#3a3a4a\]{color:var(--text-ghost)}
:root .disabled\:text-\[\#3a3a4a\]:disabled{color:var(--text-ghost)}
:root .text-\[\#444\]{color:var(--text-faint)}
:root .hover\:text-\[\#444\]:hover{color:var(--text-faint)}
:root .focus\:text-\[\#444\]:focus{color:var(--text-faint)}
:root .active\:text-\[\#444\]:active{color:var(--text-faint)}
:root .group:hover .group-hover\:text-\[\#444\]{color:var(--text-faint)}
:root .disabled\:text-\[\#444\]:disabled{color:var(--text-faint)}
:root .text-\[\#4a4a55\]{color:var(--text-faint)}
:root .hover\:text-\[\#4a4a55\]:hover{color:var(--text-faint)}
:root .focus\:text-\[\#4a4a55\]:focus{color:var(--text-faint)}
:root .active\:text-\[\#4a4a55\]:active{color:var(--text-faint)}
:root .group:hover .group-hover\:text-\[\#4a4a55\]{color:var(--text-faint)}
:root .disabled\:text-\[\#4a4a55\]:disabled{color:var(--text-faint)}
:root .text-\[\#4a4a5a\]{color:var(--text-faint)}
:root .hover\:text-\[\#4a4a5a\]:hover{color:var(--text-faint)}
:root .focus\:text-\[\#4a4a5a\]:focus{color:var(--text-faint)}
:root .active\:text-\[\#4a4a5a\]:active{color:var(--text-faint)}
:root .group:hover .group-hover\:text-\[\#4a4a5a\]{color:var(--text-faint)}
:root .disabled\:text-\[\#4a4a5a\]:disabled{color:var(--text-faint)}
:root .text-\[\#555566\]{color:var(--text-faint)}
:root .hover\:text-\[\#555566\]:hover{color:var(--text-faint)}
:root .focus\:text-\[\#555566\]:focus{color:var(--text-faint)}
:root .active\:text-\[\#555566\]:active{color:var(--text-faint)}
:root .group:hover .group-hover\:text-\[\#555566\]{color:var(--text-faint)}
:root .disabled\:text-\[\#555566\]:disabled{color:var(--text-faint)}
:root .text-\[\#5a5a6a\]{color:var(--text-faint)}
:root .hover\:text-\[\#5a5a6a\]:hover{color:var(--text-faint)}
:root .focus\:text-\[\#5a5a6a\]:focus{color:var(--text-faint)}
:root .active\:text-\[\#5a5a6a\]:active{color:var(--text-faint)}
:root .group:hover .group-hover\:text-\[\#5a5a6a\]{color:var(--text-faint)}
:root .disabled\:text-\[\#5a5a6a\]:disabled{color:var(--text-faint)}
:root .text-\[\#5a5a70\]{color:var(--text-faint)}
:root .hover\:text-\[\#5a5a70\]:hover{color:var(--text-faint)}
:root .focus\:text-\[\#5a5a70\]:focus{color:var(--text-faint)}
:root .active\:text-\[\#5a5a70\]:active{color:var(--text-faint)}
:root .group:hover .group-hover\:text-\[\#5a5a70\]{color:var(--text-faint)}
:root .disabled\:text-\[\#5a5a70\]:disabled{color:var(--text-faint)}
:root .text-\[\#5a8a6a\]{color:var(--c-green)}
:root .hover\:text-\[\#5a8a6a\]:hover{color:var(--c-green)}
:root .focus\:text-\[\#5a8a6a\]:focus{color:var(--c-green)}
:root .active\:text-\[\#5a8a6a\]:active{color:var(--c-green)}
:root .group:hover .group-hover\:text-\[\#5a8a6a\]{color:var(--c-green)}
:root .disabled\:text-\[\#5a8a6a\]:disabled{color:var(--c-green)}
:root .text-\[\#6b6b80\]{color:var(--text-dim)}
:root .hover\:text-\[\#6b6b80\]:hover{color:var(--text-dim)}
:root .focus\:text-\[\#6b6b80\]:focus{color:var(--text-dim)}
:root .active\:text-\[\#6b6b80\]:active{color:var(--text-dim)}
:root .group:hover .group-hover\:text-\[\#6b6b80\]{color:var(--text-dim)}
:root .disabled\:text-\[\#6b6b80\]:disabled{color:var(--text-dim)}
:root .text-\[\#6b7280\]{color:var(--text-dim)}
:root .hover\:text-\[\#6b7280\]:hover{color:var(--text-dim)}
:root .focus\:text-\[\#6b7280\]:focus{color:var(--text-dim)}
:root .active\:text-\[\#6b7280\]:active{color:var(--text-dim)}
:root .group:hover .group-hover\:text-\[\#6b7280\]{color:var(--text-dim)}
:root .disabled\:text-\[\#6b7280\]:disabled{color:var(--text-dim)}
:root .text-\[\#8888a0\]{color:var(--text-muted)}
:root .hover\:text-\[\#8888a0\]:hover{color:var(--text-muted)}
:root .focus\:text-\[\#8888a0\]:focus{color:var(--text-muted)}
:root .active\:text-\[\#8888a0\]:active{color:var(--text-muted)}
:root .group:hover .group-hover\:text-\[\#8888a0\]{color:var(--text-muted)}
:root .disabled\:text-\[\#8888a0\]:disabled{color:var(--text-muted)}
:root .text-\[\#94a3b8\]{color:var(--text-muted)}
:root .hover\:text-\[\#94a3b8\]:hover{color:var(--text-muted)}
:root .focus\:text-\[\#94a3b8\]:focus{color:var(--text-muted)}
:root .active\:text-\[\#94a3b8\]:active{color:var(--text-muted)}
:root .group:hover .group-hover\:text-\[\#94a3b8\]{color:var(--text-muted)}
:root .disabled\:text-\[\#94a3b8\]:disabled{color:var(--text-muted)}
:root .text-\[\#9ca3af\]{color:var(--text-muted)}
:root .hover\:text-\[\#9ca3af\]:hover{color:var(--text-muted)}
:root .focus\:text-\[\#9ca3af\]:focus{color:var(--text-muted)}
:root .active\:text-\[\#9ca3af\]:active{color:var(--text-muted)}
:root .group:hover .group-hover\:text-\[\#9ca3af\]{color:var(--text-muted)}
:root .disabled\:text-\[\#9ca3af\]:disabled{color:var(--text-muted)}
:root .text-\[\#a0a0b0\]{color:var(--text-soft)}
:root .hover\:text-\[\#a0a0b0\]:hover{color:var(--text-soft)}
:root .focus\:text-\[\#a0a0b0\]:focus{color:var(--text-soft)}
:root .active\:text-\[\#a0a0b0\]:active{color:var(--text-soft)}
:root .group:hover .group-hover\:text-\[\#a0a0b0\]{color:var(--text-soft)}
:root .disabled\:text-\[\#a0a0b0\]:disabled{color:var(--text-soft)}
:root .text-\[\#a0a0b8\]{color:var(--text-soft)}
:root .hover\:text-\[\#a0a0b8\]:hover{color:var(--text-soft)}
:root .focus\:text-\[\#a0a0b8\]:focus{color:var(--text-soft)}
:root .active\:text-\[\#a0a0b8\]:active{color:var(--text-soft)}
:root .group:hover .group-hover\:text-\[\#a0a0b8\]{color:var(--text-soft)}
:root .disabled\:text-\[\#a0a0b8\]:disabled{color:var(--text-soft)}
:root .text-\[\#c0c0d0\]{color:var(--text-soft)}
:root .hover\:text-\[\#c0c0d0\]:hover{color:var(--text-soft)}
:root .focus\:text-\[\#c0c0d0\]:focus{color:var(--text-soft)}
:root .active\:text-\[\#c0c0d0\]:active{color:var(--text-soft)}
:root .group:hover .group-hover\:text-\[\#c0c0d0\]{color:var(--text-soft)}
:root .disabled\:text-\[\#c0c0d0\]:disabled{color:var(--text-soft)}
:root .text-\[\#c4c4d4\]{color:var(--text-soft)}
:root .hover\:text-\[\#c4c4d4\]:hover{color:var(--text-soft)}
:root .focus\:text-\[\#c4c4d4\]:focus{color:var(--text-soft)}
:root .active\:text-\[\#c4c4d4\]:active{color:var(--text-soft)}
:root .group:hover .group-hover\:text-\[\#c4c4d4\]{color:var(--text-soft)}
:root .disabled\:text-\[\#c4c4d4\]:disabled{color:var(--text-soft)}
:root .text-\[\#c8c8d8\]{color:var(--text-soft)}
:root .hover\:text-\[\#c8c8d8\]:hover{color:var(--text-soft)}
:root .focus\:text-\[\#c8c8d8\]:focus{color:var(--text-soft)}
:root .active\:text-\[\#c8c8d8\]:active{color:var(--text-soft)}
:root .group:hover .group-hover\:text-\[\#c8c8d8\]{color:var(--text-soft)}
:root .disabled\:text-\[\#c8c8d8\]:disabled{color:var(--text-soft)}
:root .text-\[\#d4d4d8\]{color:var(--text-soft)}
:root .hover\:text-\[\#d4d4d8\]:hover{color:var(--text-soft)}
:root .focus\:text-\[\#d4d4d8\]:focus{color:var(--text-soft)}
:root .active\:text-\[\#d4d4d8\]:active{color:var(--text-soft)}
:root .group:hover .group-hover\:text-\[\#d4d4d8\]{color:var(--text-soft)}
:root .disabled\:text-\[\#d4d4d8\]:disabled{color:var(--text-soft)}
:root .text-\[\#e5e5e7\]{color:var(--text)}
:root .hover\:text-\[\#e5e5e7\]:hover{color:var(--text)}
:root .focus\:text-\[\#e5e5e7\]:focus{color:var(--text)}
:root .active\:text-\[\#e5e5e7\]:active{color:var(--text)}
:root .group:hover .group-hover\:text-\[\#e5e5e7\]{color:var(--text)}
:root .disabled\:text-\[\#e5e5e7\]:disabled{color:var(--text)}
:root .text-\[\#e8e8f0\]{color:var(--text)}
:root .hover\:text-\[\#e8e8f0\]:hover{color:var(--text)}
:root .focus\:text-\[\#e8e8f0\]:focus{color:var(--text)}
:root .active\:text-\[\#e8e8f0\]:active{color:var(--text)}
:root .group:hover .group-hover\:text-\[\#e8e8f0\]{color:var(--text)}
:root .disabled\:text-\[\#e8e8f0\]:disabled{color:var(--text)}
:root .text-\[\#ef4444\]{color:var(--c-red)}
:root .hover\:text-\[\#ef4444\]:hover{color:var(--c-red)}
:root .focus\:text-\[\#ef4444\]:focus{color:var(--c-red)}
:root .active\:text-\[\#ef4444\]:active{color:var(--c-red)}
:root .group:hover .group-hover\:text-\[\#ef4444\]{color:var(--c-red)}
:root .disabled\:text-\[\#ef4444\]:disabled{color:var(--c-red)}
:root .text-\[\#ffffff\]{color:var(--text)}
:root .hover\:text-\[\#ffffff\]:hover{color:var(--text)}
:root .focus\:text-\[\#ffffff\]:focus{color:var(--text)}
:root .active\:text-\[\#ffffff\]:active{color:var(--text)}
:root .group:hover .group-hover\:text-\[\#ffffff\]{color:var(--text)}
:root .disabled\:text-\[\#ffffff\]:disabled{color:var(--text)}

/* ────────── literal-hex → token remap · borders ────────── */
:root .border-\[\#0d0d0f\]{border-color:var(--bg)}
:root .hover\:border-\[\#0d0d0f\]:hover{border-color:var(--bg)}
:root .focus\:border-\[\#0d0d0f\]:focus{border-color:var(--bg)}
:root .active\:border-\[\#0d0d0f\]:active{border-color:var(--bg)}
:root .group:hover .group-hover\:border-\[\#0d0d0f\]{border-color:var(--bg)}
:root .disabled\:border-\[\#0d0d0f\]:disabled{border-color:var(--bg)}
:root .border-\[\#1e1e24\]{border-color:var(--border-soft)}
:root .hover\:border-\[\#1e1e24\]:hover{border-color:var(--border-soft)}
:root .focus\:border-\[\#1e1e24\]:focus{border-color:var(--border-soft)}
:root .active\:border-\[\#1e1e24\]:active{border-color:var(--border-soft)}
:root .group:hover .group-hover\:border-\[\#1e1e24\]{border-color:var(--border-soft)}
:root .disabled\:border-\[\#1e1e24\]:disabled{border-color:var(--border-soft)}
:root .border-\[\#23232b\]{border-color:var(--border-soft)}
:root .hover\:border-\[\#23232b\]:hover{border-color:var(--border-soft)}
:root .focus\:border-\[\#23232b\]:focus{border-color:var(--border-soft)}
:root .active\:border-\[\#23232b\]:active{border-color:var(--border-soft)}
:root .group:hover .group-hover\:border-\[\#23232b\]{border-color:var(--border-soft)}
:root .disabled\:border-\[\#23232b\]:disabled{border-color:var(--border-soft)}
:root .border-\[\#2a2a32\]{border-color:var(--border)}
:root .hover\:border-\[\#2a2a32\]:hover{border-color:var(--border)}
:root .focus\:border-\[\#2a2a32\]:focus{border-color:var(--border)}
:root .active\:border-\[\#2a2a32\]:active{border-color:var(--border)}
:root .group:hover .group-hover\:border-\[\#2a2a32\]{border-color:var(--border)}
:root .disabled\:border-\[\#2a2a32\]:disabled{border-color:var(--border)}
:root .border-\[\#333\]{border-color:var(--border-strong)}
:root .hover\:border-\[\#333\]:hover{border-color:var(--border-strong)}
:root .focus\:border-\[\#333\]:focus{border-color:var(--border-strong)}
:root .active\:border-\[\#333\]:active{border-color:var(--border-strong)}
:root .group:hover .group-hover\:border-\[\#333\]{border-color:var(--border-strong)}
:root .disabled\:border-\[\#333\]:disabled{border-color:var(--border-strong)}
:root .border-\[\#333340\]{border-color:var(--border-strong)}
:root .hover\:border-\[\#333340\]:hover{border-color:var(--border-strong)}
:root .focus\:border-\[\#333340\]:focus{border-color:var(--border-strong)}
:root .active\:border-\[\#333340\]:active{border-color:var(--border-strong)}
:root .group:hover .group-hover\:border-\[\#333340\]{border-color:var(--border-strong)}
:root .disabled\:border-\[\#333340\]:disabled{border-color:var(--border-strong)}
:root .border-\[\#3a3a44\]{border-color:var(--border-strong)}
:root .hover\:border-\[\#3a3a44\]:hover{border-color:var(--border-strong)}
:root .focus\:border-\[\#3a3a44\]:focus{border-color:var(--border-strong)}
:root .active\:border-\[\#3a3a44\]:active{border-color:var(--border-strong)}
:root .group:hover .group-hover\:border-\[\#3a3a44\]{border-color:var(--border-strong)}
:root .disabled\:border-\[\#3a3a44\]:disabled{border-color:var(--border-strong)}
:root .border-\[\#3a3a46\]{border-color:var(--border-strong)}
:root .hover\:border-\[\#3a3a46\]:hover{border-color:var(--border-strong)}
:root .focus\:border-\[\#3a3a46\]:focus{border-color:var(--border-strong)}
:root .active\:border-\[\#3a3a46\]:active{border-color:var(--border-strong)}
:root .group:hover .group-hover\:border-\[\#3a3a46\]{border-color:var(--border-strong)}
:root .disabled\:border-\[\#3a3a46\]:disabled{border-color:var(--border-strong)}
:root .border-\[\#3a3a48\]{border-color:var(--border-strong)}
:root .hover\:border-\[\#3a3a48\]:hover{border-color:var(--border-strong)}
:root .focus\:border-\[\#3a3a48\]:focus{border-color:var(--border-strong)}
:root .active\:border-\[\#3a3a48\]:active{border-color:var(--border-strong)}
:root .group:hover .group-hover\:border-\[\#3a3a48\]{border-color:var(--border-strong)}
:root .disabled\:border-\[\#3a3a48\]:disabled{border-color:var(--border-strong)}
:root .border-\[\#444\]{border-color:var(--border-strong)}
:root .hover\:border-\[\#444\]:hover{border-color:var(--border-strong)}
:root .focus\:border-\[\#444\]:focus{border-color:var(--border-strong)}
:root .active\:border-\[\#444\]:active{border-color:var(--border-strong)}
:root .group:hover .group-hover\:border-\[\#444\]{border-color:var(--border-strong)}
:root .disabled\:border-\[\#444\]:disabled{border-color:var(--border-strong)}
:root .border-\[\#5a5a64\]{border-color:var(--border-strong)}
:root .hover\:border-\[\#5a5a64\]:hover{border-color:var(--border-strong)}
:root .focus\:border-\[\#5a5a64\]:focus{border-color:var(--border-strong)}
:root .active\:border-\[\#5a5a64\]:active{border-color:var(--border-strong)}
:root .group:hover .group-hover\:border-\[\#5a5a64\]{border-color:var(--border-strong)}
:root .disabled\:border-\[\#5a5a64\]:disabled{border-color:var(--border-strong)}

/* ────────── literal-hex → token remap · placeholders ────────── */
:root .placeholder-\[\#4a4a5a\]::placeholder{color:var(--text-faint)}
:root .focus\:placeholder-\[\#4a4a5a\]:focus::placeholder{color:var(--text-faint)}
:root .placeholder-\[\#6b6b80\]::placeholder{color:var(--text-dim)}
:root .focus\:placeholder-\[\#6b6b80\]:focus::placeholder{color:var(--text-dim)}

/* ────────── divide-* (Tailwind targets the sibling, not the parent) ────────── */
:root .divide-\[\#1e1e24\] > :not([hidden]) ~ :not([hidden]){border-color:var(--border-soft)}
:root .divide-\[\#23232b\] > :not([hidden]) ~ :not([hidden]){border-color:var(--border-soft)}
:root .divide-\[\#2a2a32\] > :not([hidden]) ~ :not([hidden]){border-color:var(--border)}

/* ────────── translucent surface variants (sticky headers, backdrops) ────────── */
:root .bg-\[\#0d0d0f\]\/60{background-color:color-mix(in srgb, var(--bg) 65%, transparent)}
:root .bg-\[\#0d0d0f\]\/80{background-color:color-mix(in srgb, var(--bg) 85%, transparent)}
:root .bg-\[\#0d0d0f\]\/90{background-color:color-mix(in srgb, var(--bg) 92%, transparent)}
:root .bg-\[\#0d0d0f\]\/95{background-color:color-mix(in srgb, var(--bg) 95%, transparent)}
:root .bg-\[\#151518\]\/90{background-color:color-mix(in srgb, var(--surface) 92%, transparent)}
:root .bg-\[\#1c1c21\]\/50{background-color:color-mix(in srgb, var(--surface-2) 60%, transparent)}
:root .bg-\[\#1c1c21\]\/80{background-color:color-mix(in srgb, var(--surface-2) 85%, transparent)}
:root .bg-\[var\(--bg\)\]\/60{background-color:color-mix(in srgb, var(--bg) 65%, transparent)}

/* ────────── black / white alpha helpers ────────── */
[data-theme="light"] .bg-black\/50{background-color:var(--scrim)}
[data-theme="light"] .bg-black\/60{background-color:var(--scrim)}
[data-theme="light"] .bg-black\/70{background-color:var(--scrim)}
[data-theme="light"] .bg-black\/75{background-color:var(--scrim)}
[data-theme="light"] .bg-black\/80{background-color:var(--scrim)}
[data-theme="light"] .bg-black\/85{background-color:var(--scrim)}
[data-theme="light"] .bg-black\/90{background-color:var(--scrim)}
[data-theme="light"] .bg-black\/92{background-color:var(--scrim)}
[data-theme="light"] .bg-white\/15{background-color:var(--veil)}
[data-theme="light"] .bg-white\/5{background-color:var(--hover)}
[data-theme="light"] .hover\:bg-white\/5:hover{background-color:var(--hover)}
[data-theme="light"] .hover\:bg-white\/10:hover{background-color:var(--hover-strong)}
[data-theme="light"] .hover\:bg-white\/\[0\.02\]:hover{background-color:var(--hover)}
[data-theme="light"] .border-white\/30{border-color:var(--border-strong)}
[data-theme="light"] .border-white{border-color:var(--border-strong)}
[data-theme="light"] .border-gray-300{border-color:var(--border)}
[data-theme="light"] .bg-white{background-color:var(--chip)}
[data-theme="light"] .peer:checked ~ * .peer-checked\:after\:bg-white{background-color:#fff}

/* ══════════════════════════════════════════════════════════════════════════
   text-white
   1,000+ call sites, two different meanings:
     (a) ink on a solid accent / semantic fill  → must STAY white in light mode
     (b) primary body copy on a dark surface    → must FLIP to --text
   Case (b) is the default; case (a) is restored below whenever the element,
   or an ancestor, carries a saturated background. Those exception selectors
   are (0,3,0) so they outrank the (0,2,0) default without !important.
   ══════════════════════════════════════════════════════════════════════════ */
[data-theme="light"] .text-white{color:var(--text)}
[data-theme="light"] .text-white:is(.bg-\[var\(--accent\)\],.bg-\[var\(--accent-strong\)\],.bg-red-400,.bg-red-500,.bg-red-600,.bg-red-700,.bg-red-500\/70,.bg-emerald-400,.bg-emerald-500,.bg-emerald-600,.bg-emerald-500\/90,.bg-emerald-500\/70,.bg-blue-400,.bg-blue-500,.bg-blue-600,.bg-amber-400,.bg-amber-500,.bg-amber-500\/70,.bg-purple-500,.bg-violet-400,.bg-violet-500,.bg-sky-500,.bg-sky-600,.bg-orange-500,.bg-yellow-400,.bg-pink-400,.bg-cyan-400,.bg-rose-400,.bg-black,.bg-black\/50,.bg-black\/60,.bg-black\/70,.bg-black\/75,.bg-black\/80,.bg-black\/85,.bg-black\/90,.bg-black\/92){color:var(--on-solid)}
[data-theme="light"] :is(.bg-\[var\(--accent\)\],.bg-\[var\(--accent-strong\)\],.bg-red-400,.bg-red-500,.bg-red-600,.bg-red-700,.bg-red-500\/70,.bg-emerald-400,.bg-emerald-500,.bg-emerald-600,.bg-emerald-500\/90,.bg-emerald-500\/70,.bg-blue-400,.bg-blue-500,.bg-blue-600,.bg-amber-400,.bg-amber-500,.bg-amber-500\/70,.bg-purple-500,.bg-violet-400,.bg-violet-500,.bg-sky-500,.bg-sky-600,.bg-orange-500,.bg-yellow-400,.bg-pink-400,.bg-cyan-400,.bg-rose-400) > .text-white,[data-theme="light"] :is(.bg-\[var\(--accent\)\],.bg-\[var\(--accent-strong\)\],.bg-red-400,.bg-red-500,.bg-red-600,.bg-red-700,.bg-red-500\/70,.bg-emerald-400,.bg-emerald-500,.bg-emerald-600,.bg-emerald-500\/90,.bg-emerald-500\/70,.bg-blue-400,.bg-blue-500,.bg-blue-600,.bg-amber-400,.bg-amber-500,.bg-amber-500\/70,.bg-purple-500,.bg-violet-400,.bg-violet-500,.bg-sky-500,.bg-sky-600,.bg-orange-500,.bg-yellow-400,.bg-pink-400,.bg-cyan-400,.bg-rose-400) > * > .text-white{color:var(--on-solid)}
[data-theme="light"] [style*="var(--accent)"] > .text-white,[data-theme="light"] .text-white[style*="var(--accent)"]{color:var(--on-solid)}

/* hover:text-white — same split. */
[data-theme="light"] .hover\:text-white:hover{color:var(--text)}
[data-theme="light"] .hover\:text-white:hover:is(.hover\:bg-red-600,.hover\:bg-emerald-600,.hover\:bg-blue-600,.hover\:bg-sky-600,.hover\:bg-blue-400,.hover\:bg-emerald-400,.hover\:bg-\[var\(--accent\)\],.hover\:bg-\[var\(--accent-strong\)\]){color:var(--on-solid)}
[data-theme="light"] :is(.bg-\[var\(--accent\)\],.bg-\[var\(--accent-strong\)\],.bg-red-400,.bg-red-500,.bg-red-600,.bg-red-700,.bg-red-500\/70,.bg-emerald-400,.bg-emerald-500,.bg-emerald-600,.bg-emerald-500\/90,.bg-emerald-500\/70,.bg-blue-400,.bg-blue-500,.bg-blue-600,.bg-amber-400,.bg-amber-500,.bg-amber-500\/70,.bg-purple-500,.bg-violet-400,.bg-violet-500,.bg-sky-500,.bg-sky-600,.bg-orange-500,.bg-yellow-400,.bg-pink-400,.bg-cyan-400,.bg-rose-400) > .hover\:text-white:hover,[data-theme="light"] :is(.bg-\[var\(--accent\)\],.bg-\[var\(--accent-strong\)\],.bg-red-400,.bg-red-500,.bg-red-600,.bg-red-700,.bg-red-500\/70,.bg-emerald-400,.bg-emerald-500,.bg-emerald-600,.bg-emerald-500\/90,.bg-emerald-500\/70,.bg-blue-400,.bg-blue-500,.bg-blue-600,.bg-amber-400,.bg-amber-500,.bg-amber-500\/70,.bg-purple-500,.bg-violet-400,.bg-violet-500,.bg-sky-500,.bg-sky-600,.bg-orange-500,.bg-yellow-400,.bg-pink-400,.bg-cyan-400,.bg-rose-400) > * > .hover\:text-white:hover{color:var(--on-solid)}
[data-theme="light"] :is(.hover\:bg-red-600,.hover\:bg-emerald-600,.hover\:bg-blue-600,.hover\:bg-sky-600,.hover\:bg-blue-400,.hover\:bg-emerald-400,.hover\:bg-\[var\(--accent\)\],.hover\:bg-\[var\(--accent-strong\)\]):hover .hover\:text-white{color:var(--on-solid)}

/* ────────── semantic palette · light-mode contrast lift ──────────
   Tailwind's 300/400 shades are tuned to sit on a dark surface; on white
   they land around 2.5:1. Each is pulled to its AA-safe sibling. Solid
   FILLS (bg-*) are left alone — they carry white ink and stay saturated. */
[data-theme="light"] .text-amber-200{color:var(--c-amber)}
[data-theme="light"] .hover\:text-amber-200:hover{color:var(--c-amber)}
[data-theme="light"] .group:hover .group-hover\:text-amber-200{color:var(--c-amber)}
[data-theme="light"] .focus\:text-amber-200:focus{color:var(--c-amber)}
[data-theme="light"] .text-amber-200\/70{color:var(--c-amber)}
[data-theme="light"] .text-amber-200\/80{color:var(--c-amber)}
[data-theme="light"] .text-amber-200\/90{color:var(--c-amber)}
[data-theme="light"] .text-amber-300{color:var(--c-amber)}
[data-theme="light"] .hover\:text-amber-300:hover{color:var(--c-amber)}
[data-theme="light"] .group:hover .group-hover\:text-amber-300{color:var(--c-amber)}
[data-theme="light"] .focus\:text-amber-300:focus{color:var(--c-amber)}
[data-theme="light"] .text-amber-300\/70{color:var(--c-amber)}
[data-theme="light"] .text-amber-300\/80{color:var(--c-amber)}
[data-theme="light"] .text-amber-300\/90{color:var(--c-amber)}
[data-theme="light"] .text-amber-400{color:var(--c-amber)}
[data-theme="light"] .hover\:text-amber-400:hover{color:var(--c-amber)}
[data-theme="light"] .group:hover .group-hover\:text-amber-400{color:var(--c-amber)}
[data-theme="light"] .focus\:text-amber-400:focus{color:var(--c-amber)}
[data-theme="light"] .text-amber-400\/70{color:var(--c-amber)}
[data-theme="light"] .text-amber-400\/80{color:var(--c-amber)}
[data-theme="light"] .text-amber-400\/90{color:var(--c-amber)}
[data-theme="light"] .text-blue-300{color:var(--c-blue)}
[data-theme="light"] .hover\:text-blue-300:hover{color:var(--c-blue)}
[data-theme="light"] .group:hover .group-hover\:text-blue-300{color:var(--c-blue)}
[data-theme="light"] .focus\:text-blue-300:focus{color:var(--c-blue)}
[data-theme="light"] .text-blue-300\/70{color:var(--c-blue)}
[data-theme="light"] .text-blue-300\/80{color:var(--c-blue)}
[data-theme="light"] .text-blue-300\/90{color:var(--c-blue)}
[data-theme="light"] .text-blue-400{color:var(--c-blue)}
[data-theme="light"] .hover\:text-blue-400:hover{color:var(--c-blue)}
[data-theme="light"] .group:hover .group-hover\:text-blue-400{color:var(--c-blue)}
[data-theme="light"] .focus\:text-blue-400:focus{color:var(--c-blue)}
[data-theme="light"] .text-blue-400\/70{color:var(--c-blue)}
[data-theme="light"] .text-blue-400\/80{color:var(--c-blue)}
[data-theme="light"] .text-blue-400\/90{color:var(--c-blue)}
[data-theme="light"] .text-blue-500{color:var(--c-blue)}
[data-theme="light"] .hover\:text-blue-500:hover{color:var(--c-blue)}
[data-theme="light"] .group:hover .group-hover\:text-blue-500{color:var(--c-blue)}
[data-theme="light"] .focus\:text-blue-500:focus{color:var(--c-blue)}
[data-theme="light"] .text-blue-500\/70{color:var(--c-blue)}
[data-theme="light"] .text-blue-500\/80{color:var(--c-blue)}
[data-theme="light"] .text-blue-500\/90{color:var(--c-blue)}
[data-theme="light"] .text-cyan-400{color:var(--c-cyan)}
[data-theme="light"] .hover\:text-cyan-400:hover{color:var(--c-cyan)}
[data-theme="light"] .group:hover .group-hover\:text-cyan-400{color:var(--c-cyan)}
[data-theme="light"] .focus\:text-cyan-400:focus{color:var(--c-cyan)}
[data-theme="light"] .text-cyan-400\/70{color:var(--c-cyan)}
[data-theme="light"] .text-cyan-400\/80{color:var(--c-cyan)}
[data-theme="light"] .text-cyan-400\/90{color:var(--c-cyan)}
[data-theme="light"] .text-emerald-400{color:var(--c-green)}
[data-theme="light"] .hover\:text-emerald-400:hover{color:var(--c-green)}
[data-theme="light"] .group:hover .group-hover\:text-emerald-400{color:var(--c-green)}
[data-theme="light"] .focus\:text-emerald-400:focus{color:var(--c-green)}
[data-theme="light"] .text-emerald-400\/70{color:var(--c-green)}
[data-theme="light"] .text-emerald-400\/80{color:var(--c-green)}
[data-theme="light"] .text-emerald-400\/90{color:var(--c-green)}
[data-theme="light"] .text-emerald-500{color:var(--c-green)}
[data-theme="light"] .hover\:text-emerald-500:hover{color:var(--c-green)}
[data-theme="light"] .group:hover .group-hover\:text-emerald-500{color:var(--c-green)}
[data-theme="light"] .focus\:text-emerald-500:focus{color:var(--c-green)}
[data-theme="light"] .text-emerald-500\/70{color:var(--c-green)}
[data-theme="light"] .text-emerald-500\/80{color:var(--c-green)}
[data-theme="light"] .text-emerald-500\/90{color:var(--c-green)}
[data-theme="light"] .text-fuchsia-400{color:var(--c-purple)}
[data-theme="light"] .hover\:text-fuchsia-400:hover{color:var(--c-purple)}
[data-theme="light"] .group:hover .group-hover\:text-fuchsia-400{color:var(--c-purple)}
[data-theme="light"] .focus\:text-fuchsia-400:focus{color:var(--c-purple)}
[data-theme="light"] .text-fuchsia-400\/70{color:var(--c-purple)}
[data-theme="light"] .text-fuchsia-400\/80{color:var(--c-purple)}
[data-theme="light"] .text-fuchsia-400\/90{color:var(--c-purple)}
[data-theme="light"] .text-indigo-400{color:var(--c-indigo)}
[data-theme="light"] .hover\:text-indigo-400:hover{color:var(--c-indigo)}
[data-theme="light"] .group:hover .group-hover\:text-indigo-400{color:var(--c-indigo)}
[data-theme="light"] .focus\:text-indigo-400:focus{color:var(--c-indigo)}
[data-theme="light"] .text-indigo-400\/70{color:var(--c-indigo)}
[data-theme="light"] .text-indigo-400\/80{color:var(--c-indigo)}
[data-theme="light"] .text-indigo-400\/90{color:var(--c-indigo)}
[data-theme="light"] .text-lime-400{color:var(--c-lime)}
[data-theme="light"] .hover\:text-lime-400:hover{color:var(--c-lime)}
[data-theme="light"] .group:hover .group-hover\:text-lime-400{color:var(--c-lime)}
[data-theme="light"] .focus\:text-lime-400:focus{color:var(--c-lime)}
[data-theme="light"] .text-lime-400\/70{color:var(--c-lime)}
[data-theme="light"] .text-lime-400\/80{color:var(--c-lime)}
[data-theme="light"] .text-lime-400\/90{color:var(--c-lime)}
[data-theme="light"] .text-orange-400{color:var(--c-orange)}
[data-theme="light"] .hover\:text-orange-400:hover{color:var(--c-orange)}
[data-theme="light"] .group:hover .group-hover\:text-orange-400{color:var(--c-orange)}
[data-theme="light"] .focus\:text-orange-400:focus{color:var(--c-orange)}
[data-theme="light"] .text-orange-400\/70{color:var(--c-orange)}
[data-theme="light"] .text-orange-400\/80{color:var(--c-orange)}
[data-theme="light"] .text-orange-400\/90{color:var(--c-orange)}
[data-theme="light"] .text-orange-500{color:var(--c-orange)}
[data-theme="light"] .hover\:text-orange-500:hover{color:var(--c-orange)}
[data-theme="light"] .group:hover .group-hover\:text-orange-500{color:var(--c-orange)}
[data-theme="light"] .focus\:text-orange-500:focus{color:var(--c-orange)}
[data-theme="light"] .text-orange-500\/70{color:var(--c-orange)}
[data-theme="light"] .text-orange-500\/80{color:var(--c-orange)}
[data-theme="light"] .text-orange-500\/90{color:var(--c-orange)}
[data-theme="light"] .text-pink-400{color:var(--c-pink)}
[data-theme="light"] .hover\:text-pink-400:hover{color:var(--c-pink)}
[data-theme="light"] .group:hover .group-hover\:text-pink-400{color:var(--c-pink)}
[data-theme="light"] .focus\:text-pink-400:focus{color:var(--c-pink)}
[data-theme="light"] .text-pink-400\/70{color:var(--c-pink)}
[data-theme="light"] .text-pink-400\/80{color:var(--c-pink)}
[data-theme="light"] .text-pink-400\/90{color:var(--c-pink)}
[data-theme="light"] .text-purple-400{color:var(--c-purple)}
[data-theme="light"] .hover\:text-purple-400:hover{color:var(--c-purple)}
[data-theme="light"] .group:hover .group-hover\:text-purple-400{color:var(--c-purple)}
[data-theme="light"] .focus\:text-purple-400:focus{color:var(--c-purple)}
[data-theme="light"] .text-purple-400\/70{color:var(--c-purple)}
[data-theme="light"] .text-purple-400\/80{color:var(--c-purple)}
[data-theme="light"] .text-purple-400\/90{color:var(--c-purple)}
[data-theme="light"] .text-red-300{color:var(--c-red)}
[data-theme="light"] .hover\:text-red-300:hover{color:var(--c-red)}
[data-theme="light"] .group:hover .group-hover\:text-red-300{color:var(--c-red)}
[data-theme="light"] .focus\:text-red-300:focus{color:var(--c-red)}
[data-theme="light"] .text-red-300\/70{color:var(--c-red)}
[data-theme="light"] .text-red-300\/80{color:var(--c-red)}
[data-theme="light"] .text-red-300\/90{color:var(--c-red)}
[data-theme="light"] .text-red-400{color:var(--c-red)}
[data-theme="light"] .hover\:text-red-400:hover{color:var(--c-red)}
[data-theme="light"] .group:hover .group-hover\:text-red-400{color:var(--c-red)}
[data-theme="light"] .focus\:text-red-400:focus{color:var(--c-red)}
[data-theme="light"] .text-red-400\/70{color:var(--c-red)}
[data-theme="light"] .text-red-400\/80{color:var(--c-red)}
[data-theme="light"] .text-red-400\/90{color:var(--c-red)}
[data-theme="light"] .text-red-500{color:var(--c-red)}
[data-theme="light"] .hover\:text-red-500:hover{color:var(--c-red)}
[data-theme="light"] .group:hover .group-hover\:text-red-500{color:var(--c-red)}
[data-theme="light"] .focus\:text-red-500:focus{color:var(--c-red)}
[data-theme="light"] .text-red-500\/70{color:var(--c-red)}
[data-theme="light"] .text-red-500\/80{color:var(--c-red)}
[data-theme="light"] .text-red-500\/90{color:var(--c-red)}
[data-theme="light"] .text-rose-400{color:var(--c-rose)}
[data-theme="light"] .hover\:text-rose-400:hover{color:var(--c-rose)}
[data-theme="light"] .group:hover .group-hover\:text-rose-400{color:var(--c-rose)}
[data-theme="light"] .focus\:text-rose-400:focus{color:var(--c-rose)}
[data-theme="light"] .text-rose-400\/70{color:var(--c-rose)}
[data-theme="light"] .text-rose-400\/80{color:var(--c-rose)}
[data-theme="light"] .text-rose-400\/90{color:var(--c-rose)}
[data-theme="light"] .text-sky-400{color:var(--c-sky)}
[data-theme="light"] .hover\:text-sky-400:hover{color:var(--c-sky)}
[data-theme="light"] .group:hover .group-hover\:text-sky-400{color:var(--c-sky)}
[data-theme="light"] .focus\:text-sky-400:focus{color:var(--c-sky)}
[data-theme="light"] .text-sky-400\/70{color:var(--c-sky)}
[data-theme="light"] .text-sky-400\/80{color:var(--c-sky)}
[data-theme="light"] .text-sky-400\/90{color:var(--c-sky)}
[data-theme="light"] .text-teal-400{color:var(--c-teal)}
[data-theme="light"] .hover\:text-teal-400:hover{color:var(--c-teal)}
[data-theme="light"] .group:hover .group-hover\:text-teal-400{color:var(--c-teal)}
[data-theme="light"] .focus\:text-teal-400:focus{color:var(--c-teal)}
[data-theme="light"] .text-teal-400\/70{color:var(--c-teal)}
[data-theme="light"] .text-teal-400\/80{color:var(--c-teal)}
[data-theme="light"] .text-teal-400\/90{color:var(--c-teal)}
[data-theme="light"] .text-violet-400{color:var(--c-violet)}
[data-theme="light"] .hover\:text-violet-400:hover{color:var(--c-violet)}
[data-theme="light"] .group:hover .group-hover\:text-violet-400{color:var(--c-violet)}
[data-theme="light"] .focus\:text-violet-400:focus{color:var(--c-violet)}
[data-theme="light"] .text-violet-400\/70{color:var(--c-violet)}
[data-theme="light"] .text-violet-400\/80{color:var(--c-violet)}
[data-theme="light"] .text-violet-400\/90{color:var(--c-violet)}
[data-theme="light"] .text-yellow-400{color:var(--c-yellow)}
[data-theme="light"] .hover\:text-yellow-400:hover{color:var(--c-yellow)}
[data-theme="light"] .group:hover .group-hover\:text-yellow-400{color:var(--c-yellow)}
[data-theme="light"] .focus\:text-yellow-400:focus{color:var(--c-yellow)}
[data-theme="light"] .text-yellow-400\/70{color:var(--c-yellow)}
[data-theme="light"] .text-yellow-400\/80{color:var(--c-yellow)}
[data-theme="light"] .text-yellow-400\/90{color:var(--c-yellow)}

/* Solid semantic fills keep white ink in light mode even when the source
   markup relied on the inherited body colour rather than .text-white. */
[data-theme="light"] :is(.bg-\[var\(--accent\)\],.bg-\[var\(--accent-strong\)\],.bg-red-400,.bg-red-500,.bg-red-600,.bg-red-700,.bg-red-500\/70,.bg-emerald-400,.bg-emerald-500,.bg-emerald-600,.bg-emerald-500\/90,.bg-emerald-500\/70,.bg-blue-400,.bg-blue-500,.bg-blue-600,.bg-amber-400,.bg-amber-500,.bg-amber-500\/70,.bg-purple-500,.bg-violet-400,.bg-violet-500,.bg-sky-500,.bg-sky-600,.bg-orange-500,.bg-yellow-400,.bg-pink-400,.bg-cyan-400,.bg-rose-400){color:var(--on-solid)}

/* ────────── native form controls ────────── */
:root input,:root textarea,:root select{color:var(--text)}
:root input::placeholder,:root textarea::placeholder{color:var(--text-faint)}
[data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="light"] input[type="time"]::-webkit-calendar-picker-indicator,
[data-theme="light"] input[type="datetime-local"]::-webkit-calendar-picker-indicator{filter:none}
:root input[type="date"]::-webkit-calendar-picker-indicator,
:root input[type="time"]::-webkit-calendar-picker-indicator,
:root input[type="datetime-local"]::-webkit-calendar-picker-indicator{filter:invert(.7)}

/* ────────── scrollbars ────────── */
[data-theme="light"] ::-webkit-scrollbar-thumb{background:var(--border-strong)}
[data-theme="light"] ::-webkit-scrollbar-track{background:transparent}

/* ────────── Leaflet (map views) ────────── */
[data-theme="light"] .leaflet-container{background:var(--surface-3)}
[data-theme="light"] #map-canvas .leaflet-tile{filter:none}

/* ────────── theme transition ──────────
   Skipped for anything mid-animation, and disabled entirely for users who
   asked for reduced motion. */
html.amin-theme-anim,
html.amin-theme-anim body,
html.amin-theme-anim [class*="bg-"],
html.amin-theme-anim [class*="text-"],
html.amin-theme-anim [class*="border-"]{
  transition:background-color .22s ease,color .22s ease,border-color .22s ease;
}
@media (prefers-reduced-motion: reduce){
  html.amin-theme-anim,html.amin-theme-anim *{transition:none!important}
}