/*
 * brains-a11y-bridge.css — palette reconciliation for brainscertified.com
 * ---------------------------------------------------------------------------
 * Maps the BRAINS-A11Y token system onto this site's own brand palette
 * (navy #08101e / cream #f4f1e8 / gold #f5c14e, Inter font), so every
 * a11y axis visibly affects the page while the DEFAULT state is
 * indistinguishable from the current design.
 *
 * This file is UNLAYERED — it wins over the layered brains-a11y-brand
 * rules in brains.css without a specificity fight.
 *
 * Load order (already enforced by each prototype page):
 *   base.css → brains.css → panel.css → trigger.css → bridge.css (this file)
 *
 * Axis → site colour mapping
 * ─────────────────────────────────────────────────────────────────────────────
 * theme        midnight → navy bg #08101e / cream ink #f4f1e8
 *              bone     → warm cream bg #f6f1e2 / navy ink #161a2b
 * accent       gold     → #f5c14e (dark) / #e2a82a (light, accessible)
 *              teal     → #5eead4 (dark) / #0f766e (light)
 *              blue     → #7aa3ff (dark) / #2a5fc7 (light)
 * contrast     high     → lifts --ink-muted to near-full cream / navy
 *              soft     → softens bg luminance
 *              default  → no override
 * text-size    s–xxl    → scales <html> via base.css (affects rem units + clamp())
 * line-spacing tight/standard/roomy → sets body line-height via base.css
 * reading-font hyperlegible → Atkinson Hyperlegible (font must be loaded)
 * motion       reduced  → kills CSS animation-duration via base.css
 * text-spacing wide     → letter/word spacing on prose via base.css
 * measure      narrow   → max-width cap on prose elements via base.css
 * decoration   hidden   → hides [data-decorative] elements via base.css
 * density      compact  → scales --space-* tokens via base.css
 * ─────────────────────────────────────────────────────────────────────────────
 */

/* ── Midnight / default — site's own navy/cream/gold ─────────────────────── */

:root,
:root[data-theme='midnight'] {
  /* Core palette */
  --bg:       #08101e;
  --surface:  #0c1426;
  --surface-2: #0f1a30;
  --ink:      #f4f1e8;
  --ink-muted: rgba(244, 241, 232, 0.55);
  --ink-muted-high: rgba(244, 241, 232, 0.92);

  /* Borders */
  --line:      rgba(255, 255, 255, 0.08);
  --line-high: rgba(255, 255, 255, 0.36);
  --control-border: rgba(244, 241, 232, 0.28);
  --overlay-bg: #0c1426;

  /* Soft contrast */
  --bg-soft:        #111c30;
  --surface-soft:   #162038;
  --ink-soft:       #e0ddd4;
  --ink-muted-soft: rgba(244, 241, 232, 0.44);

  /* Gold accent */
  --accent:     #f5c14e;
  --accent-ink: #161a2b;
  --focus-ring: rgba(245, 193, 78, 0.75);

  /* Site fonts — keep Inter as the default body face */
  --font-display: 'Inter', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;
}

/* ── Bone (light) — warm cream / navy / accessible gold ─────────────────── */

:root[data-theme='bone'] {
  --bg:       #f6f1e2;
  --surface:  #faf6ea;
  --surface-2: #f1ead4;
  --ink:      #161a2b;
  --ink-muted: rgba(22, 26, 43, 0.55);
  --ink-muted-high: #161a2b;

  --line:      rgba(22, 26, 43, 0.10);
  --line-high: rgba(22, 26, 43, 0.45);
  --control-border: rgba(22, 26, 43, 0.38);
  --overlay-bg: #faf6ea;

  --bg-soft:        #f2ead2;
  --surface-soft:   #e9e1c8;
  --ink-soft:       #1e2235;
  --ink-muted-soft: rgba(22, 26, 43, 0.44);

  /* Accessible gold on light (#e2a82a ≈ 4.55:1 on #f6f1e2) */
  --accent:     #e2a82a;
  --accent-ink: #161a2b;
  --focus-ring: rgba(226, 168, 42, 0.75);

  /* Paper-tint variants */
  --bg-tint-warm: #f7eed8;
  --bg-tint-cool: #eaf0f4;
}

/* ── Accent-axis overrides ───────────────────────────────────────────────── */

