/* Per-table themes for the v3 system. Palettes are sampled from each table's own artwork,
   then verified against WCAG 2.1/2.2 Level AA:
     text            1.4.3  — 4.5:1 (normal), 3:1 (large: >=24px, or >=18.66px bold)
     UI components   1.4.11 — 3:1 for the border that identifies an interactive control
     focus indicator 1.4.11 + 2.4.11/2.4.13 — 3:1 against the adjacent ground
   --line   = decorative hairline (dividers only, no state information)
   --line-ui = interactive boundary (buttons, pills, cards, menu triggers) — always >=3:1
   Measured ratios are in DESIGN-NOTES.md. */

/* Scared Stiff — hero violet blacks, Bally playfield blood red, aged bone */
body.scared{--bg:#0b0614;--paper:#150d22;--ink:#efe6d4;--muted:#a1949f;--line:#2c2136;--line-ui:#72558b;--accent:#d21810;--accent-ink:#ff6b5e;--bone:#c9ab82}

/* Batman '66 — Batcave midnight blue, 1960s comic yellow, cadmium red */
body.batman{--bg:#080d1c;--paper:#111a2f;--ink:#f3ecdc;--muted:#96a1b8;--line:#22304d;--line-ui:#4866a3;--accent:#d8232a;--accent-ink:#ffc832;--bone:#c8b48a}
body.batman.guide-v3 .kicker .scene{color:var(--accent-ink)}
body.batman.guide-v3 .button,body.batman.guide-v3 .opening.cinematic .button{background:var(--accent-ink);color:#141005}
body.batman.guide-v3 .button:hover{opacity:.85}
body.batman.guide-v3 .strategy-table th{color:var(--muted);border-bottom-color:var(--ink)}

/* Technique School — graphite ground, single signal green */
body.techniques-v3{--bg:#0c0e0d;--paper:#14181a;--ink:#eef0ea;--muted:#9aa19c;--line:#262c2c;--line-ui:#596767;--accent:#1b8749;--accent-ink:#5ede97;--bone:#b9bfae}

/* Interactive boundaries use --line-ui so every control clears 3:1 (SC 1.4.11). */
.guide-v3 .act-map a,.guide-v3 .act-toc a,.guide-v3 .quiz button,.guide-v3 .quiz-again,
.guide-v3 button[data-reset],.guide-v3 .quiz,
.guide-v3 header.compact-library-nav .all-tables>summary,
.techniques-v3 .route-grid a,.techniques-v3 #lesson-links a,
.techniques-v3 .source-speed,.techniques-v3 .button.ghost,
.techniques-v3 header.compact-library-nav .all-tables>summary{border-color:var(--line-ui)}
.guide-v3 .act-map{border-top-color:var(--line-ui)}
.techniques-v3 .route-grid{border-top-color:var(--line-ui)}
.guide-v3 .tale-list,.techniques-v3 details.all-lessons,.techniques-v3 .demo-details{border-color:var(--line-ui)}

/* Focus visibility: a 3:1 ring plus a dark halo so it reads on art and on panels (2.4.11/2.4.13). */
.guide-v3 a:focus-visible,.guide-v3 button:focus-visible,.guide-v3 summary:focus-visible,
.techniques-v3 a:focus-visible,.techniques-v3 button:focus-visible,.techniques-v3 summary:focus-visible{
  outline:3px solid var(--accent-ink);outline-offset:3px;box-shadow:0 0 0 6px var(--bg);border-radius:4px}

/* current-page + hover state in the table menu: dark ink on the accent fill needs 4.5:1 */
.guide-v3 header.compact-library-nav .all-tables-panel a:hover,
.guide-v3 header.compact-library-nav .all-tables-panel a:focus-visible,
.guide-v3 header.compact-library-nav .all-tables-panel a[aria-current=page],
.techniques-v3 header.compact-library-nav .all-tables-panel a:hover,
.techniques-v3 header.compact-library-nav .all-tables-panel a:focus-visible,
.techniques-v3 header.compact-library-nav .all-tables-panel a[aria-current=page]{
  background:var(--accent-ink);color:var(--bg)}

/* ---- Rollout palettes. Sampled from each table's own hero artwork (circular-mean
   ground hue, accent chosen from the most chromatic band at least 0.09 away from it),
   then every token solved to its WCAG target rather than chosen by eye. ---- */

/* Medieval Madness — sampled from medieval-madness-hero-v1.png */
body.medieval{--bg:#140908;--paper:#251310;--ink:#d5c9c7;--muted:#977b78;--line:#3d2421;--line-ui:#995248;--accent:#5a2db4;--accent-ink:#936be3;--bone:#558a91}

/* Lord of the Rings — sampled from lord-of-the-rings-hero-v1.png */
body.lotr{--bg:#141208;--paper:#252210;--ink:#d2d0c3;--muted:#908b6f;--line:#3d3921;--line-ui:#796e39;--accent:#b84429;--accent-ink:#e16446;--bone:#7f88b4}

/* Elvira Party Monsters — sampled from elvira-party-monsters-hero-v1.png */
body.elvira{--bg:#14080b;--paper:#251016;--ink:#d5c7cb;--muted:#987981;--line:#3d2129;--line-ui:#9f4b62;--accent:#bc5424;--accent-ink:#e36831;--bone:#528c7c}

/* Guardians of the Galaxy — sampled from guardians-galaxy-holly-hero-v1.png */
body.guardians{--bg:#080914;--paper:#101225;--ink:#c8c9d5;--muted:#7b7d9a;--line:#21233d;--line-ui:#555caf;--accent:#c56f1b;--accent-ink:#ec8828;--bone:#85814e}
/* white on this accent measures 3.71:1, so buttons take dark ink on --accent-ink (7.35:1), the same escape Batman uses. */
body.guardians.guide-v3 .button,body.guardians.guide-v3 .opening.cinematic .button{background:var(--accent-ink);color:#141005}
body.guardians.guide-v3 .button:hover{opacity:.85}

/* Pirates of the Caribbean — sampled from pirates-stern-2006-holly-hero-v1.png */
body.pirates{--bg:#081414;--paper:#102525;--ink:#c4d2d3;--muted:#708f91;--line:#213c3d;--line-ui:#397779;--accent:#bd8223;--accent-ink:#e39f30;--bone:#b17d7a}
/* white on this accent measures 3.28:1, so buttons take dark ink on --accent-ink (8.39:1), the same escape Batman uses. */
body.pirates.guide-v3 .button,body.pirates.guide-v3 .opening.cinematic .button{background:var(--accent-ink);color:#141005}
body.pirates.guide-v3 .button:hover{opacity:.85}

/* ---- Top-ten guide palettes, sampled the same way and solved to the same targets.
     These pages key on the theme-* class they already carry. ---- */

/* Austin Powers — sampled from austin-powers-hero-v2.png */
body.theme-austin-powers{--bg:#130814;--paper:#231025;--ink:#d3c7d5;--muted:#947897;--line:#3a213d;--line-ui:#92499b;--accent:#ca166e;--accent-ink:#f1278a;--bone:#5a8e53}

/* Beatles 007 — sampled from beatles-007-hero-v2.png */
body.theme-beatles-007{--bg:#080c14;--paper:#101725;--ink:#c6cbd4;--muted:#788197;--line:#212a3d;--line-ui:#4b659f;--accent:#d3980d;--accent-ink:#f6b51e;--bone:#927f56}
/* white on this accent is 2.54:1, so the button takes dark ink on --accent-ink (10.46:1) */
body.theme-beatles-007.topten-v3 .button{background:var(--accent-ink);color:#141005}

/* Cuphead — sampled from cuphead-perdition-hero-v2.png */
body.theme-cuphead-perdition{--bg:#14080b;--paper:#251016;--ink:#d5c7cb;--muted:#987982;--line:#3d2129;--line-ui:#9f4b63;--accent:#b46f2d;--accent-ink:#d9893a;--bone:#528c7b}
/* white on this accent is 4.0:1, so the button takes dark ink on --accent-ink (6.85:1) */
body.theme-cuphead-perdition.topten-v3 .button{background:var(--accent-ink);color:#141005}

/* Simpsons Pinball Party — sampled from simpsons-pinball-party-hero-v2.png */
body.theme-simpsons-pinball-party{--bg:#140b08;--paper:#251510;--ink:#d4cac6;--muted:#967e76;--line:#3d2821;--line-ui:#935845;--accent:#0d85d3;--accent-ink:#1ea1f6;--bone:#5a8a99}
/* white on this accent is 3.94:1, so the button takes dark ink on --accent-ink (6.75:1) */
body.theme-simpsons-pinball-party.topten-v3 .button{background:var(--accent-ink);color:#141005}

/* SpongeBob — sampled from spongebob-bikini-bottom-hero-v2.png */
body.theme-spongebob-bikini-bottom{--bg:#080c14;--paper:#101825;--ink:#c6cbd4;--muted:#778296;--line:#212b3d;--line-ui:#49679b;--accent:#c5711b;--accent-ink:#ec8a27;--bone:#957f57}
/* white on this accent is 3.66:1, so the button takes dark ink on --accent-ink (7.46:1) */
body.theme-spongebob-bikini-bottom.topten-v3 .button{background:var(--accent-ink);color:#141005}

/* Stranger Things — sampled from stranger-things-original-2020-hero-v2.png */
body.theme-stranger-things-original-2020{--bg:#090814;--paper:#121025;--ink:#c9c8d5;--muted:#7e7b9a;--line:#24213d;--line-ui:#6158b0;--accent:#c51b20;--accent-ink:#ed373c;--bone:#7d834d}

/* TOTAN — sampled from tales-of-the-arabian-nights-hero-v2.png */
body.theme-tales-of-the-arabian-nights{--bg:#080814;--paper:#101025;--ink:#c8c8d5;--muted:#7c7c9a;--line:#21213d;--line-ui:#595ab1;--accent:#c06f21;--accent-ink:#e6882d;--bone:#82814c}
/* white on this accent is 3.8:1, so the button takes dark ink on --accent-ink (7.19:1) */
body.theme-tales-of-the-arabian-nights.topten-v3 .button{background:var(--accent-ink);color:#141005}

/* Per-image hero focal points. These are visual decisions for the current art,
   not a shared "upper third" or centered-crop rule. */
body.addams .opening.cinematic .art{object-position:26% 30%}
body.batman .opening.cinematic .art{object-position:50% 56%}
body.blood-machines .opening.cinematic .art{object-position:50% 18%}
body.creature .opening.cinematic .art{object-position:50% 36%}
body.elvira .opening.cinematic .art{object-position:50% 27%}
body.funhouse .opening.cinematic .art{object-position:50% 50%}
body.guardians .opening.cinematic .art{object-position:50% 50%}
body.lotr .opening.cinematic .art{object-position:50% 50%}
body.medieval .opening.cinematic .art{object-position:50% 50%}
body.pirates .opening.cinematic .art{object-position:50% 44%}
body.theatre .opening.cinematic .art{object-position:0 18%}
body.tna .opening.cinematic .art{object-position:50% 50%}
body.twilight-zone .opening.cinematic .art{object-position:50% 50%}
body.theme-austin-powers .guide-hero .hero-art img{object-position:50% 50%}
body.theme-beatles-007 .guide-hero .hero-art img{object-position:50% 50%}
body.theme-cuphead-perdition .guide-hero .hero-art img{object-position:50% 50%}
body.theme-simpsons-pinball-party .guide-hero .hero-art img{object-position:50% 50%}
body.theme-spongebob-bikini-bottom .guide-hero .hero-art img{object-position:50% 50%}
body.theme-stranger-things-original-2020 .guide-hero .hero-art img{object-position:50% 50%}
body.theme-tales-of-the-arabian-nights .guide-hero .hero-art img{object-position:50% 50%}

@media(max-width:640px){
  body.addams .opening.cinematic .art{object-position:20% 30%}
  body.batman .opening.cinematic .art{object-position:50% 56%}
  body.blood-machines .opening.cinematic .art{object-position:48% 18%}
  body.creature .opening.cinematic .art{object-position:35% 36%}
  body.elvira .opening.cinematic .art{object-position:50% 27%}
  body.funhouse .opening.cinematic .art{object-position:75% 50%}
  body.guardians .opening.cinematic .art{object-position:62% 50%}
  body.lotr .opening.cinematic .art{object-position:54% 50%}
  body.medieval .opening.cinematic .art{object-position:72% 50%}
  body.pirates .opening.cinematic .art{object-position:58% 44%}
  body.theatre .opening.cinematic .art{object-position:0 18%}
  body.tna .opening.cinematic .art{object-position:50% 50%}
  body.twilight-zone .opening.cinematic .art{object-position:40% 50%}
  body.theme-austin-powers .guide-hero .hero-art img{object-position:52% 50%}
  body.theme-beatles-007 .guide-hero .hero-art img{object-position:50% 50%}
  body.theme-cuphead-perdition .guide-hero .hero-art img{object-position:50% 50%}
  body.theme-simpsons-pinball-party .guide-hero .hero-art img{object-position:56% 50%}
  body.theme-spongebob-bikini-bottom .guide-hero .hero-art img{object-position:54% 50%}
  body.theme-stranger-things-original-2020 .guide-hero .hero-art img{object-position:54% 50%}
  body.theme-tales-of-the-arabian-nights .guide-hero .hero-art img{object-position:58% 50%}
}