/* ============================================================
   landing.css — marketing site overlay
   AGPL-3.0
   ------------------------------------------------------------
   Loaded AFTER ../rewind.css. The canonical design system
   (tokens, dashboard chrome, replay primitives) lives there;
   this file only adds what the apex marketing page needs and
   none of the dashboard does:

     - hero typography scale (76px hero, 56px h1, …)
     - marketing-flavoured buttons (gradient primary, AGPL CTA)
     - pills, code-block chrome, stats, nav, footer
     - legacy accent aliases so inline styles in index.html
       that reference --brand / --open / --info / etc. continue
       to resolve to the canonical --c-* values

   Prior to 2026-05-14 a separate landing/rewind.css duplicated
   the entire token system and inlined a stale replay-shell
   layout. That file is gone; this one replaces it.
   ============================================================ */

/* ---------- 1. Legacy accent aliases ---------- */
/* Pre-merge landing CSS used short names (--brand, --open, …).
   Inline styles in index.html still do. These aliases route
   them through the canonical --c-* values so the marketing
   page tracks any future palette change in one place. */

:root {
  --brand: var(--c-brand);    /* mauve */
  --learn: #f5c2e7;           /* pink — marketing only, no dashboard role */
  --open:  var(--c-read);     /* green — AGPL / "open source" cue */
  --error: var(--c-error);
  --write: var(--c-write);
  --fetch: var(--c-fetch);
  --info:  var(--c-info);
  --file:  var(--c-warn);     /* yellow */
  --text:  var(--text-0);     /* legacy "text" name → canonical scale */
}

/* ---------- 2. Marketing typography tokens ---------- */

:root {
  --fs-hero:    76px;
  --fs-h1-lg:   56px;
  --fs-h2-lg:   30px;
  --fs-h3-lg:   22px;
  --fs-h4-lg:   18px;
  --fs-body-lg: 16px;
  --fs-small:   14px;
  --fs-caption: 13px;
  --fs-stat:    32px;

  --w-bold:           600;
  --lh-tight-mkt:     0.95;
  --lh-snug-mkt:      1.15;
  --lh-loose-mkt:     1.65;
  --tracking-tight-mkt: -3px;
  --tracking-eyebrow-mkt: 2px;

  --page-px:   80px;
  --page-py:   56px;
  --max-prose: 680px;
  --max-page:  1280px;
}

/* ---------- 3. Body override ----------
   Canonical body sits at 13px / 1.55 (dashboard density). Marketing
   wants 16px / 1.65 for comfortable long-form reading. */

body {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-loose-mkt);
}
a:hover { text-decoration: underline; border-bottom: none; }

/* ---------- 4. Marketing typography classes ---------- */

.t-hero {
  font-size: var(--fs-hero);
  font-weight: var(--w-bold);
  line-height: var(--lh-tight-mkt);
  letter-spacing: var(--tracking-tight-mkt);
  color: var(--text-0);
}
.t-h1 {
  font-size: var(--fs-h1-lg);
  font-weight: var(--w-bold);
  line-height: var(--lh-tight-mkt);
  letter-spacing: -2px;
  color: var(--text-0);
}

/* Canonical .t-h2 is 18px (dashboard section header). Marketing wants
   30px. Only the landing page loads this stylesheet, so the override
   stays scoped to the apex site. */
.t-h2 {
  font-size: var(--fs-h2-lg);
  font-weight: var(--w-bold);
  line-height: var(--lh-snug-mkt);
  letter-spacing: -0.8px;
  color: var(--text-0);
}
.t-h3 {
  font-size: var(--fs-h3-lg);
  font-weight: var(--w-bold);
  line-height: 1.3;
  color: var(--text-0);
}
.t-h4 {
  font-size: var(--fs-h4-lg);
  font-weight: var(--w-bold);
  line-height: 1.3;
  color: var(--text-0);
}
.t-body    { font-size: var(--fs-body-lg); line-height: var(--lh-loose-mkt); }
.t-small   { font-size: var(--fs-small);   line-height: 1.55; color: var(--text-2); }
.t-caption { font-size: var(--fs-caption); line-height: 1.55; color: var(--text-3); }
.t-stat {
  font-family: var(--font-mono);
  font-size: var(--fs-stat);
  font-weight: var(--w-bold);
  letter-spacing: -1px;
}

/* Marketing eyebrow — overrides canonical's sans/grey/uppercase with
   the mono/brand-tinted apex flavor. */
.t-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--w-bold);
  color: var(--brand);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow-mkt);
}

/* ---------- 5. Marketing accent helpers ---------- */
/* Canonical already exports .c-brand/error/write/fetch/info/effect/
   warn/control. These add the marketing-only names. */

.c-open  { color: var(--open); }
.c-file  { color: var(--file); }
.c-learn { color: var(--learn); }
.c-muted { color: var(--text-3); }

/* ---------- 6. Marketing layout primitives ---------- */

/* Canonical .page is a full-viewport flex column (unused in any
   mockup HTML today). Marketing .page is a centered content
   container — repurpose it. */
.page {
  min-height: unset;
  max-width: var(--max-page);
  margin: 0 auto;
  padding: 0 var(--page-px);
  display: block;
}
.section { padding: var(--page-py) 0; }
.section + .section { border-top: 1px solid var(--surface-0); }
.prose { max-width: var(--max-prose); margin: 0 auto; }

/* Marketing .row defaults to center+gap (canonical .row is bare flex
   and is never used directly — wasm/preview reach for .row-c). */