/* Teal */
:root[data-accent='teal']                        { --accent: #5eead4; --accent-ink: #08101e; --focus-ring: rgba(94, 234, 212, 0.75); }
:root[data-theme='bone'][data-accent='teal']     { --accent: #0f766e; --accent-ink: #f6f1e2; --focus-ring: rgba(15, 118, 110, 0.75); }

/* Blue */
:root[data-accent='blue']                        { --accent: #7aa3ff; --accent-ink: #08101e; --focus-ring: rgba(122, 163, 255, 0.75); }
:root[data-theme='bone'][data-accent='blue']     { --accent: #2a5fc7; --accent-ink: #f6f1e2; --focus-ring: rgba(42, 95, 199, 0.75); }

/* Gold (explicit, already the default — here for completeness) */
:root[data-accent='gold']                        { --accent: #f5c14e; --accent-ink: #161a2b; --focus-ring: rgba(245, 193, 78, 0.75); }
:root[data-theme='bone'][data-accent='gold']     { --accent: #e2a82a; --accent-ink: #161a2b; --focus-ring: rgba(226, 168, 42, 0.75); }

/* ── Apply tokens to body ────────────────────────────────────────────────── */
/* These unlayered rules beat the hardcoded #08101e / #f4f1e8 in each page's
 * <style> block and the layered brains.css body rule. The React app used to
 * write document.body.style.background/color via useEffect; those effects are
 * now removed so CSS takes over correctly. */

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
}

/* Headings inherit display font */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
}

/* Monospace elements */
code, kbd, samp, pre {
  font-family: var(--font-mono);
}

/* ── Selection — keep brand gold/navy on any theme ───────────────────────── */
::selection {
  background: var(--accent);
  color: var(--accent-ink);
}

/* ── Reading font: Atkinson Hyperlegible ─────────────────────────────────── */
/* Switches body + headings to the hyperlegible face.
 * The font is loaded via Google Fonts in each page's <link>. */
[data-reading-font='hyperlegible'] body,
[data-reading-font='hyperlegible'] h1,
[data-reading-font='hyperlegible'] h2,
[data-reading-font='hyperlegible'] h3,
[data-reading-font='hyperlegible'] h4 {
  font-family: 'Atkinson Hyperlegible', system-ui, -apple-system, sans-serif;
}

/* ── Text size: zoom-based scaling for px-unit site content ─────────────── */
/* base.css scales html font-size via --a11y-text-scale, but this site's
 * layout is px-based (inline React styles), so font-size alone does nothing.
 * Applying zoom to #root scales the entire app content proportionally.
 * #a11y-panel is a sibling of #root (NOT inside it), so the panel is
 * unaffected and never double-scaled. */
#root {
  zoom: var(--a11y-text-scale, 1);
}

/* ── Line spacing: apply to running text inside the React tree ───────────── */
/* base.css sets body { line-height: var(--a11y-line-height) } but inline
 * React styles override it on most elements. These !important rules beat
 * the inline overrides for all running-text elements.
 * Note: elements with purely layout or display-only line-heights (e.g. nav
 * links, badge labels) may still override — best-effort on a px-inline site. */
#root p,
#root li,
#root h1,
#root h2,
#root h3,
#root h4,
#root h5,
#root blockquote {
  line-height: var(--a11y-line-height) !important;
}

/* ── Panel: position + z-index for the fixed popover container ───────────── */
/* #a11y-panel is a static <div> in each page's HTML with inline
 * position:fixed;top:64px;right:16px;z-index:1000. These rules reinforce
 * that the mounted panel content also sits above the nav (z-index 50). */
#a11y-panel {
  z-index: 1000;
}

.a11y-popover {
  z-index: 1000;
}

/* ── Scroll-behaviour: reduced-motion axis honours the site's html rule ───── */
html[data-motion='reduced'] {
  scroll-behavior: auto !important;
}

/* ---------------------------------------------------------------------------
   #a11y-panel popover container (mountPanel target in the static HTML).
   Force an explicit width + hard top-right anchor so the panel can't collapse
   to min-content or drift off-screen. Fixed → viewport-relative (the container
   is a direct child of <body>, no transform ancestor). Scrolls if tall.
   --------------------------------------------------------------------------- */
#a11y-panel:not([hidden]) {
  position: fixed !important;
  top: 64px !important;
  right: 16px !important;
  left: auto !important;
  bottom: auto !important;
  width: min(22rem, calc(100vw - 2rem)) !important;
  max-width: none !important;
  max-height: calc(100vh - 5rem) !important;
  overflow-y: auto !important;
  z-index: 1000 !important;
}
#a11y-panel > .a11y-panel { width: 100% !important; max-width: none !important; }
@media (max-width: 30rem) {
  #a11y-panel:not([hidden]) { top: 12px !important; right: 12px !important; left: 12px !important; width: auto !important; }
}