/*
 * EVE AI Core — Blog Post Theme Bridge
 * ------------------------------------------------------------------
 * The standalone /blog/*.html posts each ship their own inline design
 * tokens (a warm "editorial" set and a "slate/technical" set) and were
 * hard-pinned to a light background, so they ignored the site-wide
 * light/dark switcher used by every other marketing page.
 *
 * This sheet REMAPS those post-local custom properties onto the site's
 * dark-default palette (matching /css/theme.css) and supplies a
 * [data-theme="light"] override. Result: posts default to the dark
 * "government" steel theme and follow the site theme switcher exactly
 * like index / contact / the blog listing.
 *
 * INJECTION: linked LAST in <head>, AFTER each post's inline <style>,
 * so these :root declarations win by source order. The footer keeps its
 * own --ftr-* tokens (already dark by default) — intentionally untouched.
 */

/* ───────────────────────────── DARK (default) ──────────────────────── */
:root {
  /* Editorial / "paper" token set (~58 posts) */
  --ink:          #e5e7eb;
  --paper:        #08090c;
  --accent:       #4a90e2;               /* exact site --accent-primary (parity) */
  --accent-light: #11161f;               /* subtle raised surface */
  --mid:          #9ca3af;
  --rule:         #23262d;
  --mono:         #b8c0cf;

  /* Technical / "slate" token set (~27 posts) */
  --bg:           #08090c;
  --bg-card:      #0e0f13;
  --bg-panel:     #0e0f13;
  --bg-raised:    #15171c;
  --bg-primary:   #08090c;
  --bg-secondary: #0e0f13;
  --bg-tertiary:  #15171c;
  --bg-hover:     #15171c;
  --text:         #e5e7eb;
  --text-primary: #e5e7eb;
  --text-secondary:#9ca3af;
  --text-dim:     #9ca3af;
  --text-muted:   #9ca3af;
  --text-subtle:  #767f8d;
  --heading:      #f3f4f6;
  --nav:          rgba(11, 15, 23, 0.95);
  --border:       #23262d;
  --border2:      #2a2d35;
  --border-dim:   #1a1c22;
  --border-light: #2a2d35;
  --bg-callout:   #11161f;
  --bg-code:      #15171c;
  --accent-hover: #6fa8ec;
  --max:          820px;

  /* Categorical / status accents (shared, AA-tuned for dark) */
  --accent2:    #818cf8;
  --accent-glow:rgba(74, 144, 226, 0.25);
  --accent-dim: rgba(74, 144, 226, 0.12);
  --red:    #f87171;  --red-dim:    rgba(248, 113, 113, 0.12);
  --green:  #34d399;  --green-dim:  rgba(52, 211, 153, 0.12);
  --gold:   #d4af5a;
  --amber:  #fbbf24;  --amber-dim:  rgba(251, 191, 36, 0.12);
  --cyan:   #22d3ee;  --cyan-dim:   rgba(34, 211, 238, 0.12);
  --purple: #a78bfa;  --purple-dim: rgba(167, 139, 250, 0.12);
  --teal:   #2dd4bf;  --teal-dim:   rgba(45, 212, 191, 0.12);
}

/* !important so the remap wins over the inline FOUC pin (which sets a dark
 * !important bg+color on html,body for pre-CSS flash prevention). Without
 * this, light mode would stay dark because the FOUC line only repaints
 * <html>, never <body>. This sheet is render-blocking, so the FOUC line still
 * does its job before paint. */
html, body { background: var(--paper) !important; color: var(--ink) !important; }

/* ── Hardcoded light surfaces that bypass the token system ────────────
 * Scoped to every non-light theme so the dark variants (midnight, amber,
 * etc.) are covered too. !important is required to beat inline style="". */
:root:not([data-theme="light"]) .compare tbody tr:nth-child(odd),
:root:not([data-theme="light"]) .compare tbody tr:nth-child(odd) td {
  background: var(--bg-card) !important;
}
:root:not([data-theme="light"]) .req-table td        { color: var(--ink) !important; }
:root:not([data-theme="light"]) .req-table tr:nth-child(even) td { background: var(--bg-card) !important; }
:root:not([data-theme="light"]) .obligation-block    { background: var(--bg-card) !important; }

/* Editorial prev/next article nav uses inline orange + paper-rule borders */
:root:not([data-theme="light"]) .blog-nav a {
  color: var(--accent) !important;
  border-color: var(--rule) !important;
}
:root:not([data-theme="light"]) .blog-nav a[href="/blog"] {
  background: var(--accent) !important;
  color: #ffffff !important;
  border-color: var(--accent) !important;
}

