/* =====================================================================
   AXF Mockup Walker — theme overlay (TSY-213)
   Built 2026-06-23. Lets Danya flip between Light + 3 dark palettes
   on every walker screen via the top-right Theme picker.

   Strategy
   --------
   Each screen's inline <style> redeclares the same 7-ish CSS vars on
   :root (--navy / --muted / --blue / --blue-soft / --bg-top / --bg-bot
   / --card). The walker grid landing (axf.css) uses a slightly wider
   set incl. --teal, --teal-ink, --teal-soft, --muted-2.

   :root[data-theme="dark-a|b|c"] overrides have specificity 0,1,1 vs
   the screen's own :root at 0,0,1, AND load later via walker.js's
   injectStylesheet() — so they always win.

   For hardcoded inline hex (e.g. style="color:#1C2A47"), attribute-
   substring selectors with !important catch them across all 19 screens.
   Only TEXT colors that go dark→light are overridden; whites and
   already-light hex are left alone.

   SVG strokes are deliberately NOT themed in v1 — icon strokes stay
   their original accent colour. Acceptable cost for "feel the vibe"
   evaluation; per-screen polish lives on a follow-up issue.
   ===================================================================== */

/* ─── Theme picker chrome ────────────────────────────────────────── */
.walker-theme-picker {
  position: fixed;
  top: 18px;
  right: 22px;
  z-index: 9999;
  display: flex;
  gap: 6px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  border: 1.5px solid rgba(82, 160, 189, 0.35);
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 18px -8px rgba(31, 42, 71, 0.30);
  font-family: 'Raleway', sans-serif;
}
.walker-theme-picker button {
  font: inherit;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.3px;
  padding: 7px 14px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: #1F7390;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.walker-theme-picker button:hover {
  background: rgba(82, 160, 189, 0.12);
}
.walker-theme-picker button.active {
  background: #1F7390;
  color: #fff;
  box-shadow: 0 4px 10px -4px rgba(31, 115, 144, 0.55);
}

/* On dark themes, retint the picker so it stays readable */
:root[data-theme="dark-a"] .walker-theme-picker,
:root[data-theme="dark-b"] .walker-theme-picker,
:root[data-theme="dark-c"] .walker-theme-picker {
  background: rgba(20, 26, 36, 0.85);
  border-color: rgba(120, 180, 210, 0.40);
}
:root[data-theme="dark-a"] .walker-theme-picker button,
:root[data-theme="dark-b"] .walker-theme-picker button,
:root[data-theme="dark-c"] .walker-theme-picker button {
  color: #E8EEF7;
}
:root[data-theme="dark-a"] .walker-theme-picker button:hover,
:root[data-theme="dark-b"] .walker-theme-picker button:hover,
:root[data-theme="dark-c"] .walker-theme-picker button:hover {
  background: rgba(120, 180, 210, 0.18);
}

/* Theme-picker active-button accent varies per palette */
:root[data-theme="dark-a"] .walker-theme-picker button.active {
  background: #5BC0DE;
  color: #0F1318;
  box-shadow: 0 4px 10px -4px rgba(91, 192, 222, 0.55);
}
:root[data-theme="dark-b"] .walker-theme-picker button.active {
  background: #22D3EE;
  color: #070D1A;
  box-shadow: 0 4px 10px -4px rgba(34, 211, 238, 0.55);
}
:root[data-theme="dark-c"] .walker-theme-picker button.active {
  background: #52A0BD;
  color: #14171D;
  box-shadow: 0 4px 10px -4px rgba(82, 160, 189, 0.55);
}

/* =====================================================================
   DARK-A — warm slate + soft teal
   Vibe: cosy, dimmed, low-contrast — feels like a quiet evening pod
   ===================================================================== */
:root[data-theme="dark-a"] {
  --navy: #E8EEF7;
  --muted: #9AA4B5;
  --muted-2: #B8C2D2;
  --blue: #6AA8FF;
  --blue-soft: #2A3F60;
  --bg-top: #1F2530;
  --bg-bot: #14181F;
  --card: #252C38;
  --teal: #6DC5DC;
  --teal-ink: #5BC0DE;
  --teal-soft: #2A4854;
}

