/* ============================================================================
   Advocacy Simulator — design tokens
   SINGLE SOURCE OF TRUTH for typography. Locked per the design charter:
   Apple-esque, legibility-forward for an older, judicial audience.

   HARD RULES (do not break without updating DESIGN_SYSTEM.md):
   - Inter, self-hosted woff2, weights 400 and 500 ONLY. Never 600 or 700.
   - San Francisco is NOT embedded (not licensed for web @font-face); the
     system stack renders SF natively on Apple devices, Inter elsewhere.
   - No Google Fonts (or any third-party CDN) at runtime — self-hosted, for
     performance and the tool's privacy posture.
   - Legibility floor: body >= 16px, secondary text >= 14px (nothing at 11px),
     line-height ~1.6, headings 18-22px at weight 500.
   Consumers MUST reference these variables — never hardcode a font value.
   ========================================================================== */

/* --- Self-hosted Inter (woff2). Two weights only. Binaries live in ./fonts/
       (see fonts/README.md). Do NOT add an @font-face for any other weight. --- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;            /* regular */
  font-display: swap;
  src: url("./fonts/Inter-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;            /* medium */
  font-display: swap;
  src: url("./fonts/Inter-Medium.woff2") format("woff2");
}

:root {
  /* Family — system stack renders San Francisco natively on Apple devices;
     Inter is the open, embeddable near-twin everywhere else. */
  --font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Weights — TWO ONLY. Never 600 or 700. */
  --font-weight-regular: 400;
  --font-weight-medium: 500;

  /* Type scale — legibility floor for an older, judicial audience.
     Nothing below 14px; body never below 16px. */
  --font-size-body: 16px;          /* body text (floor) */
  --font-size-secondary: 14px;     /* secondary / caption (HARD floor — never lower) */
  --font-size-heading-sm: 18px;    /* headings live in 18-22px ... */
  --font-size-heading-md: 20px;
  --font-size-heading-lg: 22px;    /* ... at weight 500 */

  /* Line height */
  --line-height-body: 1.6;         /* ~1.6 for body / reading */
  --line-height-heading: 1.3;      /* tighter for headings */
}

/* --- Base application. The tokens above are the source of truth; these rules
       simply wire them in so nothing downstream needs to hardcode a font. --- */
html {
  font-family: var(--font-serif);   /* Phase 2 (2a): reading text = Source Serif 4; UI chrome reset to IBM Plex in app.css. (Legacy --font-sans/Inter kept defined, just no longer the html default.) */
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}
h1, h2, h3 {
  font-weight: var(--font-weight-medium);     /* 500 — never heavier */
  line-height: var(--line-height-heading);
}
h1 { font-size: var(--font-size-heading-lg); }   /* 22px */
h2 { font-size: var(--font-size-heading-md); }   /* 20px */
h3 { font-size: var(--font-size-heading-sm); }   /* 18px */
small, .text-secondary { font-size: var(--font-size-secondary); }   /* 14px floor */
strong, b { font-weight: var(--font-weight-medium); }   /* emphasis = 500, not 700 */

/* ============================================================================
   PHASE 2 (ADDITIVE) — gentle-open design language, layered ALONGSIDE the legacy
   Inter charter above. Nothing here is consumed yet: the editor/judge screens
   still use --font-sans (Inter) and the app.css palette. A later step repoints
   components onto these tokens. This block only MAKES them available.

   Charter amendment (see DESIGN_SYSTEM.md): the typography charter now permits
   Source Serif 4 + IBM Plex Sans, self-hosted woff2 (Latin subset). The
   no-third-party-CDN rule is PRESERVED — these are vendored in ./fonts/, never
   loaded from Google Fonts at runtime.
   ========================================================================== */

/* --- Source Serif 4 — self-hosted woff2 (Latin subset). Weights 300/400/600.
       Descriptors match the Inter @font-face blocks above. --- */
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 300;            /* light */
  font-display: swap;
  src: url("./fonts/source-serif-4-v14-latin-300.woff2") format("woff2");
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400;            /* regular */
  font-display: swap;
  src: url("./fonts/source-serif-4-v14-latin-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 600;            /* semibold */
  font-display: swap;
  src: url("./fonts/source-serif-4-v14-latin-600.woff2") format("woff2");
}

/* --- IBM Plex Sans — self-hosted woff2 (Latin subset). Weights 400/500/600.
       NOTE: ibm-plex-sans-v23-latin-300.woff2 is vendored but INTENTIONALLY NOT
       declared (unused weight). --- */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;            /* regular */
  font-display: swap;
  src: url("./fonts/ibm-plex-sans-v23-latin-regular.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;            /* medium */
  font-display: swap;
  src: url("./fonts/ibm-plex-sans-v23-latin-500.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;            /* semibold */
  font-display: swap;
  src: url("./fonts/ibm-plex-sans-v23-latin-600.woff2") format("woff2");
}

/* --- New tokens (additive). Values copied VERBATIM from the #gentle-open block in
       web/intake.html so the opening and the future restyle share one source. The
       names shared with app.css (--bg / --surface / --line / --line-strong /
       --focus-ring) are re-declared here deliberately: app.css loads AFTER tokens.css
       on every page, so the legacy palette still wins until a component is explicitly
       repointed. The new font stacks use NEW names (--font-serif, --font-sans-new,
       --font-mono) so the legacy --font-sans (Inter) is left untouched. --- */
:root {
  /* Palette */
  --paper:#F4F1EA; --paper-2:#EEEAE0; --card:#FCFBF7; --white:#FFFFFF;
  --ink-900:#1F1D1A; --ink-800:#2E2B26; --ink-700:#423E37; --ink-600:#5A554C;
  --ink-500:#736D62; --ink-400:#938C7F; --ink-300:#B8B0A2; --ink-200:#D8D2C6; --ink-100:#E7E2D7;
  --line:#DCD6CA; --line-strong:#C9C1B2;
  --slate-900:#222C38; --slate-700:#324153; --slate-500:#46586D; --slate-300:#7E8C9D; --slate-100:#E3E7EC;
  --claret-700:#7C3B43; --claret-500:#9A4A53; --claret-100:#EFE3E1;

  /* Semantic aliases */
  --bg:var(--paper); --surface:var(--card); --surface-raised:var(--white); --surface-sunken:var(--paper-2);
  --text-strong:var(--ink-900); --text-body:var(--ink-700); --text-muted:var(--ink-500); --text-faint:var(--ink-400);
  --text-on-accent:var(--paper);
  --border:var(--line); --border-strong:var(--line-strong);
  --accent:var(--slate-700); --accent-strong:var(--slate-900); --accent-tint:var(--slate-100);
  --tension:var(--claret-700); --tension-tint:var(--claret-100);
  --focus-ring:var(--slate-500); --selection:#DDE3DE;

  /* Font stacks — NEW names (Inter --font-sans is unchanged). --font-mono is a
     system-stack fallback only: no @font-face, no binary (IBM Plex Mono unused but
     the token is referenced by the opening). */
  --font-serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --font-sans-new:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
}