/* Shared storefront type scale. Components reference roles, not local sizes. */
:root {
  --text-caption: .75rem;
  --text-small: .875rem;
  --text-body: 1rem;
  --text-lead: 1.125rem;
  --text-subtitle: 1.25rem;
  --text-heading: 1.5rem;
  --text-title: 2rem;
  --text-display: 3rem;
  --leading-copy: 1.6;
  --leading-ui: 1.4;
  --leading-heading: 1.2;
}

html { font-size: 100%; }
body { font-size: var(--text-body); line-height: var(--leading-copy); }
h1 { font-size: var(--text-title); }
h2 { font-size: var(--text-heading); }
h3 { font-size: var(--text-subtitle); }
h4, h5, h6 { font-size: var(--text-body); }
h1, h2, h3, h4, h5, h6 { line-height: var(--leading-heading); }
small { font-size: var(--text-caption); }
button, input, textarea, select { font-family: inherit; }

@media (max-width: 760px) {
  :root {
    --text-heading: 1.25rem;
    --text-title: 1.5rem;
    --text-display: 2rem;
  }
}