frontend/src/css/typography.css

/* Typography System - Enhanced typography classes and utilities */

/* Font Family Classes */
.font-sans {
  font-family: var(--font-family-primary);
}

.font-display {
  font-family: var(--font-family-display);
}

/* Font Size Classes */
.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.text-2xl { font-size: var(--font-size-2xl); }
.text-3xl { font-size: var(--font-size-3xl); }
.text-4xl { font-size: var(--font-size-4xl); }
.text-5xl { font-size: var(--font-size-5xl); }
.text-6xl { font-size: var(--font-size-6xl); }
.text-7xl { font-size: var(--font-size-7xl); }
.text-8xl { font-size: var(--font-size-8xl); }
.text-9xl { font-size: var(--font-size-9xl); }

/* Font Weight Classes */
.font-thin { font-weight: var(--font-weight-thin); }
.font-extralight { font-weight: var(--font-weight-extralight); }
.font-light { font-weight: var(--font-weight-light); }
.font-normal { font-weight: var(--font-weight-normal); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }
.font-extrabold { font-weight: var(--font-weight-extrabold); }
.font-black { font-weight: var(--font-weight-black); }

/* Line Height Classes */
.leading-tight { line-height: var(--line-height-tight); }
.leading-normal { line-height: var(--line-height-normal); }
.leading-relaxed { line-height: var(--line-height-relaxed); }
.leading-loose { line-height: var(--line-height-loose); }

/* Letter Spacing Classes */
.tracking-tighter { letter-spacing: var(--letter-spacing-tighter); }
.tracking-tight { letter-spacing: var(--letter-spacing-tight); }
.tracking-normal { letter-spacing: var(--letter-spacing-normal); }
.tracking-wide { letter-spacing: var(--letter-spacing-wide); }
.tracking-wider { letter-spacing: var(--letter-spacing-wider); }
.tracking-widest { letter-spacing: var(--letter-spacing-widest); }

/* Text Color Classes */
.text-primary-50 { color: var(--color-primary-50); }
.text-primary-100 { color: var(--color-primary-100); }
.text-primary-200 { color: var(--color-primary-200); }
.text-primary-300 { color: var(--color-primary-300); }
.text-primary-400 { color: var(--color-primary-400); }
.text-primary-500 { color: var(--color-primary-500); }
.text-primary-600 { color: var(--color-primary-600); }
.text-primary-700 { color: var(--color-primary-700); }
.text-primary-800 { color: var(--color-primary-800); }
.text-primary-900 { color: var(--color-primary-900); }
.text-primary-950 { color: var(--color-primary-950); }

.text-secondary-50 { color: var(--color-secondary-50); }
.text-secondary-100 { color: var(--color-secondary-100); }
.text-secondary-200 { color: var(--color-secondary-200); }
.text-secondary-300 { color: var(--color-secondary-300); }
.text-secondary-400 { color: var(--color-secondary-400); }
.text-secondary-500 { color: var(--color-secondary-500); }
.text-secondary-600 { color: var(--color-secondary-600); }
.text-secondary-700 { color: var(--color-secondary-700); }
.text-secondary-800 { color: var(--color-secondary-800); }
.text-secondary-900 { color: var(--color-secondary-900); }
.text-secondary-950 { color: var(--color-secondary-950); }

.text-accent-50 { color: var(--color-accent-50); }
.text-accent-100 { color: var(--color-accent-100); }
.text-accent-200 { color: var(--color-accent-200); }
.text-accent-300 { color: var(--color-accent-300); }
.text-accent-400 { color: var(--color-accent-400); }
.text-accent-500 { color: var(--color-accent-500); }
.text-accent-600 { color: var(--color-accent-600); }
.text-accent-700 { color: var(--color-accent-700); }
.text-accent-800 { color: var(--color-accent-800); }
.text-accent-900 { color: var(--color-accent-900); }
.text-accent-950 { color: var(--color-accent-950); }

.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-error { color: var(--color-error); }
.text-info { color: var(--color-info); }

/* Text Alignment Classes */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }

/* Text Transform Classes */
.text-uppercase { text-transform: uppercase; }
.text-lowercase { text-transform: lowercase; }
.text-capitalize { text-transform: capitalize; }

/* Text Decoration Classes */
.text-underline { text-decoration: underline; }
.text-line-through { text-decoration: line-through; }
.text-no-underline { text-decoration: none; }

/* Text Overflow Classes */
.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-clip {
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}

/* Responsive Typography */
@media (max-width: 639px) {
  .text-4xl { font-size: var(--font-size-3xl); }
  .text-5xl { font-size: var(--font-size-4xl); }
  .text-6xl { font-size: var(--font-size-5xl); }
  .text-7xl { font-size: var(--font-size-6xl); }
  .text-8xl { font-size: var(--font-size-7xl); }
  .text-9xl { font-size: var(--font-size-8xl); }
}

