/* Acme Intelligence themes (package A).
   Load AFTER style.css. Contract: spec §2.3 / §11.1. Colour tokens are plain hex or rgba so
   dev/theme-lab.html can check them. Adding a theme: spec §2.12 (themes.css, ACME_THEMES, boot snippet). */

/* 1. Fonts: self-hosted latin subsets (SIL OFL, see fonts/OFL.txt) plus size-adjusted fallbacks */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400 650;
  font-display: swap;
  src: url("fonts/fraunces-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  /* the shipped metrics (1.02 + 0.40 em) sit caps low and make SVG label boxes overlap; this centres caps */
  ascent-override: 94%;
  descent-override: 28%;
  line-gap-override: 0%;
  src: url("fonts/source-sans-3-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Tuned 2026-10-12 with the dev/theme-lab.html overlay: line breaks match the web fonts for the hero H1 at
   375px and 1280px, an H2, prose and body copy (11 of 11 frames); the line box and baseline match exactly. */
@font-face { font-family: "Fraunces Fallback"; src: local("Georgia"); size-adjust: 105%; ascent-override: 93.3%; descent-override: 24.8%; line-gap-override: 0%; }
@font-face { font-family: "Source Sans Fallback"; src: local("Arial"), local("ArialMT"); size-adjust: 93%; ascent-override: 101.1%; descent-override: 30.1%; line-gap-override: 0%; }

/* 2. Shared non-colour tokens and legacy aliases (charts.js, sector.js and the sector pages read these) */
:root, [data-theme] {
  --page: var(--paper); --border: var(--rule); --band: var(--band-2);
  --good: var(--st-verified); --good-text: var(--st-verified); --warning: var(--st-likely);
  --font: var(--font-text);
  --font-text: "Source Sans 3", "Source Sans Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --radius-pill: 999px;
}

/* 3. Paper: default, and the no-JS light fallback */
:root:not([data-theme]), [data-theme="paper"] {
  color-scheme: light;
  --paper: #F5F0E6; --surface: #FBF8F1; --surface-2: #EDE6D8; --raised: #FDFCF8;
  --ink: #26231E; --ink-2: #4D4840; --muted: #6B6459;
  --rule: #DDDAD3; --grid: #EAE7E0; --axis: #857D70; --rule-w: 1px;
  --accent: #1F5A57; --accent-ink: #FFFFFF; --accent-wash: #DFE7E3; --highlight: #F6DE85; --focus: #1F5A57;
  --glow-1: rgba(246,222,133,.38); --glow-2: rgba(31,90,87,.10);
  --motif: repeating-linear-gradient(to bottom, transparent 0 27px, var(--rule) 27px 28px);
  --grain: .05; --grain-invert: 0;
  --shadow-pop: 0 18px 40px -16px rgba(38,35,30,.28);
  --series-1: #2B5C9E; --series-2: #11846D; --pos: #2B5C9E; --neg: #C95B0A; --critical: #A3342A;
  --band-1: rgba(43,92,158,.30); --band-2: rgba(43,92,158,.17); --band-3: rgba(43,92,158,.08); --ensemble: rgba(43,92,158,.16);
  --seq-lo: #E4ECF6; --seq-hi: #1D3F6E; --seq-ink-hi: #FFFFFF;
  --st-verified: #2E7D4F; --st-likely: #A86B12; --st-hypothesis: #6B6459; --st-ruled: #6B6459; --st-needs: #6B6459;
  --tag-verified-bg: #DCEDDF; --tag-likely-bg: #F6E5C1; --tag-hyp-bg: #E6DFD2; --tag-ruled-bg: #E6DFD2; --tag-needs-bg: transparent;
  --radius-s: 4px; --radius-m: 8px; --radius-l: 14px;
  --font-display: "Fraunces", "Fraunces Fallback", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --display-wght: 560; --display-soft: 40;
}

/* 4. Sage, Ink, Dusk, High contrast */
[data-theme="sage"] {
  color-scheme: light;
  --paper: #EEF1EA; --surface: #F7F9F4; --surface-2: #E2E8DC; --raised: #FBFCFA;
  --ink: #1E2620; --ink-2: #44504A; --muted: #5C6860;
  --rule: #D5DBD2; --grid: #E3E8DF; --axis: #76827A; --rule-w: 1px;
  --accent: #6E3C5C; --accent-ink: #FFFFFF; --accent-wash: #EADFE5; --highlight: #E4E59A; --focus: #6E3C5C;
  --glow-1: rgba(228,229,154,.35); --glow-2: rgba(110,60,92,.07);
  --motif: radial-gradient(var(--rule) 1px, transparent 1.2px) 0 0/16px 16px;
  --grain: .04; --grain-invert: 0;
  --shadow-pop: 0 18px 40px -16px rgba(30,38,32,.24);
  --series-1: #2D5F9A; --series-2: #11846D; --pos: #2D5F9A; --neg: #B85A10; --critical: #A1352B;
  --band-1: rgba(45,95,154,.30); --band-2: rgba(45,95,154,.17); --band-3: rgba(45,95,154,.08); --ensemble: rgba(45,95,154,.16);
  --seq-lo: #E3EBF2; --seq-hi: #1E426B; --seq-ink-hi: #FFFFFF;
  --st-verified: #2F7A4C; --st-likely: #9C6A10; --st-hypothesis: #5C6860; --st-ruled: #5C6860; --st-needs: #5C6860;
  --tag-verified-bg: #D7EBDB; --tag-likely-bg: #F1E6C4; --tag-hyp-bg: #DDE3D8; --tag-ruled-bg: #DDE3D8; --tag-needs-bg: transparent;
  --radius-s: 6px; --radius-m: 10px; --radius-l: 16px;
  --font-display: "Fraunces", "Fraunces Fallback", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --display-wght: 460; --display-soft: 30;
}

[data-theme="ink"] {
  color-scheme: dark;
  --paper: #0F1218; --surface: #161A22; --surface-2: #1E232D; --raised: #272C35;
  --ink: #EDE9E1; --ink-2: #C2BDB2; --muted: #9A958C;
  --rule: #383B41; --grid: #292D33; --axis: #6D7482; --rule-w: 1px;
  --accent: #F5DDAA; --accent-ink: #1A1408; --accent-wash: #2E2B24; --highlight: #5A4520; --focus: #F5DDAA;
  --glow-1: rgba(245,221,170,.08); --glow-2: rgba(91,149,224,.10);
  --motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' fill='none' stroke='%23F5DDAA' stroke-opacity='.08' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 14l5 5 11-12' transform='rotate(-8 22 13)'/%3E%3Cpath d='M74 74l5 5 11-12' transform='rotate(8 82 73)'/%3E%3C/svg%3E") 0 0/120px 120px;
  --grain: .06; --grain-invert: 1;
  --shadow-pop: 0 18px 48px -12px rgba(0,0,0,.6);
  --series-1: #5B95E0; --series-2: #2BA287; --pos: #5B95E0; --neg: #D56A10; --critical: #F08A7E;
  --band-1: rgba(91,149,224,.36); --band-2: rgba(91,149,224,.21); --band-3: rgba(91,149,224,.10); --ensemble: rgba(91,149,224,.22);
  --seq-lo: #1C2636; --seq-hi: #A9CBF5; --seq-ink-hi: #0F1218;
  --st-verified: #4CC38A; --st-likely: #E3A93B; --st-hypothesis: #9A958C; --st-ruled: #9A958C; --st-needs: #9A958C;
  --tag-verified-bg: #173322; --tag-likely-bg: #3A2D12; --tag-hyp-bg: #272C36; --tag-ruled-bg: #272C36; --tag-needs-bg: transparent;
  --radius-s: 3px; --radius-m: 6px; --radius-l: 10px;
  --font-display: "Fraunces", "Fraunces Fallback", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --display-wght: 520; --display-soft: 0;
}

[data-theme="dusk"] {
  color-scheme: dark;
  --paper: #1B1512; --surface: #241C18; --surface-2: #2E2420; --raised: #362D29;
  --ink: #F3E9DF; --ink-2: #D0C2B5; --muted: #A69587;
  --rule: #453D38; --grid: #372E2A; --axis: #8A7A6E; --rule-w: 1px;
  --accent: #F0C2CF; --accent-ink: #2A1419; --accent-wash: #3D2B30; --highlight: #5C3A28; --focus: #F0C2CF;
  --glow-1: rgba(240,194,207,.12); --glow-2: rgba(213,106,16,.08);
  --motif: linear-gradient(var(--rule), var(--rule)) left bottom/100% 1px no-repeat, linear-gradient(to top, var(--glow-1), transparent 120px);
  --grain: .07; --grain-invert: 1;
  --shadow-pop: 0 18px 48px -12px rgba(0,0,0,.55);
  --series-1: #4F8FD9; --series-2: #27A28A; --pos: #4F8FD9; --neg: #D56A10; --critical: #FF8C94;
  --band-1: rgba(79,143,217,.36); --band-2: rgba(79,143,217,.21); --band-3: rgba(79,143,217,.10); --ensemble: rgba(79,143,217,.22);
  --seq-lo: #232D3A; --seq-hi: #A8CDEB; --seq-ink-hi: #1B1512;
  --st-verified: #7BC98F; --st-likely: #E9B65A; --st-hypothesis: #A69587; --st-ruled: #A69587; --st-needs: #A69587;
  --tag-verified-bg: #203424; --tag-likely-bg: #3F2F17; --tag-hyp-bg: #352A25; --tag-ruled-bg: #352A25; --tag-needs-bg: transparent;
  --radius-s: 6px; --radius-m: 12px; --radius-l: 18px;
  --font-display: "Fraunces", "Fraunces Fallback", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --display-wght: 480; --display-soft: 60;
}

[data-theme="contrast"] {
  color-scheme: light;
  --paper: #FFFFFF; --surface: #FFFFFF; --surface-2: #F0F0F0; --raised: #FFFFFF;
  --ink: #000000; --ink-2: #1F1F1F; --muted: #3D3D3D;
  --rule: #6E6E6E; --grid: #C7C7C7; --axis: #000000; --rule-w: 2px;
  --accent: #000000; --accent-ink: #FFFFFF; --accent-wash: #EDEDED; --highlight: #FFE34D; --focus: #000000;
  --glow-1: transparent; --glow-2: transparent;
  --motif: none;
  --grain: 0; --grain-invert: 0;
  --shadow-pop: 0 0 0 2px #000;
  --series-1: #0B5CAD; --series-2: #068665; --pos: #0B5CAD; --neg: #BD4C07; --critical: #A30000;
  --band-1: rgba(11,92,173,.30); --band-2: rgba(11,92,173,.17); --band-3: rgba(11,92,173,.08); --ensemble: rgba(11,92,173,.16);
  --seq-lo: #DCE8F7; --seq-hi: #08306B; --seq-ink-hi: #FFFFFF;
  --st-verified: #006B2E; --st-likely: #7A4F00; --st-hypothesis: #3D3D3D; --st-ruled: #3D3D3D; --st-needs: #3D3D3D;
  --tag-verified-bg: #D6F0DE; --tag-likely-bg: #FBE8C0; --tag-hyp-bg: #E6E6E6; --tag-ruled-bg: #E6E6E6; --tag-needs-bg: transparent;
  --radius-s: 2px; --radius-m: 4px; --radius-l: 6px;
  --font-display: var(--font-text);
  --display-wght: 700; --display-soft: 0;
}

/* 5. No-JS dark fallback. Must stay a byte-identical copy of the [data-theme="ink"] block
      (tokens inside @media cannot share a selector list with those outside it). theme-lab diffs them. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
  color-scheme: dark;
  --paper: #0F1218; --surface: #161A22; --surface-2: #1E232D; --raised: #272C35;
  --ink: #EDE9E1; --ink-2: #C2BDB2; --muted: #9A958C;
  --rule: #383B41; --grid: #292D33; --axis: #6D7482; --rule-w: 1px;
  --accent: #F5DDAA; --accent-ink: #1A1408; --accent-wash: #2E2B24; --highlight: #5A4520; --focus: #F5DDAA;
  --glow-1: rgba(245,221,170,.08); --glow-2: rgba(91,149,224,.10);
  --motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' fill='none' stroke='%23F5DDAA' stroke-opacity='.08' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 14l5 5 11-12' transform='rotate(-8 22 13)'/%3E%3Cpath d='M74 74l5 5 11-12' transform='rotate(8 82 73)'/%3E%3C/svg%3E") 0 0/120px 120px;
  --grain: .06; --grain-invert: 1;
  --shadow-pop: 0 18px 48px -12px rgba(0,0,0,.6);
  --series-1: #5B95E0; --series-2: #2BA287; --pos: #5B95E0; --neg: #D56A10; --critical: #F08A7E;
  --band-1: rgba(91,149,224,.36); --band-2: rgba(91,149,224,.21); --band-3: rgba(91,149,224,.10); --ensemble: rgba(91,149,224,.22);
  --seq-lo: #1C2636; --seq-hi: #A9CBF5; --seq-ink-hi: #0F1218;
  --st-verified: #4CC38A; --st-likely: #E3A93B; --st-hypothesis: #9A958C; --st-ruled: #9A958C; --st-needs: #9A958C;
  --tag-verified-bg: #173322; --tag-likely-bg: #3A2D12; --tag-hyp-bg: #272C36; --tag-ruled-bg: #272C36; --tag-needs-bg: transparent;
  --radius-s: 3px; --radius-m: 6px; --radius-l: 10px;
  --font-display: "Fraunces", "Fraunces Fallback", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --display-wght: 520; --display-soft: 0;
  }
}

/* 6. Motif refinements and High-contrast extras */
@supports (color: color-mix(in oklab, red, blue)) {
  [data-theme="dusk"] {
    --motif: linear-gradient(var(--rule), var(--rule)) left bottom/100% 1px no-repeat, linear-gradient(to top, color-mix(in oklab, var(--accent) 14%, transparent), transparent 120px);
  }
}
[data-theme="contrast"] a:not(.btn):not(.chip):not(.brand):not(.skip) { text-decoration-line: underline; }
[data-theme="contrast"] .tag { border: 1px solid var(--ink); }
[data-theme="contrast"] .tag.needs { border-style: dashed; }
[data-theme="contrast"] :focus-visible, [data-theme="contrast"]:focus-visible { outline-width: 3px; }
[data-theme="contrast"] .motif::before, [data-theme="contrast"] body::before { display: none; }

/* 7. Forced colours: hatches, outlines, glyphs and words keep status and polarity readable */
@media (forced-colors: active) {
  :root, [data-theme] {
    --neg: CanvasText; --pos: LinkText; --series-1: LinkText; --series-2: GrayText;
    --band-1: transparent; --band-2: transparent; --band-3: transparent; --ensemble: GrayText;
    --rule: CanvasText; --grid: CanvasText; --axis: CanvasText;
    --st-verified: CanvasText; --st-likely: CanvasText; --st-hypothesis: CanvasText; --st-ruled: CanvasText; --st-needs: CanvasText;
    --focus: Highlight;
  }
  .tag { border: 1px solid CanvasText; }
  .tag::before { forced-color-adjust: none; background: CanvasText; }
  body::before { display: none; }
}

/* 8. View Transition for the theme reveal: the clip-path animation is driven from theme.js */
html.vt-theme::view-transition-old(root),
html.vt-theme::view-transition-new(root) { animation: none; mix-blend-mode: normal; }