/* ==========================================================================
   a11y.css — WCAG 2.2 AA contrast-floor layer
   --------------------------------------------------------------------------
   Loaded on EVERY page via components/head.html (built pages) and hand-linked
   into the case-studies/ + talks/ deep dives. Single source of truth for the
   accessible-contrast floor.

   Why a shared layer instead of editing tokens in 15 places: most pages still
   carry an inline copy of the design system (only index.html links site.css),
   so a token edit would have to be pasted into every page and would silently
   drift. This layer overrides only the colors that failed axe's color-contrast
   check (1.4.3), scoped by mode/theme so the palette keeps its character — we
   darken/adjust, we don't gut.

   Cascade note: this file loads before each page's inline <style>, so at equal
   specificity the inline rule would win on source order. All-mode rules use
   `[data-mode] …` (which matches the html element that carries the attribute).
   Combo rules that would tie a page's `[data-mode][data-theme] .class` (0,3,0)
   rule use `html[data-mode="…"][data-theme="…"] …` (no space — same element,
   0,3,1) plus !important, so the floor always wins. Each block cites its WCAG
   criterion and the measured failure, computed against the real fg/bg pairs in
   a11y-audit/raw/.
   ========================================================================== */

/* ==========================================================================
   PRO MODE · accent token (1.4.3)
   #FF1493 fails 4.5:1 as text on light (3.48–3.64). Custom properties beat
   specificity via !important, so redefining --accent retargets every
   var(--accent) *text* usage with no effect on non-accent elements.
     · light: deepen to #C4126E (5.7:1 on #fff)
     · dark:  brighten to #FF5CAD (6.0:1 on #1c1c1a cards)
   White-text-on-accent BACKGROUNDS want the opposite (a dark bg), so those are
   pinned to a fixed deep magenta below rather than following the token.
   ========================================================================== */
