/*
 * OurFold design tokens  (docs/design-refresh-plan.md)
 * ────────────────────────────────────────────────────────────────────────────
 * The `:root` block below defines every token SEEDED WITH TODAY'S VALUES, so
 * routing an existing hardcoded colour through `var(--token, <current hex>)`
 * changes nothing anywhere. The brand refresh is opt-in per page via the
 * `.brand-next` class, which overrides the token VALUES (warm neutrals, the
 * slate-teal brand accent split from semantic blue, and the Source Serif 4 /
 * Source Sans 3 pairing). Rolled out page-by-page; index.html is first.
 *
 * Loaded globally from COMMON_HEAD so tokens resolve on all 50 pages —
 * including 404/500, which don't link common.css.
 */

@font-face {
  font-family: 'Source Sans 3';
  src: url('/fonts/source-sans-3-latin.woff2') format('woff2');
  font-weight: 200 900;      /* variable */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('/fonts/source-serif-4-latin.woff2') format('woff2');
  font-weight: 200 900;      /* variable */
  font-style: normal;
  font-display: swap;
}

:root {
  /* neutrals — seeded to current values */
  --c-ink: #111;
  --c-ink-hover: #333;
  --c-ink-slate: #4b5563;
  --c-ink-soft: #555;
  --c-ink-dim: #374151;
  --c-ink-deep: #1f2937;
  --c-mut: #6b7280;
  --c-mut-2: #9ca3af;
  --c-mut-3: #888;
  --c-paper: #fff;
  --c-surface: #fff;
  --c-subtle: #f9fafb;
  --c-subtle-2: #f3f4f6;
  --c-subtle-3: #f4f4f4;
  --c-line: #e5e7eb;
  --c-line-2: #d1d5db;

  /* brand accent — seeded to today's featured blue */
  --c-brand: #2563eb;
  --c-brand-shadow: rgba(37,99,235,0.12);
  --c-brand-tint: #eff6ff;
  --c-brand-ink: #1e40af;
  --c-brand-line: #bfdbfe;

  /* type — seeded to today's system stacks */
  --font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-brand: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ── The refresh, opt-in per page ──────────────────────────────────────────── */
.brand-next {
  /* warm the neutrals (final values pending the Phase-1 AA contrast pass) */
  --c-ink: #1c1a17;
  --c-ink-hover: #35302a;
  --c-ink-slate: #574f45;
  --c-ink-soft: #5b5449;
  --c-ink-dim: #46403a;
  --c-ink-deep: #322c26;
  --c-mut: #6f665a;    /* darkened for AA on light (5.3:1 on paper); light-bg only */
  --c-mut-2: #a89f90;  /* stays light — used as text on the DARK nav (6.6:1 there) */
  --c-mut-3: #8c8378;  /* stays light — dark mobile switcher + disabled fills */
  --c-paper: #faf8f5;
  --c-surface: #fffdfb;
  --c-subtle: #f5f1ea;
  --c-subtle-2: #efe9df;
  --c-subtle-3: #f1ece3;
  --c-line: #e7e1d7;
  --c-line-2: #d8d1c5;

  /* slate-teal brand accent, split from semantic blue */
  --c-brand: #2f6b68;
  --c-brand-shadow: rgba(47,107,104,0.16);
  --c-brand-tint: #ebf3f1;
  --c-brand-ink: #1e4d4a;
  --c-brand-line: #b9dbd7;

  /* Source Serif 4 (brand moments) + Source Sans 3 (UI); graceful fallbacks */
  --font-ui: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-brand: 'Source Serif 4', Georgia, 'Times New Roman', serif;
}

/* Paint the warm ground + UI face across the whole opted-in page. */
body.brand-next {
  background: var(--c-paper);         /* warm paper ground */
  color: var(--c-ink);
  font-family: var(--font-ui);
}

/* Serif on brand moments only — wordmark, hero, top-level section titles.
   Working UI (cards, steps, forms, nav links, buttons) stays on --font-ui. */
.brand-next h1,
.brand-next .hero h1,
.brand-next .section-title,
.brand-next .content-grid-heading,
.brand-next .cta h2,
.brand-next .newsletter-title {
  font-family: var(--font-brand);
}