/**
 * Shared tokens + base rules for every PUBLIC, pre-account page (the
 * marketing homepage's own brand, borrowed here rather than duplicated
 * ad hoc) — never load this on a page behind login. See "Brand boundary"
 * in CLAUDE.md: public pages are dark/blue/Archivo, everything behind
 * authentication is cream/wine/Lora+Public Sans, and the two must never mix
 * on one page.
 *
 * public/index.html is still a standalone file with its own inlined copy of
 * these same token values — this file exists so a second public page
 * (starting with /signup) never has to re-invent or hand-copy them again,
 * without editing the marketing homepage's own markup to source from here.
 */
:root {
  --bg:            oklch(0.16 0.025 250);
  --bg-raised:     oklch(0.21 0.03 250);
  --bg-raised-2:   oklch(0.26 0.032 250);
  --bg-raised-3:   oklch(0.31 0.035 250);
  --border:        oklch(1 0 0 / 0.10);
  --border-soft:   oklch(1 0 0 / 0.06);
  --text:          oklch(0.97 0.008 250);
  --muted:         oklch(0.72 0.018 250);
  --muted-2:       oklch(0.55 0.016 250);
  --accent:        oklch(0.62 0.18 235);
  --accent-soft:   oklch(0.62 0.18 235 / 0.16);
  --on-accent:     oklch(0.99 0.005 250);
  --success:       oklch(0.78 0.15 150);
  /* Not part of the marketing homepage's own token set — it has no error
     states. Added here for form-bearing public pages (/signup, later
     /login). Measured 6.70:1 on --bg; see CLAUDE.md's Brand boundary note. */
  --danger:        oklch(0.70 0.18 25);
}

html, body { margin: 0; padding: 0; background: var(--bg); }
* { box-sizing: border-box; }
body { color: var(--text); font-family: Archivo, system-ui, sans-serif; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--accent-soft); }
img, svg { max-width: 100%; }

.btn-primary { font-size: 16px; font-weight: 700; padding: 15px 32px; border-radius: 12px; background: var(--accent); color: var(--on-accent); display: inline-block; border: none; cursor: pointer; font-family: inherit; }
.btn-primary:hover:not(:disabled) { filter: brightness(1.08); }
.btn-primary:disabled { opacity: 0.6; cursor: default; }
.btn-ghost { font-size: 16px; font-weight: 600; padding: 15px 32px; border-radius: 12px; background: transparent; border: 1px solid var(--border); color: var(--text); display: inline-block; }
.btn-ghost:hover { border-color: oklch(1 0 0 / 0.24); }

.pill-nav a:hover { color: var(--text); }
@media (max-width: 860px) { header nav { display: none !important; } }