/* Byline avatar gradient terminates in a warm brown on a few posts */
:root:not([data-theme="light"]) .byline-avatar {
  background: linear-gradient(135deg, var(--accent) 0%, #1f3a5f 100%);
}

/* ── Defensive net: inline light surfaces / hardcoded dark text ───────
 * Posts vary; some pin light backgrounds or dark text directly in a
 * style="" attribute, which no class rule can reach. Flip those in every
 * non-light theme. Attribute substring matching tolerates the optional
 * space after the colon. */
:root:not([data-theme="light"]) [style*="background:#fff"],
:root:not([data-theme="light"]) [style*="background: #fff"],
:root:not([data-theme="light"]) [style*="background:#FFF"],
:root:not([data-theme="light"]) [style*="background:white"],
:root:not([data-theme="light"]) [style*="background: white"],
:root:not([data-theme="light"]) [style*="background:#f8fafc"],
:root:not([data-theme="light"]) [style*="background: #f8fafc"],
:root:not([data-theme="light"]) [style*="background:#f9f6ef"],
:root:not([data-theme="light"]) [style*="background:#f1f5f9"],
:root:not([data-theme="light"]) [style*="background:#e8f0fe"],
:root:not([data-theme="light"]) [style*="background:#faf7f2"],
:root:not([data-theme="light"]) [style*="background: #faf7f2"],
:root:not([data-theme="light"]) [style*="background:#f4e8df"],
:root:not([data-theme="light"]) [style*="background: #f4e8df"],
:root:not([data-theme="light"]) [style*="background:#fef9c3"],
:root:not([data-theme="light"]) [style*="background:#fef2f2"],
:root:not([data-theme="light"]) [style*="background:#dcfce7"] {
  background: var(--bg-card) !important;
}

/* Hardcoded light surface CLASSES (audit-enumerated across all 88 posts) that
 * pin a literal light background in a class rule the token remap can't reach.
 * Flip to a dark card surface with readable text in every non-light theme. */
:root:not([data-theme="light"]) .bundle-card,
:root:not([data-theme="light"]) .patent-card,
:root:not([data-theme="light"]) .gap-block,
:root:not([data-theme="light"]) .post-tag,
:root:not([data-theme="light"]) .criterion-number {
  background: var(--bg-card) !important;
  color: var(--ink) !important;
  border-color: var(--border) !important;
}

/* Code/diagram surfaces render consistently dark with light text in BOTH
 * themes (a common, clean convention — code stays dark on light pages too).
 * This resolves every code-block contrast case at once: paper posts that
 * invert via var(--ink), slate posts hardcoding #1e293b, and posts whose
 * light code bg was tokenized to var(--bg-card). Syntax-highlight token spans
 * keep their own colours (we only set the container's inherited colour). */
pre,
.code-block {
  background: #0d1117 !important;
  color: #c9d1d9 !important;
  border-color: #21262d !important;
}

/* Diagrams have structured inner content (labelled nodes), so they follow the
 * theme as a surface rather than being pinned dark — inner text stays readable
 * in both modes. */
.pipeline-diagram {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
}

/* Semantic tag pills hardcode dark green/red text that vanishes on the dark
 * pill surface — make them readable in non-light themes. */
:root:not([data-theme="light"]) .tag-pill {
  background: var(--bg-raised) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* rgba light surfaces (e.g. rgba(248,250,252,.8)) the value remap can't reach. */
:root:not([data-theme="light"]) .dim-label {
  background: var(--bg-card) !important;
  color: var(--ink) !important;
}
:root:not([data-theme="light"]) [style*="color:#0f172a"],
:root:not([data-theme="light"]) [style*="color: #0f172a"],
:root:not([data-theme="light"]) [style*="color:#0d0d0d"],
:root:not([data-theme="light"]) [style*="color: #0d0d0d"],
:root:not([data-theme="light"]) [style*="color:#1a1a1a"],
:root:not([data-theme="light"]) [style*="color: #1a1a1a"],
:root:not([data-theme="light"]) [style*="color:#3a3026"],
:root:not([data-theme="light"]) [style*="color: #3a3026"],
:root:not([data-theme="light"]) [style*="color:#6b6460"],
:root:not([data-theme="light"]) [style*="color: #6b6460"],
:root:not([data-theme="light"]) [style*="color:#111"],
:root:not([data-theme="light"]) [style*="color: #111"] {
  color: var(--ink) !important;
}
/* Paper-palette text colors (ink/mono/mid) hardcoded in class rules on boxes
 * whose surface we flip to dark — keep their text readable. */
:root:not([data-theme="light"]) .patent-card,
:root:not([data-theme="light"]) .bundle-card,
:root:not([data-theme="light"]) .gap-block,
:root:not([data-theme="light"]) .patent-card *,
:root:not([data-theme="light"]) .bundle-card *,
:root:not([data-theme="light"]) .gap-block * {
  color: var(--ink) !important;
}

/* Generic table zebra striping that hardcodes white/light odd rows */
:root:not([data-theme="light"]) table tbody tr:nth-child(odd),
:root:not([data-theme="light"]) table tbody tr:nth-child(odd) > td,
:root:not([data-theme="light"]) table tbody tr:nth-child(odd) > th {
  background: var(--bg-card) !important;
}

/* Inverted table header rows (paper theme uses background:var(--ink) for a
 * dark bar; after remap --ink is light, which would show as a light band on
 * dark pages). Give headers a proper raised dark surface instead. */
:root:not([data-theme="light"]) thead tr,
:root:not([data-theme="light"]) thead th,
:root:not([data-theme="light"]) .compare thead tr {
  background: var(--bg-raised) !important;
  color: var(--ink) !important;
}

/* ───────────────────────────── LIGHT (toggle) ──────────────────────── */
[data-theme="light"] {
  /* Editorial / "paper" token set */
  --ink:          #0f172a;
  --paper:        #f4f6fa;
  --accent:       #2563eb;
  --accent-light: #eaf0fb;
  --mid:          #5a6373;
  --rule:         #e2e8f0;
  --mono:         #475569;

  /* Technical / "slate" token set */
  --bg:           #f4f6fa;
  --bg-card:      #ffffff;
  --bg-panel:     #ffffff;
  --bg-raised:    #eef2f7;
  --bg-primary:   #f4f6fa;
  --bg-secondary: #ffffff;
  --bg-tertiary:  #eef2f7;
  --bg-hover:     #eef2f7;
  --text:         #1f2734;
  --text-primary: #1f2734;
  --text-secondary:#5a6373;
  --text-dim:     #5a6373;
  --text-muted:   #5a6373;
  --text-subtle:  #8a93a3;
  --heading:      #0f172a;
  --nav:          rgba(255, 255, 255, 0.95);
  --border:       #e2e8f0;
  --border2:      #d7dee7;
  --border-dim:   #eef2f7;
  --border-light: #eef2f7;
  --bg-callout:   #eef3fb;
  --bg-code:      #eef2f7;
  --accent-hover: #1d4ed8;

  /* Categorical / status accents (AA-tuned for light) */
  --accent2:    #7c3aed;
  --accent-glow:rgba(37, 99, 235, 0.18);
  --accent-dim: rgba(37, 99, 235, 0.08);
  --red:    #dc2626;  --red-dim:    rgba(220, 38, 38, 0.08);
  --green:  #047857;  --green-dim:  rgba(4, 120, 87, 0.08);
  --gold:   #92670f;
  --amber:  #b45309;  --amber-dim:  rgba(180, 83, 9, 0.08);
  --cyan:   #0891b2;  --cyan-dim:   rgba(8, 145, 178, 0.08);
  --purple: #7c3aed;  --purple-dim: rgba(124, 58, 237, 0.08);
  --teal:   #0d9488;  --teal-dim:   rgba(13, 148, 136, 0.08);
}

/* ── Light-mode dark-surface fixes ───────────────────────────────────
 * Slate posts pin a dark rgba zebra on even table rows and dark hardcoded
 * text colors that the token remap can't reach. In light mode these become
 * dark bands with near-invisible dark text — flip them to light surfaces. */
[data-theme="light"] .req-table tr:nth-child(even) td,
[data-theme="light"] .req-table tbody tr:nth-child(even) td {
  background: var(--bg-raised) !important;
  color: var(--text) !important;
}
/* .field uses a hardcoded light-blue (#9ecfff) readable on dark but invisible
 * on light — recolor to the light-mode accent. */
[data-theme="light"] .field { color: var(--accent) !important; }

/* ── Final polish: inline code / unstyled links / data-viz bars ───────
 * Inline <code> (not inside <pre>) often hardcodes a mid-blue that dips below
 * AA on the dark code chip — lift to a brighter code-blue in non-light themes. */
:root:not([data-theme="light"]) :not(pre) > code {
  color: #79b8ff !important;
}
/* Some posts leave "related article" links unstyled, so they fall back to the
 * browser default link blue (#0000ee) — invisible on dark. Use the accent. */
:root:not([data-theme="light"]) .related-card,
:root:not([data-theme="light"]) .related-card a,
:root:not([data-theme="light"]) a.related-card {
  color: var(--accent) !important;
}
/* Filled data-viz bars: accent fills are LIGHT in dark mode and DARK in light
 * mode, so the label flips with the theme to stay legible on the fill. */
:root:not([data-theme="light"]) .prob-bar { color: #0b0e14 !important; }
[data-theme="light"] .prob-bar { color: #ffffff !important; }
