/* Anchor Audit — shared brand styles.
   Adopted from the Anchor Web Style Guide (vault: System/Wiki/Anchor — Web Style
   Guide.md) as plain CSS (no Tailwind build). Token block + component classes are
   verbatim from the guide; the scorecard band tokens are a documented app-level
   extension (the guide ships only --destructive). Keep in sync with the guide. */

:root {
  /* ── palette (guide §2) ─────────────────────────────────────────────── */
  --atlantic: oklch(0.27 0.045 250);
  --atlantic-deep: oklch(0.22 0.04 250);
  --salt: oklch(0.975 0.018 95);
  --brick: oklch(0.55 0.14 35);
  --ink: oklch(0.18 0.03 250);

  --rule: color-mix(in oklch, var(--salt) 18%, transparent);
  --rule-strong: color-mix(in oklch, var(--salt) 32%, transparent);

  --background: var(--atlantic);
  --foreground: var(--salt);
  --primary: var(--salt);
  --primary-foreground: var(--atlantic);
  --accent: var(--brick);
  --accent-foreground: var(--salt);
  --destructive: oklch(0.55 0.18 28);

  /* muted text helpers */
  --salt-muted: color-mix(in oklch, var(--salt) 82%, transparent);
  --salt-faint: color-mix(in oklch, var(--salt) 70%, transparent);
  --muted-on-cream: color-mix(in oklch, var(--atlantic) 65%, transparent);
  --border-cream: color-mix(in oklch, var(--atlantic) 14%, transparent);

  /* ── typefaces (guide §3) ───────────────────────────────────────────── */
  --font-serif: 'Newsreader', ui-serif, Georgia, serif;
  --font-display: 'Lexend Zetta', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-body: var(--font-serif);

  /* ── scorecard band tokens (APP EXTENSION — not in the guide) ─────────
     The guide ships only --destructive. These give the R/Y/G scorecard bands
     one on-palette source of truth: a saturated hue for text/marks, and a light
     tint (mixed toward cream) for chip backgrounds on the --salt surface. Red is
     aligned with --brick / --destructive. */
  --band-green: oklch(0.50 0.09 155);
  --band-yellow: oklch(0.58 0.10 85);
  --band-red: oklch(0.50 0.15 30);
  --band-neutral: oklch(0.55 0.012 250);
  --band-green-bg: color-mix(in oklch, var(--band-green) 16%, var(--salt));
  --band-yellow-bg: color-mix(in oklch, var(--band-yellow) 18%, var(--salt));
  --band-red-bg: color-mix(in oklch, var(--band-red) 14%, var(--salt));
  --band-neutral-bg: color-mix(in oklch, var(--band-neutral) 12%, var(--salt));
}

/* ── reusable components (guide §5) ───────────────────────────────────── */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--salt) 72%, transparent);
}

.display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.script {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.hairline { border-top: 1px solid var(--rule); }

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.6rem;
  background: var(--brick);
  color: var(--salt);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: background 150ms ease, transform 150ms ease;
}
.btn-primary:hover { background: color-mix(in oklch, var(--brick) 88%, black); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.6rem;
  border: 1px solid var(--rule-strong);
  color: var(--salt);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 999px;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease;
}
.btn-ghost:hover { border-color: var(--salt); background: color-mix(in oklch, var(--salt) 5%, transparent); }

/* Cream surface — inverts the palette (the audit's sheets use this). */
.cream { background: var(--salt); color: var(--atlantic); }
.cream .eyebrow { color: color-mix(in oklch, var(--atlantic) 65%, transparent); }
.cream .btn-ghost { border-color: color-mix(in oklch, var(--atlantic) 30%, transparent); color: var(--atlantic); }
.cream .btn-ghost:hover { border-color: var(--atlantic); background: color-mix(in oklch, var(--atlantic) 5%, transparent); }