/* Sub-site typography scale & rhythm */
@layer theme {
  :root {
    --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial, sans-serif;

    --font-size-x-small: clamp(.660rem, 1.1vw, .75rem);
    --font-size-small: clamp(.80rem, 1.2vw, .92rem);
    --font-size-regular:  clamp(1.00rem, 1.4vw, 1.05rem);
    --font-size-large:  clamp(1.25rem, 2vw, 1.50rem);
    --font-size-x-large:  clamp(2.25rem, 3vw, 3.00rem);
    --font-size-xx-large:  clamp(3.25rem, 4vw, 4.50rem);

    --weight-regular: 400;
    --weight-medium:  600;
    --weight-bold:    800;
    --leading-tight:  1.06;
    --leading-body:   1.55;
  }

  body { font-family: var(--font-sans); font-size: var(--font-size-regular); line-height: var(--leading-body); }
  h1 { font-size: var(--font-size-xx-large); line-height: var(--leading-tight); font-weight: var(--weight-bold); margin: 0 0 var(--space-3) }
  h2 { font-size: var(--font-size-large); line-height: var(--leading-tight); font-weight: var(--weight-bold); margin: 0 0 var(--space-3) }
  h3 { font-size: var(--font-size-large); font-weight: var(--weight-medium);  margin: 0 0 var(--space-2) }
  p  { margin: 0 0 var(--space-3) }
  
  ul + p {
  margin: var(--space-3) 
  }

}