/**
 * Font Size System
 *
 * Zero-shot friendly font sizes for AI-generated content.
 * Uses Tailwind-compatible naming with semantic aliases.
 *
 * CONSTRAINT: Only these classes may be used. No custom font-size values.
 *
 * Scale: text-xs through text-9xl (13 sizes)
 * Semantic: text-body, text-lead, text-caption, text-label, text-title,
 *           text-subtitle, text-heading, text-subheading, text-display,
 *           text-hero, text-jumbo
 *
 * CSS Variables: Use var(--text-size-*) in component schemas for overridable font sizes.
 */

/* ==========================================================================
   CSS VARIABLES (for schema/component use)
   ========================================================================== */

:root {
  --text-size-xs: 0.75rem;     /* 12px */
  --text-size-sm: 0.875rem;    /* 14px */
  --text-size-base: 1rem;      /* 16px */
  --text-size-lg: 1.125rem;    /* 18px */
  --text-size-xl: 1.25rem;     /* 20px */
  --text-size-2xl: 1.5rem;     /* 24px */
  --text-size-3xl: 1.875rem;   /* 30px */
  --text-size-4xl: 2.25rem;    /* 36px */
  --text-size-5xl: 3rem;       /* 48px */
  --text-size-6xl: 3.75rem;    /* 60px */
  --text-size-7xl: 4.5rem;     /* 72px */
  --text-size-8xl: 6rem;       /* 96px */
  --text-size-9xl: 8rem;       /* 128px */
}

/* ==========================================================================
   SIZE SCALE (Tailwind-compatible)
   ========================================================================== */

.text-xs {
  font-size: 0.75rem;    /* 12px */
  line-height: 1rem;     /* 16px */
}

.text-sm {
  font-size: 0.875rem;   /* 14px */
  line-height: 1.25rem;  /* 20px */
}

.text-base {
  font-size: 1rem;       /* 16px */
  line-height: 1.5rem;   /* 24px */
}

.text-lg {
  font-size: 1.125rem;   /* 18px */
  line-height: 1.75rem;  /* 28px */
}

.text-xl {
  font-size: 1.25rem;    /* 20px */
  line-height: 1.75rem;  /* 28px */
}

.text-2xl {
  font-size: 1.5rem;     /* 24px */
  line-height: 2rem;     /* 32px */
}

.text-3xl {
  font-size: 1.875rem;   /* 30px */
  line-height: 2.25rem;  /* 36px */
}

.text-4xl {
  font-size: 2.25rem;    /* 36px */
  line-height: 2.5rem;   /* 40px */
}

.text-5xl {
  font-size: 3rem;       /* 48px */
  line-height: 1.15;
}

.text-6xl {
  font-size: 3.75rem;    /* 60px */
  line-height: 1.1;
}

.text-7xl {
  font-size: 4.5rem;     /* 72px */
  line-height: 1.1;
}

.text-8xl {
  font-size: 6rem;       /* 96px */
  line-height: 1.05;
}

.text-9xl {
  font-size: 8rem;       /* 128px */
  line-height: 1;
}

/* ==========================================================================
   SEMANTIC ALIASES
   Provides context-aware naming for zero-shot AI usage.
   Each alias maps to a size from the scale above.
   ========================================================================== */

/* Body & Paragraph Text */
.text-caption {
  font-size: 0.75rem;    /* 12px - same as text-xs */
  line-height: 1rem;
}

.text-label {
  font-size: 0.875rem;   /* 14px - same as text-sm */
  line-height: 1.25rem;
}

.text-body {
  font-size: 1rem;       /* 16px - same as text-base */
  line-height: 1.5rem;
}

.text-lead {
  font-size: 1.125rem;   /* 18px - same as text-lg */
  line-height: 1.75rem;
}

/* Heading Aliases */
.text-subheading {
  font-size: 1.25rem;    /* 20px - same as text-xl, use for H6/H5 */
  line-height: 1.75rem;
}