/* Override hardcoded inline hex on Dark-A */
:root[data-theme="dark-a"] [style*="color:#1C2A47"],
:root[data-theme="dark-a"] [style*="color: #1C2A47"] { color: #E8EEF7 !important; }
:root[data-theme="dark-a"] [style*="color:#465570"],
:root[data-theme="dark-a"] [style*="color: #465570"] { color: #B8C2D2 !important; }
:root[data-theme="dark-a"] [style*="color:#61708C"],
:root[data-theme="dark-a"] [style*="color: #61708C"] { color: #9AA4B5 !important; }
:root[data-theme="dark-a"] [style*="color:#9DB0BE"],
:root[data-theme="dark-a"] [style*="color: #9DB0BE"] { color: #6B7585 !important; }
:root[data-theme="dark-a"] [style*="background:#1F7390"],
:root[data-theme="dark-a"] [style*="background: #1F7390"] { background: #5BC0DE !important; color: #0F1318 !important; }
:root[data-theme="dark-a"] [style*="background:#FFFFFF"],
:root[data-theme="dark-a"] [style*="background: #FFFFFF"] { background: #252C38 !important; }

/* Body bg fallback in case --bg-top/--bg-bot vars are missing on a screen */
:root[data-theme="dark-a"] body {
  background:
    repeating-linear-gradient(135deg, rgba(109, 197, 220, 0.04) 0 2px, transparent 2px 26px),
    linear-gradient(180deg, #1F2530 0%, #14181F 100%) !important;
  color: #E8EEF7;
}

/* =====================================================================
   DARK-B — deep navy + electric teal
   Vibe: punchy, modern, high-contrast — the "premium tech" feel
   ===================================================================== */
:root[data-theme="dark-b"] {
  --navy: #F1F5FB;
  --muted: #8FA0BC;
  --muted-2: #B5C5DE;
  --blue: #7BB7FF;
  --blue-soft: #1E2D47;
  --bg-top: #0B1426;
  --bg-bot: #060A14;
  --card: #152238;
  --teal: #22D3EE;
  --teal-ink: #38E1F3;
  --teal-soft: #18404F;
}

:root[data-theme="dark-b"] [style*="color:#1C2A47"],
:root[data-theme="dark-b"] [style*="color: #1C2A47"] { color: #F1F5FB !important; }
:root[data-theme="dark-b"] [style*="color:#465570"],
:root[data-theme="dark-b"] [style*="color: #465570"] { color: #B5C5DE !important; }
:root[data-theme="dark-b"] [style*="color:#61708C"],
:root[data-theme="dark-b"] [style*="color: #61708C"] { color: #8FA0BC !important; }
:root[data-theme="dark-b"] [style*="color:#9DB0BE"],
:root[data-theme="dark-b"] [style*="color: #9DB0BE"] { color: #5A6F8E !important; }
:root[data-theme="dark-b"] [style*="background:#1F7390"],
:root[data-theme="dark-b"] [style*="background: #1F7390"] { background: #22D3EE !important; color: #070D1A !important; }
:root[data-theme="dark-b"] [style*="background:#FFFFFF"],
:root[data-theme="dark-b"] [style*="background: #FFFFFF"] { background: #152238 !important; }

:root[data-theme="dark-b"] body {
  background:
    repeating-linear-gradient(135deg, rgba(34, 211, 238, 0.05) 0 2px, transparent 2px 26px),
    linear-gradient(180deg, #0B1426 0%, #060A14 100%) !important;
  color: #F1F5FB;
}

/* =====================================================================
   DARK-C — soft gunmetal + LOGO BLUE accents (Danya picked, 2026-06-23)
   Vibe: muted gunmetal background, accents pulled to the exact AXF logo
   X-stroke blue (#52A0BD). Danya picked C over A/B; per their ask, the
   pastel-teal accents were swapped to brand blue. Deeper logo teal
   (#1F7390) covers ink / hover for the "darker text vibe".
   ===================================================================== */
:root[data-theme="dark-c"] {
  --navy: #DDE3EC;
  --muted: #A0A8B6;
  --muted-2: #B0BCCC;
  --blue: #52A0BD;       /* logo X-stroke blue */
  --blue-soft: #1F3A47;
  --bg-top: #232730;
  --bg-bot: #14171D;
  --card: #2C313C;
  --teal: #52A0BD;       /* logo X-stroke blue (unified accent) */
  --teal-ink: #1F7390;   /* deeper logo teal — text/lines/hover (darker variant) */
  --teal-soft: #1F3A47;
}

:root[data-theme="dark-c"] [style*="color:#1C2A47"],
:root[data-theme="dark-c"] [style*="color: #1C2A47"] { color: #DDE3EC !important; }
:root[data-theme="dark-c"] [style*="color:#465570"],
:root[data-theme="dark-c"] [style*="color: #465570"] { color: #B0BCCC !important; }
:root[data-theme="dark-c"] [style*="color:#61708C"],
:root[data-theme="dark-c"] [style*="color: #61708C"] { color: #A0A8B6 !important; }
:root[data-theme="dark-c"] [style*="color:#9DB0BE"],
:root[data-theme="dark-c"] [style*="color: #9DB0BE"] { color: #6B7280 !important; }
/* Selected squares / primary buttons → logo blue */
:root[data-theme="dark-c"] [style*="background:#1F7390"],
:root[data-theme="dark-c"] [style*="background: #1F7390"] { background: #52A0BD !important; color: #14171D !important; }
:root[data-theme="dark-c"] [style*="background:#FFFFFF"],
:root[data-theme="dark-c"] [style*="background: #FFFFFF"] { background: #2C313C !important; }

:root[data-theme="dark-c"] body {
  background:
    repeating-linear-gradient(135deg, rgba(82, 160, 189, 0.06) 0 2px, transparent 2px 26px),
    linear-gradient(180deg, #232730 0%, #14171D 100%) !important;
  color: #DDE3EC;
}

/* =====================================================================
   Walker grid landing (axf.css surface) — make cards/tiles theme-aware
   ===================================================================== */
:root[data-theme="dark-a"] .screen-tile,
:root[data-theme="dark-b"] .screen-tile,
:root[data-theme="dark-c"] .screen-tile {
  background: var(--card) !important;
  color: var(--navy) !important;
  border-color: rgba(120, 180, 210, 0.18) !important;
}
:root[data-theme="dark-a"] .screen-tile .id,
:root[data-theme="dark-b"] .screen-tile .id,
:root[data-theme="dark-c"] .screen-tile .id { color: var(--muted) !important; }
:root[data-theme="dark-a"] .screen-tile .title,
:root[data-theme="dark-b"] .screen-tile .title,
:root[data-theme="dark-c"] .screen-tile .title { color: var(--navy) !important; }
:root[data-theme="dark-a"] .app-topnav,
:root[data-theme="dark-b"] .app-topnav,
:root[data-theme="dark-c"] .app-topnav {
  background: rgba(20, 26, 36, 0.92) !important;
  color: var(--navy) !important;
  border-color: rgba(120, 180, 210, 0.18) !important;
}
:root[data-theme="dark-a"] .app-topnav a,
:root[data-theme="dark-b"] .app-topnav a,
:root[data-theme="dark-c"] .app-topnav a { color: var(--muted) !important; }
:root[data-theme="dark-a"] .app-topnav a.active,
:root[data-theme="dark-b"] .app-topnav a.active,
:root[data-theme="dark-c"] .app-topnav a.active { color: var(--teal) !important; }
:root[data-theme="dark-a"] h1,
:root[data-theme="dark-b"] h1,
:root[data-theme="dark-c"] h1 { color: var(--navy) !important; }