/* Shared theme (phase A, Nick 2026-10-26 "look 1"): tokens + fonts + button styles + dark
   mode for every page under src/public. Tokens copied verbatim from the approved mockup
   (~/agents/context/guided-setup/guided-setup.html). Purely visual: no markup, id, data-*
   attribute, or label lives here — each page keeps its own structure and just switches its
   hardcoded colors/fonts for these variables. */
/* Self-hosted fonts (src/public/fonts/, SIL OFL 1.1): same-origin only, matching the public-page
   CSP's font-src 'self'. Latin subset, variable weight. font-display: swap shows the fallback
   (Georgia / system UI) at once and swaps in when the file arrives, so text is never invisible. */
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 500 700; font-display: swap; src: url("/assets/fonts/inter-tight.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/inter.woff2") format("woff2"); }

:root{
  --bg:#F6F2EA; --surface:#FFFFFF; --sunk:#EFE9DE; --ink:#1B1A17; --ink-2:#3F3B34; --muted:#5C574E; --faint:#9C9384;
  --line:#E3DCCF; --line-soft:#EFE9DD; --control:#8F8676;
  --bar:#1B1A17; --on-bar:#F6F2EA; --on-bar-2:#BDB4A4; --bar-muted:#B9B0A1; --bar-raised:#2A2722;
  --accent:#B4531F; --accent-ink:#8E3A12; --accent-soft:#F7E3D6; --on-accent:#FFFFFF;
  --ok:#1F6B45; --ok-soft:#E3F0E8;
  --block:#A3341F; --block-soft:#F6E0D9; --model-b:#3A6A8C;
  --danger:#8E3A12; --danger-soft:#F7E3D6;
  --focus:#B4531F;
  --display:"Inter Tight","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ui:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]){
    --bg:#151310; --surface:#1E1B17; --sunk:#26211B; --ink:#F1EBDF; --ink-2:#D8D0C2; --muted:#A79D8D; --faint:#7D7466;
    --line:#3F3A32; --line-soft:#2C2823; --control:#A79D8D;
    --bar:#0E0D0B; --on-bar:#F1EBDF; --on-bar-2:#A79D8D; --bar-muted:#9C9384; --bar-raised:#221F1B;
    --accent:#E0814A; --accent-ink:#F0A97E; --accent-soft:#3A2419; --on-accent:#1B1A17;
    --ok:#7FD1A0; --ok-soft:#16291E;
    --block:#F09A82; --block-soft:#3A221B; --model-b:#8DB9DA;
    --danger:#F0A97E; --danger-soft:#3A2419;
    --focus:#E0814A;
    color-scheme: dark;
  }
}

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.bar { background: var(--bar); color: var(--on-bar); }
.bar a, .bar .brand { color: var(--on-bar); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 44px; padding: 0.65rem 1.25rem; border-radius: 10px; border: none;
  background: var(--accent); color: var(--on-accent);
  font: 600 1rem var(--ui); text-decoration: none; cursor: pointer;
}
.btn:hover { background: var(--accent-ink); }
.btn.ghost {
  background: transparent; color: var(--ink); border: 1.5px solid var(--control);
}
.btn.ghost:hover { background: var(--line-soft); }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }