/* Layout: an engineer's notebook. Graph-paper ground, ink type, one cobalt pen, one yellow highlighter; a dark "photo plate" and contact slab bookend the page. */
:root{
  --bg:#F2F5FB; --paper:#FFFFFF; --ink:#0B1530; --muted:#55607A; --line:#D3DBEA; --grid:rgba(31,79,255,.07);
  --accent:#1F4FFF; --accent-ink:#FFFFFF; --hl:#FFD84A; --on-hl:#0B1530;
  --panel:#0A1128; --panel-2:#131D40; --panel-ink:#EAF0FF; --panel-muted:#9FB0D6; --panel-line:#26335F; --panel-accent:#7AA2FF;
  --display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --body:"Instrument Sans","Segoe UI",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --hand:"Caveat","Segoe Script",cursive;
  --video-bg:#0A1128; /* fixed in both themes: record the intro video on exactly this colour */
  --r:14px; --gut:20px; --max:1160px;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#070C1A; --paper:#0E1630; --ink:#EAF0FF; --muted:#9BA8C7; --line:#1E2A4D; --grid:rgba(108,155,255,.08);
  --accent:#7AA2FF; --accent-ink:#071027; --panel:#0E1630; --panel-2:#16214A; color-scheme:dark } }
:root[data-theme="dark"]{
  --bg:#070C1A; --paper:#0E1630; --ink:#EAF0FF; --muted:#9BA8C7; --line:#1E2A4D; --grid:rgba(108,155,255,.08);
  --accent:#7AA2FF; --accent-ink:#071027; --panel:#0E1630; --panel-2:#16214A; color-scheme:dark }

/* visitor's own choice (CSS-only switch in the header); "Auto" leaves the system theme above in charge */
:root:has(#th-light:checked){
  --bg:#F2F5FB; --paper:#FFFFFF; --ink:#0B1530; --muted:#55607A; --line:#D3DBEA; --grid:rgba(31,79,255,.07);
  --accent:#1F4FFF; --accent-ink:#FFFFFF; --panel:#0A1128; --panel-2:#131D40; color-scheme:light }
:root:has(#th-dark:checked){
  --bg:#070C1A; --paper:#0E1630; --ink:#EAF0FF; --muted:#9BA8C7; --line:#1E2A4D; --grid:rgba(108,155,255,.08);
  --accent:#7AA2FF; --accent-ink:#071027; --panel:#0E1630; --panel-2:#16214A; color-scheme:dark }