/* Dela's type contract. See docs/typography.md before adding a role.
   Keep this public: the marketing pages, private handoffs and native support
   fallback share it without scripts or a change to their security policies. */
:root {
  --dela-font-display: 'Fraunces', Georgia, serif;
  --dela-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --dela-serif: var(--dela-font-display);
  --dela-sans: var(--dela-font-body);
  --dela-weight-regular: 400;
  --dela-weight-medium: 500;
  --dela-weight-strong: 600;

  /* A role includes its family, weight and leading, not just a size. Fluid
     headings retain rem-based bounds when a reader enlarges their text. */
  --dela-type-display: 400 clamp(3rem, 1.95rem + 3.6vw, 4.25rem)/1.06 var(--dela-serif);
  --dela-type-page: 400 clamp(2.5rem, 1.5rem + 2.5vw, 3.5rem)/1.1 var(--dela-serif);
  --dela-type-section: 400 clamp(2rem, 1.5rem + 1.7vw, 2.75rem)/1.16 var(--dela-serif);
  --dela-type-subsection: 400 clamp(1.75rem, 1.5rem + .75vw, 2rem)/1.2 var(--dela-serif);
  --dela-type-card: 400 clamp(1.5rem, 1.35rem + .5vw, 1.75rem)/1.22 var(--dela-serif);
  --dela-type-card-small: 400 1.25rem/1.3 var(--dela-serif);
  --dela-type-reading-heading: 400 clamp(1.75rem, 1.5rem + 1vw, 2.125rem)/1.25 var(--dela-serif);
  --dela-type-subheading: 600 1.125rem/1.45 var(--dela-sans);
  --dela-type-lead: 400 clamp(1.0625rem, 1rem + .25vw, 1.125rem)/1.65 var(--dela-sans);
  --dela-type-body: 400 1rem/1.7 var(--dela-sans);
  --dela-type-reading: 400 1.0625rem/1.8 var(--dela-sans);
  --dela-type-small: 400 .875rem/1.65 var(--dela-sans);
  --dela-type-meta: 400 .75rem/1.5 var(--dela-sans);
  --dela-type-control: 500 .875rem/1.5 var(--dela-sans);
  --dela-type-label: var(--dela-type-control);
  --dela-type-input: 400 1rem/1.5 var(--dela-sans);
  --dela-type-eyebrow: 600 .75rem/1.5 var(--dela-sans);
  --dela-type-result: var(--dela-type-reading-heading);
  --dela-type-number: 600 clamp(1.75rem, 1.5rem + 1.25vw, 2.25rem)/1.15 var(--dela-sans);

  /* Identity and nonverbal glyphs are not extra sizes for prose. */
  --dela-type-brand: 500 1.8125rem/1 var(--dela-serif);
  --dela-type-icon: 400 1.125rem/1 var(--dela-sans);
  --dela-type-icon-large: 400 1.75rem/1 var(--dela-sans);
  --dela-track-display: -.04em;
  --dela-track-heading: -.025em;
  --dela-track-body: 0;
  --dela-track-eyebrow: .12em;
  --dela-track-code: .16em;
}

/* Low-specificity defaults: a UI heading may deliberately use Inter. Never
   force every h2/h3 to serif with a page- or header-dependent selector. */
:where(body) { font: var(--dela-type-body); letter-spacing: var(--dela-track-body); overflow-wrap: anywhere; }
:where(h1) { font: var(--dela-type-page); letter-spacing: var(--dela-track-heading); }
:where(h2) { font: var(--dela-type-section); letter-spacing: var(--dela-track-heading); }
:where(h3) { font: var(--dela-type-card); letter-spacing: var(--dela-track-heading); }
:where(h4, h5, h6) { font: var(--dela-type-subheading); letter-spacing: var(--dela-track-body); }
:where(h1, h2, h3, h4, h5, h6) { hyphens: auto; text-wrap: balance; }
:where(p, li) { text-wrap: pretty; }
:where(button, summary) { font: var(--dela-type-control); letter-spacing: var(--dela-track-body); }
:where(input, select, textarea) { font: var(--dela-type-input); letter-spacing: var(--dela-track-body); }
:where(strong, b) { font-weight: var(--dela-weight-strong); }
:where(small, figcaption) { font: var(--dela-type-meta); letter-spacing: var(--dela-track-body); }