/* ──────────────────────────────────────────────────────────
   AGP shared theme — light/dark via [data-theme]
   Loaded by every page after its own <style> block.

   Each page declares its own dark-mode :root tokens
   (--bg, --surface, --border, --accent, --accent2, --green,
   --text, --muted, --heading). This file extends those with
   additional tokens used across the site and provides the
   html[data-theme="light"] overrides.
   ────────────────────────────────────────────────────────── */

:root {
  --nav-bg:      rgba(13,15,20,0.92);
  --code-bg:     #0a0c10;
  --code-cmt:    #4b5263;
  --code-num:    #f9a05a;
  --code-bool:   #c792ea;
  --mermaid-bg:  #13161e;
  --shadow-card: none;
}

html[data-theme="light"] {
  --bg:          #f7f8fa;
  --surface:     #ffffff;
  --border:      #e4e7ec;
  --accent:      #2563eb;
  --accent2:     #6d28d9;
  --green:       #047857;
  --text:        #1f2937;
  --muted:       #6b7280;
  --heading:     #0f172a;
  --nav-bg:      rgba(255,255,255,0.88);
  --code-bg:     #f6f8fa;
  --code-cmt:    #6b7280;
  --code-num:    #b45309;
  --code-bool:   #7c3aed;
  --mermaid-bg:  #ffffff;
  --shadow-card: 0 1px 2px rgba(15,23,42,0.04), 0 0 0 1px rgba(15,23,42,0.03);
}

/* Subtle lift on cards in light mode (surface and bg are both very light) */
html[data-theme="light"] .domain-card,
html[data-theme="light"] .pipeline-step,
html[data-theme="light"] .schema-card,
html[data-theme="light"] .prop-card,
html[data-theme="light"] .wwh-card,
html[data-theme="light"] .vault-gate-card,
html[data-theme="light"] .paradox-card,
html[data-theme="light"] .pattern-card,
html[data-theme="light"] .next-card,
html[data-theme="light"] .persona-card,
html[data-theme="light"] .step,
html[data-theme="light"] .callout,
html[data-theme="light"] pre {
  box-shadow: var(--shadow-card);
}

/* ── Theme toggle button ───────────────────────────────── */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  padding: 0;
}
.theme-toggle:hover { color: var(--text); border-color: var(--text); }
.theme-toggle svg { width: 14px; height: 14px; display: block; }

/* Show only the icon representing the action available from the current state:
     dark → sun (click to go light)
     light → moon (click to go dark) */
html[data-theme="light"] .theme-toggle .icon-sun  { display: none; }
html[data-theme="dark"]  .theme-toggle .icon-moon { display: none; }
:root:not([data-theme]) .theme-toggle .icon-moon { display: none; }

/* ── BIAN logo (footer) ─────────────────────────────────────
   Inlined SVG recoloured to the site palette via attribute
   selectors, so it stays theme-aware in both light and dark:
     wordmark (orig #5f6062) → currentColor (footer text)
     wave + tagline (orig #c1cd23) → site accent
   ────────────────────────────────────────────────────────── */
.bian-logo-link {
  display: inline-block;
  line-height: 0;
  margin-bottom: 0.9rem;
  color: var(--muted);
  opacity: 0.92;
  transition: opacity 0.15s, color 0.15s;
}
.bian-logo-link:hover { opacity: 1; color: var(--text); }
.bian-logo { height: 30px; width: auto; display: block; }
.bian-logo [fill="#5f6062"] { fill: currentColor; }
.bian-logo [fill="#c1cd23"] { fill: var(--accent); }