/* ================================================================
   Spoonity Macondo — typography tokens + type-style classes
   Source: Spoonity/macondo src/tokens/typography.css.
   Tailwind @utility classes are re-expressed as plain CSS classes.
   ================================================================ */

:root {
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  /* Caption (12/16) */
  --caption-font-size: 0.75rem;
  --caption-line-height: 1rem;
  /* Footnote (13/20) */
  --footnote-font-size: 0.8125rem;
  --footnote-line-height: 1.25rem;
  /* Callout (14/20) */
  --callout-font-size: 0.875rem;
  --callout-line-height: 1.25rem;
  /* Subheadline (16/22) */
  --subheadline-font-size: 1rem;
  --subheadline-line-height: 1.375rem;
  /* Body (16/24) */
  --body-font-size: 1rem;
  --body-line-height: 1.5rem;
  /* Headline (18/24) */
  --headline-font-size: 1.125rem;
  --headline-line-height: 1.5rem;
  /* H5 (20/28) */
  --h5-font-size: 1.25rem;
  --h5-line-height: 1.75rem;
  /* H4 (24/32) */
  --h4-font-size: 1.5rem;
  --h4-line-height: 2rem;
  /* H3 (28/36) */
  --h3-font-size: 1.75rem;
  --h3-line-height: 2.25rem;
  /* H2 (32/40) */
  --h2-font-size: 2rem;
  --h2-line-height: 2.5rem;
  /* H1 (40/52) */
  --h1-font-size: 2.5rem;
  --h1-line-height: 3.25rem;
}

/* Type-style classes (regular / medium / semibold where the scale defines them) */
.text-caption { font-size: var(--caption-font-size); line-height: var(--caption-line-height); font-weight: var(--font-weight-regular); }
.text-caption-medium { font-size: var(--caption-font-size); line-height: var(--caption-line-height); font-weight: var(--font-weight-medium); }
.text-caption-semibold { font-size: var(--caption-font-size); line-height: var(--caption-line-height); font-weight: var(--font-weight-semibold); }

.text-footnote { font-size: var(--footnote-font-size); line-height: var(--footnote-line-height); font-weight: var(--font-weight-regular); }
.text-footnote-medium { font-size: var(--footnote-font-size); line-height: var(--footnote-line-height); font-weight: var(--font-weight-medium); }

.text-callout { font-size: var(--callout-font-size); line-height: var(--callout-line-height); font-weight: var(--font-weight-regular); }
.text-callout-medium { font-size: var(--callout-font-size); line-height: var(--callout-line-height); font-weight: var(--font-weight-medium); }
.text-callout-semibold { font-size: var(--callout-font-size); line-height: var(--callout-line-height); font-weight: var(--font-weight-semibold); }

.text-subheadline { font-size: var(--subheadline-font-size); line-height: var(--subheadline-line-height); font-weight: var(--font-weight-regular); }
.text-subheadline-medium { font-size: var(--subheadline-font-size); line-height: var(--subheadline-line-height); font-weight: var(--font-weight-medium); }

.text-body { font-size: var(--body-font-size); line-height: var(--body-line-height); font-weight: var(--font-weight-regular); }
.text-body-medium { font-size: var(--body-font-size); line-height: var(--body-line-height); font-weight: var(--font-weight-medium); }

.text-headline { font-size: var(--headline-font-size); line-height: var(--headline-line-height); font-weight: var(--font-weight-regular); }
.text-headline-medium { font-size: var(--headline-font-size); line-height: var(--headline-line-height); font-weight: var(--font-weight-medium); }

.text-h5 { font-size: var(--h5-font-size); line-height: var(--h5-line-height); font-weight: var(--font-weight-regular); }
.text-h5-medium { font-size: var(--h5-font-size); line-height: var(--h5-line-height); font-weight: var(--font-weight-medium); }
.text-h5-semibold { font-size: var(--h5-font-size); line-height: var(--h5-line-height); font-weight: var(--font-weight-semibold); }

.text-h4 { font-size: var(--h4-font-size); line-height: var(--h4-line-height); font-weight: var(--font-weight-regular); }
.text-h4-medium { font-size: var(--h4-font-size); line-height: var(--h4-line-height); font-weight: var(--font-weight-medium); }

.text-h3 { font-size: var(--h3-font-size); line-height: var(--h3-line-height); font-weight: var(--font-weight-regular); }
.text-h3-medium { font-size: var(--h3-font-size); line-height: var(--h3-line-height); font-weight: var(--font-weight-medium); }
.text-h3-semibold { font-size: var(--h3-font-size); line-height: var(--h3-line-height); font-weight: var(--font-weight-semibold); }

.text-h2 { font-size: var(--h2-font-size); line-height: var(--h2-line-height); font-weight: var(--font-weight-regular); }
.text-h2-medium { font-size: var(--h2-font-size); line-height: var(--h2-line-height); font-weight: var(--font-weight-medium); }

.text-h1 { font-size: var(--h1-font-size); line-height: var(--h1-line-height); font-weight: var(--font-weight-regular); }
.text-h1-medium { font-size: var(--h1-font-size); line-height: var(--h1-line-height); font-weight: var(--font-weight-medium); }