/* One reading scale for the storefront, account, checkout, previews and native shell.
   Change these roles here instead of adding a font-size to an individual page. */
:root {
  font-size: 100%;
  --text-xs: .75rem;
  --text-sm: .875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.75rem;
  --text-4xl: 2rem;
  --text-5xl: 2.25rem;
  --text-6xl: 2.625rem;
  --text-7xl: 3rem;
  --text-8xl: 3.5rem;
  --text-9xl: 4rem;
  --text-10xl: 4.5rem;

  --text-body: var(--text-base);
  --text-small: var(--text-sm);
  --text-caption: var(--text-xs);
  --text-label: var(--text-small);
  --text-control: var(--text-body);
  --text-action: var(--text-body);
  --text-heading-sm: var(--text-2xl);
  --text-heading: var(--text-3xl);
  --text-title: var(--text-5xl);
  --text-display: clamp(var(--text-5xl), 4.5vw, var(--text-9xl));
  --text-display-sm: clamp(var(--text-4xl), 4vw, var(--text-8xl));
  --text-display-xl: clamp(var(--text-6xl), 5.2vw, var(--text-10xl));
  --text-title-fluid: clamp(var(--text-3xl), 4vw, var(--text-6xl));
  --text-heading-fluid: clamp(var(--text-2xl), 3vw, var(--text-4xl));
  --text-fluid-lg: clamp(var(--text-body), 2vw, var(--text-2xl));

  --text-leading: 1.5;
  --text-leading-reading: 1.65;
  --text-leading-heading: 1.2;

  /* Decorative tickets/phone illustrations are artwork, not reading text. */
  --art-text-micro: .3rem;
  --art-text-fine: .375rem;
  --art-text-caption: .5rem;
  --art-text-small: .625rem;
  --art-text-body: .75rem;
  --art-text-lg: .875rem;
}

body { font-size: var(--text-body); line-height: var(--text-leading); }
button, input, select, textarea { font-family: inherit; }
:where(button, input, select, textarea) { font-size: var(--text-control); }
.text-body { font-size: var(--text-body); line-height: var(--text-leading-reading); }
.text-small { font-size: var(--text-small); line-height: var(--text-leading); }
.text-caption { font-size: var(--text-caption); line-height: var(--text-leading); }
.text-label { font-size: var(--text-label); line-height: var(--text-leading); }