/* AEB Design System — Typography tokens */

:root {
  /* Libre Franklin replaced Fraunces as the display face on 2026-08-27 (UI polish Phase 2,
     picked from a rendered specimen on real AEB screens). It is a grotesque, not a serif, so
     it is set HEAVY and TIGHT at display sizes and carries no variable axes beyond weight —
     the old --opsz-* / --wonk-* / --soft-default tokens were Fraunces-specific and are gone,
     not left dangling. If you find a `font-variation-settings: 'opsz' ... 'WONK' ...` call
     site anywhere in website/src/, it is a leftover: delete it, do not port it.

     The rule the face is used under lives in docs/DESIGN.md §3: display at --text-lg (22px)
     and above, and nothing below that. Below 22px the answer is Public Sans, heavier. */
  --font-display: 'Libre Franklin', 'Public Sans', -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Public Sans', -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;

  /* Type scale — 1.25 ratio, rem-based */
  --text-xs: 0.75rem;    /* 12px — captions, labels, fine print */
  --text-sm: 0.875rem;   /* 14px — meta, secondary UI text */
  --text-base: 1rem;     /* 16px — body copy */
  --text-md: 1.125rem;   /* 18px — lead paragraphs */
  --text-lg: 1.375rem;   /* 22px — subheads */
  --text-xl: 1.75rem;    /* 28px — H3 */
  --text-2xl: 2.25rem;   /* 36px — H2 */
  --text-3xl: 3rem;      /* 48px — H1 */
  --text-4xl: 4rem;      /* 64px — hero display */
  --text-5xl: 5.5rem;    /* 88px — masthead / splash */

  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  --tracking-tight: -0.02em; /* display sizes only; a grotesque needs more negative than the
                                serif it replaced, which sat at -0.01em */
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.12em; /* eyebrows, all-caps labels */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-display-medium: 600;
  --weight-display-bold: 700;
}

/* Utility classes available to consumers — optional but handy in specimens/kits */
.aeb-display {
  font-family: var(--font-display);
  font-weight: var(--weight-display-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}
.aeb-eyebrow {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--gold-600);
}
.aeb-body {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--text-primary);
}