/**
 * Default Typography Scale
 * Aligned with font-sizes.css utility classes
 * Use case: Balanced, versatile
 */

:root {
  /* H1 - matches text-5xl / text-title (48px) */
  --text-h1-size: 3rem;
  --text-h1-weight: 700;
  --text-h1-line-height: 1.15;
  --text-h1-letter-spacing: -0.02em;
  --text-h1-family: var(--font-heading);
  --text-h1-transform: none;

  /* H2 - matches text-4xl / text-subtitle (36px) */
  --text-h2-size: 2.25rem;
  --text-h2-weight: 700;
  --text-h2-line-height: 1.2;
  --text-h2-letter-spacing: -0.015em;
  --text-h2-family: var(--font-heading);
  --text-h2-transform: none;

  /* H3 - matches text-3xl / text-heading (30px) */
  --text-h3-size: 1.875rem;
  --text-h3-weight: 600;
  --text-h3-line-height: 1.25;
  --text-h3-letter-spacing: -0.01em;
  --text-h3-family: var(--font-heading);
  --text-h3-transform: none;

  /* H4 - matches text-2xl (24px) */
  --text-h4-size: 1.5rem;
  --text-h4-weight: 600;
  --text-h4-line-height: 1.3;
  --text-h4-letter-spacing: -0.005em;
  --text-h4-family: var(--font-heading);
  --text-h4-transform: none;

  /* H5 - matches text-xl / text-subheading (20px) */
  --text-h5-size: 1.25rem;
  --text-h5-weight: 600;
  --text-h5-line-height: 1.4;
  --text-h5-letter-spacing: 0;
  --text-h5-family: var(--font-heading);
  --text-h5-transform: none;

  /* H6 - matches text-lg (18px) */
  --text-h6-size: 1.125rem;
  --text-h6-weight: 600;
  --text-h6-line-height: 1.4;
  --text-h6-letter-spacing: 0;
  --text-h6-family: var(--font-heading);
  --text-h6-transform: none;

  /* Body */
  --text-body-size: 1rem;
  --text-body-weight: 400;
  --text-body-line-height: 1.6;
  --text-body-letter-spacing: 0;
  --text-body-family: var(--font-body);
  --text-body-transform: none;

  /* Lead */
  --text-lead-size: 1.333rem;
  --text-lead-weight: 400;
  --text-lead-line-height: 1.5;
  --text-lead-letter-spacing: 0;
  --text-lead-family: var(--font-body);
  --text-lead-transform: none;

  /* Small */
  --text-small-size: 0.75rem;
  --text-small-weight: 400;
  --text-small-line-height: 1.4;
  --text-small-letter-spacing: 0;
  --text-small-family: var(--font-body);
  --text-small-transform: none;

  /* Caption */
  --text-caption-size: 0.563rem;
  --text-caption-weight: 400;
  --text-caption-line-height: 1.3;
  --text-caption-letter-spacing: 0.01em;
  --text-caption-family: var(--font-body);
  --text-caption-transform: none;

  /* Overline */
  --text-overline-size: 0.75rem;
  --text-overline-weight: 600;
  --text-overline-line-height: 1.2;
  --text-overline-letter-spacing: 0.1em;
  --text-overline-family: var(--font-body);
  --text-overline-transform: uppercase;
}

/* Mobile Scale - aligned with font-sizes.css mobile breakpoint */
@media (max-width: 767.98px) {
  :root {
    --text-h1-size: 2.25rem;   /* 36px, matches text-5xl mobile */
    --text-h2-size: 1.875rem;  /* 30px, matches text-4xl mobile */
    --text-h3-size: 1.5rem;    /* 24px, matches text-3xl mobile */
    --text-h4-size: 1.25rem;   /* 20px */
    --text-h5-size: 1.125rem;  /* 18px */
    --text-h6-size: 1rem;      /* 16px */
    --text-lead-size: 1.125rem; /* 18px */
  }
}

/* Element Defaults */
h1 {
  font-size: var(--text-h1-size);
  font-weight: var(--text-h1-weight);
  line-height: var(--text-h1-line-height);
  letter-spacing: var(--text-h1-letter-spacing);
  font-family: var(--text-h1-family);
  text-transform: var(--text-h1-transform);
}

h2 {
  font-size: var(--text-h2-size);
  font-weight: var(--text-h2-weight);
  line-height: var(--text-h2-line-height);
  letter-spacing: var(--text-h2-letter-spacing);
  font-family: var(--text-h2-family);
  text-transform: var(--text-h2-transform);
}

h3 {
  font-size: var(--text-h3-size);
  font-weight: var(--text-h3-weight);
  line-height: var(--text-h3-line-height);
  letter-spacing: var(--text-h3-letter-spacing);
  font-family: var(--text-h3-family);
  text-transform: var(--text-h3-transform);
}

h4 {
  font-size: var(--text-h4-size);
  font-weight: var(--text-h4-weight);
  line-height: var(--text-h4-line-height);
  letter-spacing: var(--text-h4-letter-spacing);
  font-family: var(--text-h4-family);
  text-transform: var(--text-h4-transform);
}

h5 {
  font-size: var(--text-h5-size);
  font-weight: var(--text-h5-weight);
  line-height: var(--text-h5-line-height);
  letter-spacing: var(--text-h5-letter-spacing);
  font-family: var(--text-h5-family);
  text-transform: var(--text-h5-transform);
}

h6 {
  font-size: var(--text-h6-size);
  font-weight: var(--text-h6-weight);
  line-height: var(--text-h6-line-height);
  letter-spacing: var(--text-h6-letter-spacing);
  font-family: var(--text-h6-family);
  text-transform: var(--text-h6-transform);
}

body {
  font-size: var(--text-body-size);
  font-weight: var(--text-body-weight);
  line-height: var(--text-body-line-height);
  letter-spacing: var(--text-body-letter-spacing);
  font-family: var(--text-body-family);
}

/* Utility Classes */
.text-lead {
  font-size: var(--text-lead-size);
  font-weight: var(--text-lead-weight);
  line-height: var(--text-lead-line-height);
  letter-spacing: var(--text-lead-letter-spacing);
  font-family: var(--text-lead-family);
}

.text-small {
  font-size: var(--text-small-size);
  font-weight: var(--text-small-weight);
  line-height: var(--text-small-line-height);
  letter-spacing: var(--text-small-letter-spacing);
  font-family: var(--text-small-family);
}

.text-caption {
  font-size: var(--text-caption-size);
  font-weight: var(--text-caption-weight);
  line-height: var(--text-caption-line-height);
  letter-spacing: var(--text-caption-letter-spacing);
  font-family: var(--text-caption-family);
}

.text-overline {
  font-size: var(--text-overline-size);
  font-weight: var(--text-overline-weight);
  line-height: var(--text-overline-line-height);
  letter-spacing: var(--text-overline-letter-spacing);
  font-family: var(--text-overline-family);
  text-transform: var(--text-overline-transform);
}