/* Shared chrome for the public marketing pages (landing.html, pricing.html):
   design tokens, base body, nav, logo, and buttons. Page-specific layout stays
   in each template's own <style>. Kept separate from app.css, which the logged-
   in reader/reviewer use. */
:root {
  /* Filament v2 "Kingfisher" — petrol on graphite-cool paper (full system lives
     in app.css). Signal lane is bronze. */
  color-scheme: light;
  --accent: #0f5e6d;
  --accent-dark: #0a4c5a;
  --accent-ink: #ffffff;      /* text on accent fills — white on petrol (7.4:1) */
  --accent-soft: #e7f1f3;
  --signal: #6e6150;
  --ink: #141419;
  --muted: #55555f;
  --line: #e6e6ea;
  --surface: #f3f3f5;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: #f9f9fa;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

nav { align-items: center; display: flex; gap: 20px; height: 68px; }
.logo { align-items: center; display: flex; font-weight: 800; font-size: 20px; gap: 10px; }
.logo-mark { background: var(--accent); border-radius: 9px; color: var(--accent-ink); display: grid; height: 30px; place-items: center; width: 30px; font-size: 16px; }
nav .spacer { flex: 1; }
.nav-link { color: var(--muted); font-weight: 600; }
.nav-link:hover { color: var(--ink); }

.btn { border-radius: 10px; cursor: pointer; display: inline-block; font-weight: 750; padding: 11px 20px; border: 1px solid transparent; font-size: 15px; }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-dark); }
/* Transparent, not #fff — a hardcoded white fill turns invisible in dark mode
   (the themed --ink text goes light). Transparent reads on either page canvas. */
.btn-ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { border-color: var(--muted); }
.btn-block { display: block; text-align: center; width: 100%; }

/* Dark — mirrors app.css's dark tokens (a token swap, not an inversion).
   Kingfisher cyan fills take near-black ink, matching the app's signature. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --accent: #3fd2e8;
    --accent-dark: #63dcee;
    --accent-ink: #04232a;     /* near-black ink on cyan fills (9.1:1) — the signature */
    --accent-soft: rgba(63, 210, 232, 0.10);
    --signal: #b0a490;
    --ink: #f4f4f6;
    --muted: #a3a3af;
    --line: #26262c;
    --surface: #18181d;
  }
  body { background: #101013; }
  .logo-mark { color: #04232a; }
  .btn-primary { color: #04232a; }
  .btn-primary:hover { background: var(--accent-dark); } /* hover lightens in dark */
  .btn-ghost { background: var(--surface); }
  .btn-ghost:hover { border-color: #34343c; }
}