/* Demo themes for the prototypes. Default = Extrême (dark). Tech and Inova reuse the same variable names with their own values
   (from the Concept demo audit: Tech = Inter, #171717 buttons, white; Inova = Jost uppercase, #7b5454, white). */
:root{--panel-bg:var(--sand-200);--panel-text:#09090b;--panel-muted:#57534e;--border:rgba(245,245,244,.10);--border-strong:var(--zinc-700);--on-accent:#09090b;--heading-case:none;--heading-track:-.02em;--heading-weight:800;--display-weight:900}
html[data-demo="tech"]{
  --zinc-950:#ffffff;--zinc-900:#f5f5f5;--zinc-800:#e5e5e5;--zinc-700:#d4d4d4;--zinc-500:#737373;--zinc-400:#525252;--stone-100:#171717;
  --sand-200:#f5f5f5;--sand-300:#e5e5e5;--lime-300:#171717;--lime-200:#333333;--on-accent:#ffffff;
  --panel-bg:#171717;--panel-text:#ffffff;--panel-muted:#a3a3a3;--border:rgba(23,23,23,.10);--border-strong:#d4d4d4;
  --display:"Inter",system-ui,sans-serif;--body:"Inter",system-ui,sans-serif;--heading-track:-.03em;--heading-weight:700;--display-weight:700;color-scheme:light}
html[data-demo="inova"]{
  --zinc-950:#ffffff;--zinc-900:#f4eded;--zinc-800:#e8dcdc;--zinc-700:#d6c4c4;--zinc-500:#8a6f6f;--zinc-400:#5e4646;--stone-100:#462f2f;
  --sand-200:#f4eded;--sand-300:#e8dcdc;--lime-300:#7b5454;--lime-200:#6a4646;--on-accent:#ffffff;
  --panel-bg:#7b5454;--panel-text:#ffffff;--panel-muted:rgba(255,255,255,.7);--border:rgba(70,47,47,.12);--border-strong:#d6c4c4;
  --display:"Jost",system-ui,sans-serif;--body:"Jost",system-ui,sans-serif;--heading-case:uppercase;--heading-track:.02em;--heading-weight:400;--display-weight:400;color-scheme:light}
html[data-demo="tech"] .outline,html[data-demo="inova"] .outline{color:var(--stone-100);-webkit-text-stroke:0}
html[data-demo="tech"] .intro h1,html[data-demo="inova"] h1,html[data-demo="inova"] h2,html[data-demo="inova"] h3{text-transform:var(--heading-case);letter-spacing:var(--heading-track)}
/* demo switcher */
.demo-sw{display:inline-flex;gap:2px;background:var(--zinc-800);border-radius:999px;padding:3px}
.demo-sw button{appearance:none;border:0;background:transparent;color:var(--zinc-400);font:600 12px var(--body);padding:5px 12px;border-radius:999px;cursor:pointer}
.demo-sw button[aria-pressed="true"]{background:var(--stone-100);color:var(--zinc-950)}
.demo-sw button:focus-visible{outline:2px solid var(--lime-300);outline-offset:2px}
/* light demos: caption chip on sticky media */
html[data-demo="tech"] .story .cap,html[data-demo="inova"] .story .cap{background:rgba(255,255,255,.88);color:var(--stone-100)}
html[data-demo="tech"] .story .cap small,html[data-demo="inova"] .story .cap small{color:var(--zinc-500)}