/* SynSapien theme — dark by default, with a true light mode (2026-09-27).
 *
 * Source of truth: the Claude Design handoff "SynSapien theme modes" (design_handoff_theme_modes/reference/
 * theme-modes.css), implemented as given. Dark is :root, so no-JS and first paint are dark; the inline pre-paint script
 * at the top of each page sets <html data-theme="light"> only when the reader chose it (localStorage "ss-theme"); the
 * system colour-scheme preference does not override. Light mode is light top to bottom: .theatre / .theatre-band stay
 * in the markup for layout but no longer re-declare tokens. One accent hue (Signal Blue) in both modes; amber is
 * caution only; the logo is SYN = text, SAPIEN + mark = accent, everywhere. The Finland edition uses the same palette.
 */
@font-face{
  font-family:"Synsapien Sans";
  src:url("/fonts/SynsapienSans-VF.woff2") format("woff2-variations");
  font-weight:200 900; font-style:normal; font-display:swap;
}
:root{
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
  --sans:"Synsapien Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

/* ── DARK (default) · refined Deep Signal ─────────────────────────────────────────────────────────────── */
:root,[data-theme="dark"]{
  color-scheme:dark;
  --ds:#0B0F1A;   --ds-rgb:11,15,26;          /* ground */
  --ds2:#0E1524;                              /* sunk ground */
  --card:#111A2E; --card-rgb:17,26,46;        /* card */
  --line:#1E2B45; --line-strong:#2E4066;      /* hairlines */
  --ice:#EDEBF7;                              /* primary text */
  --muted:#93A1BD;                            /* secondary text */
  --dim:#5B6C8A;                              /* placeholders & decoration ONLY */
  --cyan:#37A9E6; --cyan-rgb:55,169,230;      /* Signal Blue: fills, borders, focus, the mark */
  --cyan-text:#37A9E6;                        /* passes as small text on ground, sunk, card and its wash */
  --cyan-deep:#64BCEC;                        /* hover / pressed: brightens on dark */
  --cyan-bg:#162E48;                          /* accent wash (solid) */
  --cyan-hover-line:#37A9E6;
  --on-accent:#0B0F1A;                        /* text on an accent fill */
  --amber:#E3BC74; --amber-rgb:227,188,116;   /* caution ONLY: text-safe tone */
  --amber-fill:#E3BC74; --amber-bg:#2E3138;
  --scrim:rgba(5,8,14,.72);
  --shadow:none;                              /* cards are defined by their line on dark */
  --shadow-pop:0 16px 40px rgba(0,0,0,.55),0 0 0 1px var(--line-strong);
  /* evidence status: fill/marker · text-safe · wash */
  --est:#2BB88C;   --est-text:#2BB88C;   --est-bg:#15303B;     /* established / for */
  --con:#CD5518;   --con-text:#E56523;   --con-bg:#2B222B;     /* contested / against */
  --emerg:#5B6C8A; --emerg-text:#93A1BD; --emerg-bg:#151F33;   /* emerging / neutral */
  --tried:#3FB5BB; --tried-text:#3FB5BB; --tried-bg:#173042;   /* tried in practice */
  --caution:#E3BC74; --caution-text:#E3BC74; --caution-bg:#2E3138;  /* established · minority dissent */
  /* problem wall + ambient art */
  --tick:#7D8AA4;                             /* wall facts: dimmer than --muted, still ≥4.5:1 */
  --art-fill:#37A9E6; --art-line:#7FC4EE; --art-ground:#0B0F1A; --art-opacity:.10;
}

/* ── LIGHT (reader's choice) · warm paper ─────────────────────────────────────────────────────────────── */
[data-theme="light"]{
  color-scheme:light;
  --ds:#F7F5F0;   --ds-rgb:247,245,240;
  --ds2:#EFEAE0;
  --card:#FFFFFF; --card-rgb:255,255,255;
  --line:#E4DDCE; --line-strong:#D3CBB8;
  --ice:#0E1B2A;
  --muted:#4C5A6A;
  --dim:#8B93A0;
  --cyan:#0072B2; --cyan-rgb:0,114,178;
  --cyan-text:#006DAB;
  --cyan-deep:#00588C;                        /* hover / pressed: deepens on light */
  --cyan-bg:#E0EEF6;
  --cyan-hover-line:#B8DAEE;
  --on-accent:#FFFFFF;
  --amber:#886200; --amber-rgb:184,132,0;
  --amber-fill:#B88400; --amber-bg:#FCF4E0;
  --scrim:rgba(14,27,42,.40);
  --shadow:0 1px 2px rgba(14,27,42,.06),0 1px 3px rgba(14,27,42,.08);
  --shadow-pop:0 12px 32px rgba(14,27,42,.16),0 0 0 1px var(--line);
  --est:#009E73;   --est-text:#007857;   --est-bg:#E0F3EE;
  --con:#C24E00;   --con-text:#B34800;   --con-bg:#F8EAE0;
  --emerg:#8B93A0; --emerg-text:#4C5A6A; --emerg-bg:#EFEAE0;
  --tried:#127C82; --tried-text:#117379; --tried-bg:#E3EFF0;
  --caution:#B88400; --caution-text:#886200; --caution-bg:#FCF4E0;
  --tick:#5E6977;
  --art-fill:#0072B2; --art-line:#4F97C7; --art-ground:#F7F5F0; --art-opacity:.14;
}

/* Aliases re-declared on both scopes (a var() alias resolves where it is declared). */
:root,[data-theme="dark"],[data-theme="light"]{
  --ink:var(--ice); --bg:var(--ds); --text:var(--ice);
  --teal:var(--cyan); --navy:var(--cyan); --navy-soft:var(--ds2); --navy-card:var(--card); --navy-border:var(--line);
  --green:var(--est-text); --green-bg:var(--est-bg);
  --red:var(--con-text);   --red-bg:var(--con-bg);
  --gray:var(--muted);     --gray-bg:transparent;
  --logo-syn:var(--ice); --logo-accent:var(--cyan);   /* ONE logo rule, every section, both modes */
}

::selection{background:var(--cyan);color:var(--on-accent)}

/* Logo: SYN = primary text, SAPIEN + mark = the accent. Never amber. */
.logo-mark,.hero-mark,.foot-mark,.rp-mark svg{color:var(--logo-accent)}
.wordmark .syn,.hero-word .syn{color:var(--logo-syn)}
.wordmark .sapien,.hero-word .sapien,.hero-word .dot{color:var(--logo-accent)}

/* Primary button is the accent in every section (the amber hero CTA is retired). */
.btn-teal{background:var(--cyan);color:var(--on-accent)}
.btn-teal:hover{background:var(--cyan-deep)}
.btn-ghost{background:transparent;color:var(--ice);border-color:var(--line-strong)}
.btn-ghost:hover{color:var(--cyan-text);border-color:var(--cyan)}

/* Problem wall: solid tick colour (no alpha), accent on hover. The fade is an alpha mask, so it fades to
   whatever ground sits behind it — identical in both modes. */
.tick{color:var(--tick)}
.tick:hover{color:var(--cyan-text)}
.ticker-inner{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 12%,#000 88%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 12%,#000 88%,transparent 100%)}

/* Ambient art runs in both modes; mark-art.js reads --art-* and the element's opacity. */
#search-art,#brief-art{opacity:var(--art-opacity)}

.tab .n,.gcard-stat,.ft-count,.flow-i b,.bibn,.th-stats,.th-elapsed,.evstrip,.tally,.auditbar{font-variant-numeric:tabular-nums}