/* === AgentPulse v2.0 — Design-System Base === */
/* Single light-mode token layer (COLOR-01/02) + Source Serif 4 / IBM Plex Mono
   typography (TYPE-01/02/03). Loaded FIRST in index.html so its :root and serif
   body win the cascade over the legacy component rules in style-shared.css.
   Hand-authored CSS, no build step. Nav-shell / tab / back-control styles are
   Plan 02 — this file ships tokens + body typography + display classes only. */

/* ── Design Tokens ───────────────────────────────────────────── */

:root {
  /* Color — single light-mode palette, ONE violet accent (COLOR-01/02) */
  --bg:#faf8f5;
  --surface:#ffffff;
  --ink:#1a1916;
  --ink-soft:#55514a;
  --ink-faint:#8a857c;
  --line:#e7e2da;
  --line-strong:#d8d2c7;
  --accent:#5b3df5;
  --accent-soft:#efeaff;
  --accent-ink:#4a2fd6;

  /* Legacy-token compatibility bridge (COLOR-01 — applied site-wide).
     The retired dark body.technical/.strategic blocks were the SOLE definition
     site for these component token names, which style-shared.css still consumes
     for global chrome (body/article text, borders, footer bottom-bar, subscribe
     CTA + input, code/quote surfaces, mode toggle). Re-home them onto the new
     light palette here so the foundation actually renders site-wide. Phases
     12-13 restyle these components and may retire these aliases. */
  --text-primary:var(--ink);
  --text-body:var(--ink);
  --text-secondary:var(--ink-soft);
  --text-hint:var(--ink-faint);
  --border:var(--line);
  --btn-bg:var(--accent);
  --btn-text:#fff;
  --btn-secondary-border:var(--line-strong);
  --input-bg:var(--surface);
  --code-bg:var(--line);
  --pre-bg:var(--line);
  --blockquote-bg:var(--accent-soft);
  --toggle-bg:var(--accent-soft);
  --toggle-inactive:var(--ink-faint);
  --bar-bg:var(--surface);
  --bar-border:var(--line);
  --bar-text:var(--ink-soft);

  /* Font stacks (TYPE-01/02) — serif for reading, mono for UI chrome only */
  --serif:'Source Serif 4', Georgia, serif;
  --mono:'IBM Plex Mono', ui-monospace, monospace;

  /* Spacing — 4px grid */
  --space-xs:4px;
  --space-sm:8px;
  --space-md:16px;
  --space-lg:24px;
  --space-xl:32px;
  --space-2xl:48px;
  --space-3xl:64px;

  /* Radius — 3 / 7 / 8 / 10 set */
  --radius:10px;
  --radius-sm:7px;
  --radius-btn:8px;
  --radius-dot:3px;
}

/* ── Base Body Typography (TYPE-01/TYPE-03) ──────────────────── */
/* Serif 18px / 1.62 reading base; no body-level monospace anywhere. */

body {
  font-family:var(--serif);
  font-size:18px;
  line-height:1.62;
  background:var(--bg);
  color:var(--ink);
}

/* ── Display / Eyebrow Type Classes (D-02) ───────────────────── */
/* Ship the CSS only; hero DOM restructure is Phase 12. Weights 400/600 only. */

.page-title {
  font-family:var(--serif);
  font-size:clamp(30px, 5vw, 46px);
  font-weight:600;
  line-height:1.12;
  letter-spacing:-.015em;
}

.eyebrow {
  font-family:var(--mono);
  font-size:11px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:var(--accent-ink);
}

/* ── Nav Shell: sticky 3-tab header (NAV-01..04, Plan 02) ─────── */
/* All colors reference :root tokens except the two locked literals the UI-SPEC
   specifies: the translucent header bg rgba(250,248,245,.86) and the active-tab
   border #ddd2ff. Weights 400/600 only. Chrome paddings snapped to the 4px grid. */

header {
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(250,248,245,.86);
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line);
}

.nav {
  display:flex;
  align-items:center;
  gap:var(--space-md);
  padding:12px var(--space-lg);
  max-width:880px;       /* mockup --maxw — centered chrome, room for 3 one-line tabs */
  margin:0 auto;
}

/* Brand: dot + AGENTPULSE wordmark, links to Newsletter home (#/) */
.brand {
  display:inline-flex;
  align-items:center;
  gap:var(--space-sm);
  font-family:var(--mono);
  font-weight:600;
  font-size:14px;
  letter-spacing:.08em;
  color:var(--ink);
  text-decoration:none;
  flex-shrink:0;
}

.dot {
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--accent);
}

/* Tab container — center region; pushes Subscribe to the right */
.tabs {
  display:flex;
  align-items:center;
  gap:var(--space-sm);
  margin-right:auto;
}

/* Tab REST state — weight 400 (UI-SPEC override of mockup's 500) */
.tab {
  display:inline-flex;       /* equal height + vertically-centered label */
  align-items:center;
  white-space:nowrap;        /* never wrap to a 2nd row — keeps all tabs the same height */
  font-family:var(--mono);
  font-size:12.5px;
  font-weight:400;
  letter-spacing:.02em;
  color:var(--ink-soft);
  padding:8px 12px;
  border-radius:var(--radius-sm);
  border:1px solid transparent;  /* matches .active's 1px border → no height shift when highlighted */
  text-decoration:none;
}

/* Active tab — accent-soft fill, accent-ink text, locked border, weight 600 */
.tab.active {
  color:var(--accent-ink);
  background:var(--accent-soft);
  border-color:#ddd2ff;
  font-weight:600;
}

/* Subscribe button — solid accent, white text, reuses scrollToSubscribe() */
.subscribe {
  font-family:var(--mono);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  background:var(--accent);
  color:#fff;
  border:none;
  border-radius:var(--radius-btn);
  padding:8px 16px;
  cursor:pointer;
  flex-shrink:0;
}

.subscribe:hover {
  background:var(--accent-ink);
}

/* ── Back-control: ← Back to [section] (NAV-03) ──────────────── */
.backlink {
  display:inline-flex;
  align-items:center;
  gap:var(--space-xs);
  font-family:var(--mono);
  font-size:12.5px;
  font-weight:400;
  color:var(--ink-soft);
  text-decoration:none;
  background:none;
  border:none;
}

.backlink:hover {
  color:var(--accent-ink);
}

/* ── Responsive nav (D-03): ≤640px wrap tabs to scrollable row ── */
/* Brand + Subscribe stay on the top row; the three tabs drop to a full-width,
   horizontally-scrollable row below. */
@media (max-width:640px) {
  .nav {
    flex-wrap:wrap;
  }
  .tabs {
    order:3;
    flex-basis:100%;
    margin-right:0;
    overflow-x:auto;
  }
}

/* ── About stub (NAV/ABOUT) — minimal Phase 11 placeholder ────── */
/* Full "What is AgentPulse" page is Phase 14 (ABOUT-01); this just makes the
   third tab land somewhere honest instead of falling through to the list. */
.about-stub {
  padding-top:var(--space-2xl);
}
.about-stub .page-title {
  margin-top:var(--space-md);
}
.about-lede {
  font-family:var(--serif);
  font-size:17px;
  line-height:1.6;
  color:var(--ink-soft);
  max-width:60ch;
  margin:var(--space-lg) 0 var(--space-2xl);
}
.about-stub .backlink {
  font-size:12.5px;
}