html[data-mode="pro"][data-theme="light"] { --accent: #C4126E !important; }
html[data-mode="pro"][data-theme="dark"]  { --accent: #FF5CAD !important; }

/* --- 1.4.3 · Accent BACKGROUND + white text (all modes) ------------------
   Buttons/badges on var(--accent) with white text (skip-link, press-year,
   edu-highlight, newsletter-cta, speaking + availability + demo-banner CTAs,
   and any inline `background: var(--accent)` link). White on #FF1493/#F4A7C3/
   #FF5CAD fails (1.88–3.63); pin to a deep magenta that carries white 6.7:1. */
.skip-link,
html a[style*="background: var(--accent)"],
html a[style*="background:var(--accent)"],
[data-mode] .press-year,
[data-mode] .edu-highlight,
[data-mode] .newsletter-cta,
[data-mode] .cta-speaking,
[data-mode] .availability-cta a,
[data-mode] .speak-cta,
[data-mode] .shelf-demo-banner .banner-btn {
    background: #B0126B !important;
    color: #ffffff !important;
}

/* --- 1.4.3 · Footer column headings (all four combos, ~240 nodes) ---------
   opacity:.65 on the already-muted --text-2 dropped every combo to 2.65–4.15.
   Full opacity clears 4.5:1 everywhere; headings still read as secondary. */
[data-mode] .footer-col h2 { opacity: 1; }

/* --- 1.4.3 · "Active" project badge (green) ------------------------------
   White on #10B981 → 2.54:1. Darker solid green keeps "active = green"; 5.1:1. */
[data-mode] .active-badge {
    background: #0A7D5A !important;
    color: #ffffff !important;
}

/* --- 1.4.3 · Project card company label (pro, muted grey) ----------------
   Also carries opacity:0.8 that diluted the colour below the line — pin to 1. */
[data-mode] .project-company { opacity: 1 !important; }
html[data-mode="pro"][data-theme="light"] .project-company { color: #6E6E6A !important; }
html[data-mode="pro"][data-theme="dark"]  .project-company { color: #9C9C94 !important; }

/* ==========================================================================
   Achievement bento (1.4.3)
   Category tints on .ach-link-label / .ach-name (inherited from the coloured
   tile) sat 3.9–4.4:1. The tile background + icon keep the colour-coding; the
   small label/name text is unified to one accessible ink per combo. Documented
   tradeoff in FINDINGS.md.
   ========================================================================== */
/* .ach-link-label also carries opacity:0.75 that diluted the ink — pin to 1. */
[data-mode] .ach-link-label { opacity: 1 !important; }
html[data-mode="gremlin"][data-theme="light"] .ach-link-label,
html[data-mode="gremlin"][data-theme="light"] .ach-section-label,
html[data-mode="gremlin"][data-theme="light"] .ach-name,
html[data-mode="gremlin"][data-theme="light"] .ach-name span { color: #4A3560 !important; }
html[data-mode="gremlin"][data-theme="dark"] .ach-link-label,
html[data-mode="gremlin"][data-theme="dark"] .ach-section-label { color: #E0B7D6 !important; }
html[data-mode="pro"][data-theme="light"] .ach-link-label { color: #C4126E !important; }
html[data-mode="pro"][data-theme="dark"]  .ach-link-label { color: #FF5CAD !important; }

/* --- 1.4.3 · Press link labels (accent, opacity-diluted 3.2–3.3) --------- */
[data-mode] .press-link { opacity: 1 !important; }
html[data-mode="gremlin"][data-theme="light"] .press-link { color: #9C2D63 !important; }
html[data-mode="pro"][data-theme="light"] .press-link { color: #C4126E !important; }
html[data-mode="pro"][data-theme="dark"]  .press-link { color: #FF5CAD !important; }

/* --- 1.4.3 · Skill Sky chips (gremlin) -----------------------------------
   pink/blue/lavender chips carried white text on a pastel fill (1.88–2.09);
   mint/peach already use dark ink. Unify every chip to dark ink — the pastels
   (the palette) stay, only the text darkens to clear 4.5:1 on all five. */
[data-mode="gremlin"] .skill-tag { color: #2D1B33 !important; }

/* --- 1.4.3 · Education flip-cards (gremlin, brand-coloured faces) ---------
   Dartmouth green (#005A33) / CMU red (#A60F28) card faces carried muted or
   accent-coloured hint text/links at 1.08–4.07. Light ink clears both faces
   (7.7:1 / 6:1). Scoped to gremlin, where the faces are brand-dark. */
[data-mode="gremlin"] .edu-card-front .flip-hint,
[data-mode="gremlin"] .edu-card-front .flip-hint span,
[data-mode="gremlin"] .edu-card-front a { color: #F2F2EE !important; opacity: 1 !important; }

/* ==========================================================================
   Display titles (1.4.3, large-text 3:1)
   ========================================================================== */

/* Gremlin-light .page-title: pale fill under a 4px WHITE stroke on a pale bg
   read ~1.1:1 (axe measures the stroke). Drop the stroke, fill with the
   gremlin-light ink #9C2D63 (5.0:1) — a solid, legible deep-pink title. */
html[data-mode="gremlin"][data-theme="light"] .page-title,
html[data-mode="gremlin"][data-theme="light"] .page-title span {
    color: #9C2D63 !important;
    -webkit-text-stroke-width: 0 !important;
}

/* Deep-dive hero <h1> (case-studies/talks) is a bare h1 — gremlin-light left it
   pale blue (#89C4E1) on a pale bg. Ink it and drop any stroke. */
html[data-mode="gremlin"][data-theme="light"] [data-cs-detail] .hero h1,
html[data-mode="gremlin"][data-theme="light"] [data-cs-detail] .hero h1 span {
    color: #4A3560 !important;
    -webkit-text-stroke-width: 0 !important;
}

/* ==========================================================================
   GREMLIN MODE · misc
   ========================================================================== */

/* Testimonial "relationship" label — white on lavender chip → 2.09:1. */
html[data-mode="gremlin"] .author-relationship { color: #3A2352 !important; }

/* Maker gallery captions — undefined var(--text-dim)/unthemed → re-theme. */
[data-mode] .gallery-title { color: var(--text) !important; }
[data-mode] .gallery-description,
[data-mode] .gallery-description span { color: var(--text-2) !important; }

/* Shelf (toolshed) faint lavender labels → 1.2–1.4:1. */
html[data-mode="gremlin"][data-theme="light"] .hat-shelf-section-label,
html[data-mode="gremlin"][data-theme="light"] .hat-panel-empty { color: #5E4278 !important; }
html[data-mode="gremlin"][data-theme="dark"] .hat-shelf-section-label { color: #C4A8E0 !important; }