/* Light theme, shared by every page. Dark stays the default; theme.js sets
   data-theme="light" on <html> before first paint when the visitor chose it.
   Palette: thefounderos.com's white — flat #FFF, neutral greys, #E5E5E5
   hairlines, ink buttons. The amber deepens to amber-700 (5:1 on white) and
   stays in the type, the dots and the mark. Selectors carry [data-theme] so
   they outrank each page's own :root whatever the load order. */
:root {
  --accent-fill: var(--accent);
  --on-accent: var(--ground);
  --shadow: rgba(0,0,0,0.35);
}
:root[data-theme="light"] {
  color-scheme: light;
  --ground:  #FFFFFF;
  --raise:   #FAFAFA;
  --card:    #FFFFFF;
  --line:    #E5E5E5;
  --line-hi: #D4D4D4;
  --dim:     #737373;
  --mid:     #525252;
  --text:    #262626;
  --bright:  #0A0A0A;
  --grad-a:  #FFFFFF;
  --grad-b:  #FFFFFF;
  --accent:  #B45309;
  --accent-dim: rgba(180,83,9,0.08);
  --accent-line: rgba(180,83,9,0.30);
  --accent-fill: #0A0A0A;
  --on-accent: #FFFFFF;
  --shadow: rgba(0,0,0,0.06);
  --ok:   #3F7A4A;
  --warn: #B45309;
  --bad:  #B4462F;
}
/* the filled control on every page — ink on white */
:root[data-theme="light"] .bar-cta,
:root[data-theme="light"] .cta { color: var(--on-accent); background: var(--accent-fill); }
:root[data-theme="light"] .bar-cta:hover,
:root[data-theme="light"] .cta:hover { background: #262626; }
/* the mark's unlit cells are baked in as #2A2A33 — follow the hairline instead */
:root[data-theme="light"] svg rect[fill="#2A2A33"] { fill: var(--line-hi); }

/* the toggle — icon only on the bar, labelled in the ≡ menu */
.themebtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  background: none; border: 0; cursor: pointer; padding: 0; min-width: 24px; height: 34px;
  font-family: var(--sans); font-size: 14px; line-height: inherit; white-space: nowrap;
  color: var(--mid); transition: color 180ms ease;
}
.themebtn:hover { color: var(--bright); }
.themebtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.themebtn svg { width: 16px; height: 16px; display: block; flex: none; }
.themebtn .i-sun { display: none; }
:root[data-theme="light"] .themebtn .i-sun { display: block; }
:root[data-theme="light"] .themebtn .i-moon { display: none; }
.bar-end .themebtn [data-theme-label] {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.menu-body .themebtn { min-height: 44px; padding: 0 1rem; font-size: 14px; }