/* Graviro typography. Letterspacing is negative on display sizes and zero everywhere
   else — no tracked-out uppercase labels anywhere in the system. Labels are sentence case. */
:root {
  --font-display: "Bricolage Grotesque", "Switzer", system-ui, sans-serif;
  --font-ui: "Switzer", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

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

  /* --- Fluid display scale --- */
  --size-display: clamp(52px, 7.2vw, 112px);
  --lh-display: 0.94; /* @kind other */
  --size-hero: clamp(40px, 4.6vw, 68px);
  --lh-hero: 1.02; /* @kind other */
  --size-section: clamp(30px, 3.2vw, 44px);
  --lh-section: 1.06; /* @kind other */
  --size-subhead: 26px;
  --lh-subhead: 1.2; /* @kind other */
  --size-title: 20px;
  --lh-title: 1.3; /* @kind other */

  /* --- Text --- */
  --size-lead: 18px;
  --lh-lead: 1.6; /* @kind other */
  --size-body: 16px;
  --lh-body: 1.62; /* @kind other */
  --size-sm: 14px;
  --lh-sm: 1.5; /* @kind other */
  --size-label: 13px;
  --lh-label: 1.4; /* @kind other */
  --size-micro: 12px;
  --lh-micro: 1.35; /* @kind other */

  /* --- Tracking. Display only; everything else is 0. --- */
  --track-display: -0.035em;
  --track-hero: -0.03em;
  --track-section: -0.02em;
  --track-title: -0.01em;
  --track-flat: 0em; /* @kind other */

  /* --- Composed roles --- */
  --type-display: var(--weight-semibold) var(--size-display) / var(--lh-display) var(--font-display);
  --type-hero: var(--weight-semibold) var(--size-hero) / var(--lh-hero) var(--font-display);
  --type-section: var(--weight-semibold) var(--size-section) / var(--lh-section) var(--font-display);
  --type-subhead: var(--weight-medium) var(--size-subhead) / var(--lh-subhead) var(--font-display);
  --type-title: var(--weight-medium) var(--size-title) / var(--lh-title) var(--font-display);
  --type-lead: var(--weight-regular) var(--size-lead) / var(--lh-lead) var(--font-ui);
  --type-body: var(--weight-regular) var(--size-body) / var(--lh-body) var(--font-ui);
  --type-sm: var(--weight-regular) var(--size-sm) / var(--lh-sm) var(--font-ui);
  --type-label: var(--weight-medium) var(--size-label) / var(--lh-label) var(--font-ui);
  --type-micro: var(--weight-medium) var(--size-micro) / var(--lh-micro) var(--font-ui);
}