/* Typography scale — canonical role tokens (reference + example pages) */
:root {
  /* Role sizes */
  --text-display: clamp(40px, 6vw, 72px);
  --text-page-display: clamp(48px, 8vw, 96px);
  --text-h1: 42px;
  --text-page-h1: 48px;
  --text-h2: 32px;
  --text-h3: 22px;
  --text-statement: clamp(32px, 5vw, 56px);
  --text-overline: 14px;
  --text-quote: 21px;
  --text-quote-compact: clamp(15px, 1.6vw, 20px);
  --text-body: 17px;
  --text-caption: 14px;
  --text-label: 14px;
  --text-lead: 20px;

  /* Mobile overrides */
  --text-page-h1-mobile: 32px;
  --text-page-display-mobile: clamp(36px, 9vw, 56px);
  --text-statement-mobile: clamp(36px, 9vw, 56px);
  --text-h2-mobile: 22px;

  /* Role weights */
  --weight-display: var(--font-display-weight, 400);
  --weight-h1: var(--font-display-weight, 400);
  --weight-h2: var(--font-display-weight, 400);
  --weight-h3: 400;
  --weight-statement: var(--font-display-weight, 400);
  --weight-overline: 700;
  --weight-quote: var(--font-display-weight, 400);
  --weight-body: 300;
  --weight-caption: 300;
  --weight-label: 600;

  /* Role tracking */
  --tracking-display: -0.04em;
  --tracking-page-display: -0.055em;
  --tracking-h1: -0.03em;
  --tracking-page-h1: -0.03em;
  --tracking-h2: -0.02em;
  --tracking-statement: -0.03em;
  --tracking-overline: 0.18em;
  --tracking-label: 0.1em;
  --tracking-label-wide: 0.08em;

  /* Role line heights */
  --leading-display: 0.98;
  --leading-page-display: 0.96;
  --leading-h1: 1.12;
  --leading-page-h1: 1.12;
  --leading-h2: 1.25;
  --leading-h3: 1.3;
  --leading-statement: 1.08;
  --leading-quote: 1.45;
  --leading-quote-compact: 1.4;
  --leading-body: 1.75;
  --leading-caption: 1.65;

  /* Role colours — light surfaces */
  --color-display: var(--ink);
  --color-h1: var(--ink);
  --color-h2: var(--ink);
  --color-h3: var(--ink);
  --color-statement: var(--ink);
  --color-overline: #000000;
  --color-overline-on-light: var(--text-caption-color, var(--ink-50));
  --color-quote: var(--ink);
  --color-body: var(--muted);
  --color-body-strong: #333;
  --color-caption: var(--ink-50);
  --color-caption-muted: #888;
  --color-label: var(--ink);
  --color-label-accent: var(--gold);

  /* Role colours — dark surfaces */
  --color-overline-on-dark: var(--on-dark-faint, rgba(255, 255, 255, 0.52));
  --color-quote-on-dark: var(--on-dark, #f0ece2);
  --color-body-on-dark: var(--on-dark-muted, rgba(240, 236, 226, 0.78));
  --color-caption-on-dark: var(--on-dark-muted, rgba(240, 236, 226, 0.78));
  --color-label-on-dark: var(--gold);

  /* Overline rule (accent underline) */
  --overline-rule-width: 32px;
  --overline-rule-height: 1px;
  --overline-rule-color: var(--gold);

  /* Ghost link (on dark surfaces) */
  --ghost-link-size: var(--text-caption);
  --ghost-link-color: var(--on-dark-subtle);
  --ghost-link-border: var(--on-dark-border);
  --ghost-link-hover: var(--on-dark);

  /* Legacy aliases */
  --text-guide-h1: var(--text-h1);
  --text-guide-h2: var(--text-h2);
  --text-guide-h3: var(--text-h3);
  --text-guide-overline: var(--text-overline);
  --text-guide-quote: var(--text-quote);
  --text-guide-body: var(--text-body);
  --text-guide-label: var(--text-label);
  --text-guide-lead: var(--text-lead);
  --text-eyebrow: var(--text-overline);
  --text-section: var(--text-h2);
  --text-subhead: var(--text-body);
  --text-display-page: var(--text-page-display);
  --text-ceo-pull: var(--text-quote-compact);
  --text-ceo-feature: var(--text-quote-compact);
  --text-ceo-statement: var(--text-statement);

  --max-width: 860px;
}