/* ============================================================================
   AWS Transform explainer site — light/dark theme system.
   The site is DARK-FIRST: each page's inline :root defines the dark palette.
   This sheet adds the light override (html[data-theme="light"]) plus the
   floating toggle button. Link AFTER the page's inline <style> and icons.css.
   Storage key: awstf-theme.  Init marker: AWSTF-THEME-INIT.
   ============================================================================ */

/* ── Floating toggle button (bottom-right) ───────────────────────────────── */
.theme-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9600;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--dim);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
  transition: transform .2s var(--smooth, ease), box-shadow .2s ease, background .3s ease, color .3s ease, border-color .3s ease;
}
.theme-fab:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 10px 28px rgba(0, 0, 0, .45); }
.theme-fab .cs-ico { width: 1em; height: 1em; stroke-width: 1.3px; }

/* ── LIGHT THEME ─────────────────────────────────────────────────────────── */
html[data-theme="light"] {
  --bg: #F4F6FB;
  --card: #FFFFFF;
  --surface: #EDF1F7;
  --green: #059669;
  --cyan: #0E7490;
  --amber: #B45309;
  --indigo: #4F46E5;
  --blue: #2563EB;
  --red: #DC2626;
  --text: #0F172A;
  --muted: #475569;
  --dim: #94A3B8;
}
html[data-theme="light"] .theme-fab { box-shadow: 0 6px 18px rgba(15, 23, 42, .12); border-color: #E2E8F0; }

/* selection colour reads on light too */
html[data-theme="light"] ::selection { background: rgba(5, 150, 105, .22); color: #0F172A; }

/* ---- index.html: nav ---- */
html[data-theme="light"] .top-nav { background: rgba(244, 246, 251, .85); border-bottom-color: rgba(15, 23, 42, .08); }
html[data-theme="light"] .top-nav.scrolled { box-shadow: 0 4px 20px rgba(15, 23, 42, .08); }
html[data-theme="light"] .top-nav-links a:hover { background: rgba(15, 23, 42, .05); border-color: rgba(15, 23, 42, .12); }
html[data-theme="light"] #gnavToggle { background: rgba(255, 255, 255, .9); border-color: rgba(15, 23, 42, .1); }
html[data-theme="light"] #gnavToggle span { background: #475569; }
html[data-theme="light"] #gnavToggle:hover span { background: #059669; }
html[data-theme="light"] #globalNav { background: rgba(255, 255, 255, .95); border-color: rgba(15, 23, 42, .1); box-shadow: 0 12px 32px rgba(15, 23, 42, .12); }
html[data-theme="light"] #globalNav .gnav-link { background: rgba(15, 23, 42, .03) !important; border-color: rgba(15, 23, 42, .08) !important; color: #334155; }
html[data-theme="light"] #globalNav .gnav-link:hover { background: rgba(5, 150, 105, .12) !important; border-color: rgba(5, 150, 105, .35) !important; color: #0F172A; }

/* ---- index.html: hero 3D scene ---- */
html[data-theme="light"] .agent-node .node-label,
html[data-theme="light"] .agent-node .node-sub { text-shadow: 0 1px 2px rgba(255, 255, 255, .7); }
html[data-theme="light"] .scene-label { background: rgba(255, 255, 255, .78); border-color: rgba(15, 23, 42, .08); text-shadow: none; }
html[data-theme="light"] .orbit-ring { border-color: rgba(15, 23, 42, .12); }
html[data-theme="light"] .trail-path { stroke: rgba(15, 23, 42, .1); }
html[data-theme="light"] .node-vmware .node-icon { background: rgba(14, 116, 144, .08); border-color: rgba(14, 116, 144, .3); }
html[data-theme="light"] .node-custom .node-icon { background: rgba(5, 150, 105, .08); border-color: rgba(5, 150, 105, .3); }
html[data-theme="light"] .node-mainframe .node-icon { background: rgba(79, 70, 229, .08); border-color: rgba(79, 70, 229, .3); }
html[data-theme="light"] .node-windows .node-icon { background: rgba(37, 99, 235, .08); border-color: rgba(37, 99, 235, .3); }
html[data-theme="light"] .center-brain {
  background: radial-gradient(circle, rgba(79, 70, 229, .12), rgba(5, 150, 105, .06), transparent 70%);
  border-color: rgba(79, 70, 229, .25);
  box-shadow: 0 0 40px rgba(79, 70, 229, .12);
}

/* ---- index.html: architecture ---- */
html[data-theme="light"] .arch-layer { border-color: rgba(15, 23, 42, .1); }
html[data-theme="light"] .arch-chip { border-color: rgba(15, 23, 42, .1); }
html[data-theme="light"] .arch-chip:hover { border-color: rgba(15, 23, 42, .2); box-shadow: 0 8px 20px rgba(15, 23, 42, .1); }
html[data-theme="light"] .side-chip { border-color: rgba(15, 23, 42, .1); }
html[data-theme="light"] .side-chip:hover { border-color: rgba(14, 116, 144, .35); background: rgba(14, 116, 144, .06); }
html[data-theme="light"] .arch-bedrock { background: linear-gradient(90deg, rgba(79, 70, 229, .1), rgba(168, 85, 247, .1)); border-color: rgba(79, 70, 229, .2); }

/* ---- index.html: capability cards ---- */
html[data-theme="light"] .cap-card { border-color: rgba(15, 23, 42, .08); box-shadow: 0 1px 3px rgba(15, 23, 42, .04); }
html[data-theme="light"] .cap-card:hover { box-shadow: 0 20px 48px rgba(15, 23, 42, .12); }
html[data-theme="light"] .cap-tag { background: rgba(15, 23, 42, .05); border-color: rgba(15, 23, 42, .08); }

/* ---- index.html: resources + footer ---- */
html[data-theme="light"] .resource-group { border-color: rgba(15, 23, 42, .1); }
html[data-theme="light"] .resource-list a { border-bottom-color: rgba(15, 23, 42, .12); }
html[data-theme="light"] footer { border-top-color: rgba(15, 23, 42, .08); }
html[data-theme="light"] footer p[style*="border-top"] { border-top-color: rgba(15, 23, 42, .08) !important; }

/* ── LIGHT THEME: shared overrides for the explainer + dashboard pages ─────
   These pages carry many inline hardcoded dark idioms (white-alpha borders and
   glass surfaces) that vanish on a light background. The palette variables
   (--bg/--card/--surface/--text/accents) already flip via the block above;
   these attribute-selector rules recover the borders/surfaces that were pinned
   to literal rgba(255,255,255,...) values inline. Border-only overrides are
   safe: they no-op on elements that used the colour for something else. */
html[data-theme="light"] [style*="rgba(255,255,255,.03)"],
html[data-theme="light"] [style*="rgba(255,255,255,.04)"] { border-color: rgba(15, 23, 42, .07) !important; }
html[data-theme="light"] [style*="rgba(255,255,255,.05)"],
html[data-theme="light"] [style*="rgba(255,255,255,.06)"] { border-color: rgba(15, 23, 42, .11) !important; }
html[data-theme="light"] [style*="rgba(255,255,255,.08)"],
html[data-theme="light"] [style*="rgba(255,255,255,.1)"] { border-color: rgba(15, 23, 42, .14) !important; }
html[data-theme="light"] [style*="rgba(255,255,255,.12)"],
html[data-theme="light"] [style*="rgba(255,255,255,.15)"] { border-color: rgba(15, 23, 42, .2) !important; }

/* Common non-inline border idiom used in stylesheet rules on these pages */
html[data-theme="light"] .arch-layer,
html[data-theme="light"] .oob-cat,
html[data-theme="light"] .pricing-card,
html[data-theme="light"] .info-card,
html[data-theme="light"] .phase-card,
html[data-theme="light"] .mode-card,
html[data-theme="light"] .stack-card,
html[data-theme="light"] .pattern-card,
html[data-theme="light"] .step-card { border-color: rgba(15, 23, 42, .1); }

/* Dashboard: soften dark drop-shadows and keep the header divider visible */
html[data-theme="light"] [style*="rgba(0,0,0,.3)"] { box-shadow: 0 8px 24px rgba(15, 23, 42, .1) !important; }
html[data-theme="light"] .dash-header { background: linear-gradient(180deg, rgba(5, 150, 105, .04), transparent); }

/* ── LIGHT THEME: sticky sub-heading nav bar (all explainer pages) ────────── */
html[data-theme="light"] .sticky-nav { background: rgba(244, 246, 251, .85); border-bottom-color: rgba(15, 23, 42, .08); }
html[data-theme="light"] .nav-pill:hover { color: var(--text); background: rgba(15, 23, 42, .05); }

/* ── LIGHT THEME: inline SVG diagram nodes ────────────────────────────────
   Diagrams (VMware hub/spoke topology, architecture, pipelines) hardcode the
   dark palette hexes as SVG fills. Flip the dark *surfaces* to light and the
   near-white *text* fills to dark, and darken the low-contrast accent text so
   it reads on white. Case-insensitive to catch either hex casing. */
html[data-theme="light"] svg [fill="#131825" i] { fill: #FFFFFF; }
html[data-theme="light"] svg [fill="#1E2640" i] { fill: #EEF2FF; }
html[data-theme="light"] svg [fill="#0B0F1A" i] { fill: #F4F6FB; }
html[data-theme="light"] svg [fill="#F1F5F9" i] { fill: #0F172A; }
html[data-theme="light"] svg [fill="#22D3EE" i] { fill: #0E7490; }
html[data-theme="light"] svg [fill="#818CF8" i] { fill: #4F46E5; }
html[data-theme="light"] svg [fill="#10B981" i] { fill: #059669; }
html[data-theme="light"] svg [fill="#F59E0B" i] { fill: #B45309; }
html[data-theme="light"] svg [fill="#3B82F6" i] { fill: #2563EB; }
html[data-theme="light"] svg [fill="#94A3B8" i] { fill: #64748B; }

/* ── Official AWS Transform product icon (teal service badge) ─────────────── */
.awstf-logo { width: 26px; height: 26px; border-radius: 6px; flex: none; display: inline-block; vertical-align: middle; }
.hero-badge .awstf-logo { width: 20px; height: 20px; border-radius: 5px; margin-right: 2px; }
.top-nav-brand .awstf-logo { width: 24px; height: 24px; }

/* SVG diagram glyphs converted from emoji → Cloudscape (monochrome, theme-aware) */
svg .arch-glyph { color: var(--text); }
svg .arch-glyph .filled { fill: currentColor; }
svg .arch-glyph .no-stroke { stroke: none; }

/* ── LIGHT THEME: demo-dashboard.html ─────────────────────────────────────
   The dashboard defines its own variable set (--bg-card, --surface-light,
   --border, --*-dim) plus a hardcoded dark steps-panel background. Flip them. */
html[data-theme="light"] {
  --bg-card: #FFFFFF;
  --bg-card-hover: #F3F6FB;
  --surface-light: #E2E8F0;
  --border: #E2E8F0;
  --border-light: #CBD5E1;
  --green-dim: #D1FAE5;
  --amber-dim: #FEF3C7;
  --blue-dim: #DBEAFE;
  --red-dim: #FEE2E2;
  --cyan-dim: #CFFAFE;
}
/* The gray/dark transformation-steps panel → light surface */
html[data-theme="light"] .panel-steps { background: rgba(237, 241, 247, .55); }
html[data-theme="light"] .summary-item { background: rgba(255, 255, 255, .7); }
/* Section headers and pending steps need darker text on white */
html[data-theme="light"] .panel-steps h3,
html[data-theme="light"] .panel-feed h3 { color: #475569; }
html[data-theme="light"] .step-item.pending .step-num { color: #64748B; }
html[data-theme="light"] .step-item.pending .step-title,
html[data-theme="light"] .step-item.pending .step-desc { color: #94A3B8; }
/* Status-icon badges: dark gradient chips → light tints */
html[data-theme="light"] .status-icon.running,
html[data-theme="light"] .status-icon.complete { background: linear-gradient(135deg, #D1FAE5, rgba(16, 185, 129, .18)); }
html[data-theme="light"] .status-icon.failed { background: linear-gradient(135deg, #FEE2E2, rgba(239, 68, 68, .15)); }
html[data-theme="light"] .status-icon.idle { background: #EDF1F7; }
/* Step connector line — was tuned for dark */
html[data-theme="light"] .step-list::before { background: linear-gradient(180deg, var(--green), #CBD5E1, #E2E8F0); }

/* ── Persistent Home button (explainer + dashboard pages) ─────────────────
   Icon button matching the ☰ menu toggle, forming a clean [☰][⌂] cluster.
   Same 36x36 rounded-square footprint, sits just to the right of the toggle. */
.home-fab {
  position: fixed;
  top: 16px;
  left: 60px;
  z-index: 9500;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(11, 15, 26, .85);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, .08);
  color: #CBD5E1;
  text-decoration: none;
  transition: all .25s var(--ease, ease);
}
.home-fab:hover { border-color: rgba(16, 185, 129, .4); color: #10B981; background: rgba(16, 185, 129, .12); }
.home-fab .cs-inline { margin: 0; width: 18px; height: 18px; }
@media (max-width: 600px) { .home-fab { left: 58px; } }
html[data-theme="light"] .home-fab { background: rgba(255, 255, 255, .9); border-color: rgba(15, 23, 42, .1); color: #475569; }
html[data-theme="light"] .home-fab:hover { background: rgba(5, 150, 105, .12); border-color: rgba(5, 150, 105, .4); color: #059669; }

/* ── LIGHT THEME: architecture diagram hover tooltips (index) ──────────────
   .chip-tip hardcodes a dark background but its text is var(--text), which
   flips dark in light mode → dark-on-dark. Make the whole tooltip light. */
html[data-theme="light"] .arch-chip .chip-tip {
  background: #FFFFFF;
  border-color: rgba(15, 23, 42, .12);
  color: #0F172A;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .16);
}
html[data-theme="light"] .arch-chip .chip-tip::after { border-top-color: #FFFFFF; }