@media (min-width: 640px) {
  .sm\:text-xs { font-size: var(--font-size-xs); }
  .sm\:text-sm { font-size: var(--font-size-sm); }
  .sm\:text-base { font-size: var(--font-size-base); }
  .sm\:text-lg { font-size: var(--font-size-lg); }
  .sm\:text-xl { font-size: var(--font-size-xl); }
  .sm\:text-2xl { font-size: var(--font-size-2xl); }
  .sm\:text-3xl { font-size: var(--font-size-3xl); }
  .sm\:text-4xl { font-size: var(--font-size-4xl); }
  .sm\:text-5xl { font-size: var(--font-size-5xl); }
  .sm\:text-6xl { font-size: var(--font-size-6xl); }
  .sm\:text-7xl { font-size: var(--font-size-7xl); }
  .sm\:text-8xl { font-size: var(--font-size-8xl); }
  .sm\:text-9xl { font-size: var(--font-size-9xl); }
}

@media (min-width: 768px) {
  .md\:text-xs { font-size: var(--font-size-xs); }
  .md\:text-sm { font-size: var(--font-size-sm); }
  .md\:text-base { font-size: var(--font-size-base); }
  .md\:text-lg { font-size: var(--font-size-lg); }
  .md\:text-xl { font-size: var(--font-size-xl); }
  .md\:text-2xl { font-size: var(--font-size-2xl); }
  .md\:text-3xl { font-size: var(--font-size-3xl); }
  .md\:text-4xl { font-size: var(--font-size-4xl); }
  .md\:text-5xl { font-size: var(--font-size-5xl); }
  .md\:text-6xl { font-size: var(--font-size-6xl); }
  .md\:text-7xl { font-size: var(--font-size-7xl); }
  .md\:text-8xl { font-size: var(--font-size-8xl); }
  .md\:text-9xl { font-size: var(--font-size-9xl); }
}

@media (min-width: 1024px) {
  .lg\:text-xs { font-size: var(--font-size-xs); }
  .lg\:text-sm { font-size: var(--font-size-sm); }
  .lg\:text-base { font-size: var(--font-size-base); }
  .lg\:text-lg { font-size: var(--font-size-lg); }
  .lg\:text-xl { font-size: var(--font-size-xl); }
  .lg\:text-2xl { font-size: var(--font-size-2xl); }
  .lg\:text-3xl { font-size: var(--font-size-3xl); }
  .lg\:text-4xl { font-size: var(--font-size-4xl); }
  .lg\:text-5xl { font-size: var(--font-size-5xl); }
  .lg\:text-6xl { font-size: var(--font-size-6xl); }
  .lg\:text-7xl { font-size: var(--font-size-7xl); }
  .lg\:text-8xl { font-size: var(--font-size-8xl); }
  .lg\:text-9xl { font-size: var(--font-size-9xl); }
}

@media (min-width: 1280px) {
  .xl\:text-xs { font-size: var(--font-size-xs); }
  .xl\:text-sm { font-size: var(--font-size-sm); }
  .xl\:text-base { font-size: var(--font-size-base); }
  .xl\:text-lg { font-size: var(--font-size-lg); }
  .xl\:text-xl { font-size: var(--font-size-xl); }
  .xl\:text-2xl { font-size: var(--font-size-2xl); }
  .xl\:text-3xl { font-size: var(--font-size-3xl); }
  .xl\:text-4xl { font-size: var(--font-size-4xl); }
  .xl\:text-5xl { font-size: var(--font-size-5xl); }
  .xl\:text-6xl { font-size: var(--font-size-6xl); }
  .xl\:text-7xl { font-size: var(--font-size-7xl); }
  .xl\:text-8xl { font-size: var(--font-size-8xl); }
  .xl\:text-9xl { font-size: var(--font-size-9xl); }
}

@media (min-width: 1536px) {
  .2xl\:text-xs { font-size: var(--font-size-xs); }
  .2xl\:text-sm { font-size: var(--font-size-sm); }
  .2xl\:text-base { font-size: var(--font-size-base); }
  .2xl\:text-lg { font-size: var(--font-size-lg); }
  .2xl\:text-xl { font-size: var(--font-size-xl); }
  .2xl\:text-2xl { font-size: var(--font-size-2xl); }
  .2xl\:text-3xl { font-size: var(--font-size-3xl); }
  .2xl\:text-4xl { font-size: var(--font-size-4xl); }
  .2xl\:text-5xl { font-size: var(--font-size-5xl); }
  .2xl\:text-6xl { font-size: var(--font-size-6xl); }
  .2xl\:text-7xl { font-size: var(--font-size-7xl); }
  .2xl\:text-8xl { font-size: var(--font-size-8xl); }
  .2xl\:text-9xl { font-size: var(--font-size-9xl); }
}

@media (min-width: 1920px) {
  .3xl\:text-xs { font-size: var(--font-size-xs); }
  .3xl\:text-sm { font-size: var(--font-size-sm); }
  .3xl\:text-base { font-size: var(--font-size-base); }
  .3xl\:text-lg { font-size: var(--font-size-lg); }
  .3xl\:text-xl { font-size: var(--font-size-xl); }
  .3xl\:text-2xl { font-size: var(--font-size-2xl); }
  .3xl\:text-3xl { font-size: var(--font-size-3xl); }
  .3xl\:text-4xl { font-size: var(--font-size-4xl); }
  .3xl\:text-5xl { font-size: var(--font-size-5xl); }
  .3xl\:text-6xl { font-size: var(--font-size-6xl); }
  .3xl\:text-7xl { font-size: var(--font-size-7xl); }
  .3xl\:text-8xl { font-size: var(--font-size-8xl); }
  .3xl\:text-9xl { font-size: var(--font-size-9xl); }
}