@layer base {
  :root,
  :host {
    color: var(--text-body);
  }
}

@layer theme {
  :root,
  :host {
    /* Defining typography variables for use within @theme and @utility */
    --line-height-tight: 1.2;
    --line-height-normal: 1.4;
    /* See https://stackoverflow.com/questions/19982651/why-does-bootstrap-set-the-line-height-property-to-1-428571429 for below line height reasoning */
    --line-height-loose: 1.428571429;
    --font-family-sans:
      -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Helvetica', 'Arial', sans-serif, 'Apple Color Emoji',
      'Segoe UI Emoji', 'Segoe UI Symbol';
  }
}

@theme inline static {
  --font-sans: var(--font-family-sans);

  --leading-tight: var(--line-height-tight);
  --leading-normal: var(--line-height-normal);
  --leading-loose: var(--line-height-loose);

  /* Body font */
  --typography-body-size-1: 3.75rem;
  --typography-body-line-height-1: var(--line-height-tight);

  --typography-body-size-2: 3.375rem;
  --typography-body-line-height-2: var(--line-height-tight);

  --typography-body-size-3: 3rem;
  --typography-body-line-height-3: var(--line-height-tight);

  --typography-body-size-4: 2.625rem;
  --typography-body-line-height-4: var(--line-height-tight);

  --typography-body-size-5: 2.25rem;
  --typography-body-line-height-5: var(--line-height-tight);

  --typography-body-size-6: 1.875rem;
  --typography-body-line-height-6: var(--line-height-tight);

  --typography-body-size-7: 1.5rem;
  --typography-body-line-height-7: var(--line-height-tight);

  --typography-body-size-8: 1.125rem;
  --typography-body-line-height-8: var(--line-height-normal);

  --typography-body-size-9: 1rem;
  --typography-body-line-height-9: var(--line-height-normal);

  --typography-body-size-10: 0.875rem;
  --typography-body-line-height-10: var(--line-height-normal);

  --typography-body-size-11: 0.875rem;
  --typography-body-line-height-11: var(--line-height-loose);

  /* Brand font */
  --typography-brand-size-1: 3.75rem;
  --typography-brand-line-height-1: var(--line-height-tight);

  --typography-brand-size-2: 3.375rem;
  --typography-brand-line-height-2: var(--line-height-tight);

  --typography-brand-size-3: 3rem;
  --typography-brand-line-height-3: var(--line-height-tight);

  --typography-brand-size-4: 2.625rem;
  --typography-brand-line-height-4: var(--line-height-tight);

  --typography-brand-size-5: 2.25rem;
  --typography-brand-line-height-5: var(--line-height-tight);

  --typography-brand-size-6: 1.875rem;
  --typography-brand-line-height-6: var(--line-height-tight);

  --typography-brand-size-7: 1.5rem;
  --typography-brand-line-height-7: var(--line-height-tight);

  --typography-brand-size-8: 1.125rem;
  --typography-brand-line-height-8: var(--line-height-normal);

  --typography-brand-size-9: 1rem;
  --typography-brand-line-height-9: var(--line-height-normal);

  --typography-brand-size-10: 0.875rem;
  --typography-brand-line-height-10: var(--line-height-normal);

  --typography-brand-size-11: 0.875rem;
  --typography-brand-line-height-11: var(--line-height-loose);
}

@utility typography-body-* {
  font-size: --value(--typography-body-size-*);
  line-height: --value(--typography-body-line-height-*);
  font-family: var(--font-family-sans);
}

@utility typography-brand-* {
  font-size: --value(--typography-brand-size-*);
  line-height: --value(--typography-brand-line-height-*);
  font-family: var(--font-brand), var(--font-family-sans);
}