.text-heading {
  font-size: 1.875rem;   /* 30px - same as text-3xl, use for H4/H3 */
  line-height: 2.25rem;
}

.text-subtitle {
  font-size: 2.25rem;    /* 36px - same as text-4xl, use for H2 */
  line-height: 2.5rem;
}

.text-title {
  font-size: 3rem;       /* 48px - same as text-5xl, use for H1 */
  line-height: 1.15;
}

/* Display & Hero Text */
.text-display {
  font-size: 3.75rem;    /* 60px - same as text-6xl */
  line-height: 1.1;
}

.text-hero {
  font-size: 4.5rem;     /* 72px - same as text-7xl */
  line-height: 1.1;
}

.text-jumbo {
  font-size: 6rem;       /* 96px - same as text-8xl */
  line-height: 1.05;
}

/* ==========================================================================
   MOBILE RESPONSIVE SCALING
   Reduces large sizes on small screens for better readability.
   ========================================================================== */

@media (max-width: 767.98px) {
  /* Scale sizes - reduce larger sizes */
  .text-3xl {
    font-size: 1.5rem;     /* 24px, was 30px */
    line-height: 2rem;
  }

  .text-4xl {
    font-size: 1.875rem;   /* 30px, was 36px */
    line-height: 2.25rem;
  }

  .text-5xl {
    font-size: 2.25rem;    /* 36px, was 48px */
    line-height: 2.5rem;
  }

  .text-6xl {
    font-size: 2.5rem;     /* 40px, was 60px */
    line-height: 1.15;
  }

  .text-7xl {
    font-size: 3rem;       /* 48px, was 72px */
    line-height: 1.15;
  }

  .text-8xl {
    font-size: 3.5rem;     /* 56px, was 96px */
    line-height: 1.1;
  }

  .text-9xl {
    font-size: 4rem;       /* 64px, was 128px */
    line-height: 1.05;
  }

  /* Semantic aliases - match their scale counterparts */
  .text-heading {
    font-size: 1.5rem;     /* matches text-3xl mobile */
    line-height: 2rem;
  }

  .text-subtitle {
    font-size: 1.875rem;   /* matches text-4xl mobile */
    line-height: 2.25rem;
  }

  .text-title {
    font-size: 2.25rem;    /* matches text-5xl mobile */
    line-height: 2.5rem;
  }

  .text-display {
    font-size: 2.5rem;     /* matches text-6xl mobile */
    line-height: 1.15;
  }

  .text-hero {
    font-size: 3rem;       /* matches text-7xl mobile */
    line-height: 1.15;
  }

  .text-jumbo {
    font-size: 3.5rem;     /* matches text-8xl mobile */
    line-height: 1.1;
  }
}

/* ==========================================================================
   QUICK REFERENCE

   Size Scale (Desktop):
   ----------------------
   text-xs     12px   Fine print, footnotes
   text-sm     14px   Captions, helper text
   text-base   16px   Body text (default)
   text-lg     18px   Lead paragraphs
   text-xl     20px   Small headings
   text-2xl    24px   H5 level
   text-3xl    30px   H4 level
   text-4xl    36px   H3 level
   text-5xl    48px   H2 level
   text-6xl    60px   H1 level
   text-7xl    72px   Display
   text-8xl    96px   Hero
   text-9xl    128px  Jumbo

   Semantic Aliases:
   -----------------
   text-caption     → text-xs    (12px)
   text-label       → text-sm    (14px)
   text-body        → text-base  (16px)
   text-lead        → text-lg    (18px)
   text-subheading  → text-xl    (20px)
   text-heading     → text-3xl   (30px)
   text-subtitle    → text-4xl   (36px)
   text-title       → text-5xl   (48px)
   text-display     → text-6xl   (60px)
   text-hero        → text-7xl   (72px)
   text-jumbo       → text-8xl   (96px)

   ========================================================================== */