/* Bare base — index.html still ships its own inline CSS for now.
   Stub pages use this until styles are extracted. */
:root {
  /* ====== Primary palette (brand kit, May 2026) ====== */
  --deep-forest: #121815; /* warm near-black (green-black, NOT navy) — dark backgrounds, headlines, cinematic moments */
  --warm-ivory: #f4f3f0; /* brand cream — single light background */
  --sand: #e8dfcf; /* secondary background, card surfaces */
  --capyo-orange: #d35400; /* THE accent — CTAs, highlights */
  --stone: #6b6459; /* secondary text, micro-labels */

  /* ====== Secondary palette ====== */
  --sky-blue: #c7d7e6; /* trust / tech signal */
  --mist: #ededed; /* subtle dividers */
  --sage: #d9e2d4; /* success / positive signal */
  --terracotta: #c4552c; /* secondary accent — never a second orange */
  --warm-gray: #b7b0a3; /* low-emphasis backgrounds, photo borders */
  --charcoal: #2b2e2c; /* body text */

  /* ====== Neutrals ====== */
  --white: #ffffff; /* card surfaces only — not a page background */
  --off-white: #f4f3f0; /* brand cream — unified with page background */
  --light-beige: #f7f2e8; /* section dividers, row stripes */
  --beige: #efe6d6; /* card alternate */
  --gray: #8e887d; /* disabled, low-priority */
  --dark-gray: #3f403d; /* body text alt on dark */

  /* ====== Semantic aliases (TEMPORARY — Pass 1 per-page migration removes these) ====== */
  --ink: var(--deep-forest); /* legacy alias — was #1a1815 */
  --bone: var(--warm-ivory); /* legacy alias — was #ede2c8 */
  --cream: var(--off-white); /* legacy alias — was #faf8f5, ~identical */
  --amber: var(--capyo-orange); /* legacy alias — was #d35400, retiring */
  --forest: var(--deep-forest); /* legacy alias — was #2c3a26, retiring */

  /* Added Pass 1 — single source of truth */

  /* Muted text — derived from brand kit, not a new color */
  --ink-mute: var(--stone); /* body copy on light = brand "Stone" */
  --bone-mute: rgba(243, 237, 225, 0.78); /* body copy on dark — Warm Ivory at 0.78 alpha */

  /* Hairlines — derived from Deep Forest and Warm Ivory at low alpha */
  --hairline: rgba(18, 24, 21, 0.14);
  --hairline-soft: rgba(18, 24, 21, 0.08);
  --hairline-on-dark: rgba(243, 237, 225, 0.18);
  --hairline-on-dark-soft: rgba(243, 237, 225, 0.1);

  /* The Capyo gradient — the only allowed color gradient */
  --capyo-gradient: linear-gradient(135deg, var(--capyo-orange) 0%, var(--deep-forest) 100%);

  /* CTA tokens — brand color is identity, not action. Primary CTA is near-black. */
  --cta-bg: var(--deep-forest);
  --cta-fg: var(--warm-ivory);
  --cta-bg-hover: #243443; /* dusk blue, a touch lighter for hover */
  --cta-fg-hover: var(--warm-ivory);
  /* Reserved for the single "ask" beat per page (donate, urgent action) */
  --cta-bg-ask: var(--capyo-orange);
  --cta-fg-ask: #ffffff;

  /* Shadows */
  --shadow-card: 0 12px 28px rgba(18, 24, 21, 0.06);
  --shadow-card-strong: 0 18px 40px rgba(18, 24, 21, 0.1);

  /* Radii */
  --radius-card: 12px;
  --radius-card-soft: 18px; /* product mockups only */
  --radius-pill: 999px;

  /* Type scale — clamp() for fluid sizing */
  --text-eyebrow: 11px; /* mono micro-labels */
  --text-meta: 12px; /* mono metadata */
  --text-caption: 13px; /* chips, badges */
  --text-body: 16px; /* default body */
  --text-lede: clamp(18px, 1.4vw, 22px); /* hero subtitle, intro */
  --text-h4: clamp(20px, 2vw, 26px);
  --text-h3: clamp(26px, 2.6vw, 36px);
  --text-h2: clamp(34px, 4vw, 56px); /* section heads */
  --text-h1: clamp(48px, 7vw, 92px); /* hero / page heads */
  --text-display: clamp(72px, 11vw, 156px); /* cinematic moments only */

  /* Letter spacing */
  --tracking-tight: -0.035em; /* headlines */
  --tracking-mono: 0.18em; /* mono micro-labels */
  --tracking-meta: 0.14em; /* mono metadata */

  /* Line height */
  --leading-tight: 1.02; /* headlines */
  --leading-snug: 1.25; /* sub-heads */
  --leading-body: 1.55; /* body */
  --leading-loose: 1.7; /* long-form legal */

  /* ====== Type ====== */
  --display: 'Instrument Sans', 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --sans: 'Instrument Sans', 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --serif: 'Instrument Serif', Georgia, serif;
  --mono: 'Instrument Sans', 'General Sans', sans-serif; /* mono retired: labels use the brand sans */
}

* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
}
body {
  background: var(--warm-ivory);
  color: var(--charcoal);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a {
  color: inherit;
  text-decoration: none;
}

.page-shell {
  max-width: 920px;
  margin: 0 auto;
  padding: 160px 32px 120px;
}
.page-shell h1 {
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 600;
  letter-spacing: -0.022em;
  margin: 0 0 16px;
}
.page-shell h2 {
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 600;
  letter-spacing: -0.012em;
  margin: 0 0 12px;
}

.stub-section {
  padding: 28px 0;
  border-bottom: 1px dashed var(--hairline);
}
.stub-section:last-child {
  border-bottom: 0;
}
.stub-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--capyo-orange);
  margin-bottom: 10px;
}
.stub-note {
  margin: 0 0 12px;
  color: var(--stone);
  font-size: 14px;
  line-height: 1.55;
}
.stub-list {
  margin: 8px 0 0 18px;
  padding: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--charcoal);
}