.row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.row-spread { display: flex; align-items: center; gap: var(--sp-3); justify-content: space-between; }
.stack       { display: flex; flex-direction: column; gap: var(--sp-4); }
.stack-tight { display: flex; flex-direction: column; gap: var(--sp-2); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
@media (max-width: 760px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* ---------- 7. Nav ---------- */

.nav {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 22px var(--page-px);
}
.nav-spacer { flex: 1; }
.nav a {
  color: var(--text-2);
  font-size: var(--fs-small);
  padding: 6px 14px;
}
.nav a:hover { color: var(--text-0); text-decoration: none; }
.nav a.is-active {
  color: var(--text-0);
  border-bottom: 2px solid var(--brand);
  padding-bottom: 4px;
}

/* ---------- 8. Marketing buttons ----------
   Override canonical .btn (compact tool button: 28px height, 13px,
   500 weight) with the chunky CTA shape. Variants use the non-BEM
   `.btn-<role>` naming so they coexist with canonical's
   `.btn--<role>` (sm / lg / icon / primary / ghost). */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: auto;
  padding: 12px 24px;
  border-radius: var(--r-md);
  border: none;
  background: transparent;
  color: var(--text-0);
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: var(--w-bold);
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.05s ease;
}
.btn:hover  { background: transparent; border: none; }
.btn:active { transform: translateY(1px); background: transparent; }

.btn-primary {
  background: linear-gradient(135deg, var(--brand), var(--info));
  color: var(--base);
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--brand), var(--info));
}
.btn-secondary {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-0);
  font-weight: 500;
}
.btn-secondary:hover { background: rgba(255, 255, 255, 0.07); }
.btn-open {
  background: rgba(166, 227, 161, 0.12);
  border: 1px solid rgba(166, 227, 161, 0.35);
  color: var(--open);
}
.btn-open:hover { background: rgba(166, 227, 161, 0.18); }
.btn-text {
  background: transparent;
  color: var(--text-2);
  padding: 11px 12px;
  font-weight: 500;
}

/* ---------- 9. Pills ---------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--w-bold);
  border: 1px solid;
}
.pill-open    { background: rgba(166,227,161,0.15); color: var(--open);  border-color: rgba(166,227,161,0.3); }
.pill-error   { background: rgba(243,139,168,0.15); color: var(--error); border-color: rgba(243,139,168,0.3); }
.pill-write   { background: rgba(250,179,135,0.15); color: var(--write); border-color: rgba(250,179,135,0.3); }
.pill-info    { background: rgba(137,180,250,0.15); color: var(--info);  border-color: rgba(137,180,250,0.3); }
.pill-brand   { background: rgba(203,166,247,0.15); color: var(--brand); border-color: rgba(203,166,247,0.3); }
.pill-neutral { background: rgba(255,255,255,0.04); color: var(--text-2); border-color: rgba(255,255,255,0.08); }

/* ---------- 10. Card callout ----------
   Canonical exports .card (the panel-like surface). Callouts are the
   accent-bordered marketing variant. */

.card-callout {
  background: var(--mantle);
  border: 1px solid var(--surface-0);
  border-left: 3px solid var(--info);
  border-radius: var(--r-md);
  padding: var(--sp-5);
}
.card-callout.is-open  {
  border-left-color: var(--open);
  background: rgba(166,227,161,0.06);
  border-color: rgba(166,227,161,0.25);
}
.card-callout.is-error {
  border-left-color: var(--error);
  background: rgba(243,139,168,0.06);
  border-color: rgba(243,139,168,0.25);
}
.card-callout.is-write { border-left-color: var(--write); }
.card-callout.is-brand { border-left-color: var(--brand); }

/* ---------- 11. Code blocks ----------
   Different surface from canonical .code (which is the inline source
   viewer used by the replay/preview pages). This is the chunky
   "README block" with a chrome head bar + code body. */

.code-block {
  background: var(--crust);
  border: 1px solid var(--surface-0);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.code-block-head {
  padding: 8px 14px;
  background: #0a0b12;
  border-bottom: 1px solid var(--surface-0);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
}
.code-block-head .filename { color: var(--text-0); }
.code-block pre {
  margin: 0;
  padding: 16px 20px;
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-0);
  overflow-x: auto;
}

.terminal {
  background: var(--crust);
  border: 1px solid var(--surface-0);
  border-radius: var(--r-lg);
  padding: 12px 18px;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text-0);
}
.terminal .prompt { color: var(--open); }

/* Marketing token classes. Canonical's .tok-* set (kw/str/num/fn/
   comm/punc) covers the replay source viewer; these are the parallel
   names the marketing code-block uses. */
.tok-key { color: var(--brand); }
.tok-fn  { color: var(--info); }
.tok-var { color: var(--error); }
.tok-num { color: var(--write); }
.tok-str { color: var(--open); }
.tok-op  { color: var(--fetch); }
.tok-com { color: var(--text-3); font-style: italic; }

/* ---------- 12. Stats ---------- */

.stat {
  background: var(--mantle);
  border: 1px solid var(--surface-0);
  border-radius: var(--r-lg);
  padding: 16px 18px;
}
.stat-value {
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: var(--w-bold);
  letter-spacing: -1px;
}
.stat-label { font-size: 12px; color: var(--text-3); margin-top: 2px; }

/* ---------- 13. Footer ---------- */

.footer {
  padding: 22px var(--page-px);
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: var(--fs-caption);
  color: var(--text-3);
  border-top: 1px solid var(--mantle);
}
.footer-mark   { font-family: var(--font-mono); color: var(--open); }
.footer-sep    { color: var(--surface-1); }
.footer-spacer { flex: 1; }