/* =================================================================
   MODULAR TYPOGRAPHY SYSTEM - UTILITY CLASSES
   Provides utility classes for precise typography control
   ================================================================= */

/* =================================================================
   FONT SIZE UTILITIES
   Individual size control for any element
   ================================================================= */
.typo-size-large {
  font-size: var(--typo-size-large) !important;
  line-height: var(--typo-lh-large) !important;
  letter-spacing: var(--typo-ls-large) !important;
}

.typo-size-medium {
  font-size: var(--typo-size-medium) !important;
  line-height: var(--typo-lh-medium) !important;
  letter-spacing: var(--typo-ls-medium) !important;
}

.typo-size-small {
  font-size: var(--typo-size-small) !important;
  line-height: var(--typo-lh-small) !important;
  letter-spacing: var(--typo-ls-small) !important;
}

.typo-size-tiny {
  font-size: var(--typo-size-tiny) !important;
  line-height: var(--typo-lh-tiny) !important;
  letter-spacing: var(--typo-ls-tiny) !important;
}

/* =================================================================
   FONT FAMILY UTILITIES
   Apply specific fonts from the font library
   ================================================================= */
.typo-font-primary {
  font-family: var(--font-family-primary) !important;
  font-weight: var(--font-weight-primary) !important;
}

.typo-font-system {
  font-family: system-ui, -apple-system, sans-serif !important;
}

.typo-font-serif {
  font-family: Georgia, 'Times New Roman', serif !important;
}

.typo-font-mono {
  font-family: 'Courier New', monospace !important;
}

/* =================================================================
   FONT WEIGHT UTILITIES
   Precise weight control
   ================================================================= */
.typo-weight-light { font-weight: 300 !important; }
.typo-weight-normal { font-weight: 400 !important; }
.typo-weight-medium { font-weight: 500 !important; }
.typo-weight-semibold { font-weight: 600 !important; }
.typo-weight-bold { font-weight: 700 !important; }

/* =================================================================
   TEXT TRANSFORM UTILITIES
   Case control for any element
   ================================================================= */
.typo-uppercase { text-transform: uppercase !important; }
.typo-lowercase { text-transform: lowercase !important; }
.typo-capitalize { text-transform: capitalize !important; }
.typo-normal-case { text-transform: none !important; }

/* =================================================================
   FONT STYLE UTILITIES
   Style variations
   ================================================================= */
.typo-italic { font-style: italic !important; }
.typo-normal { font-style: normal !important; }

/* =================================================================
   CUSTOM SPACING UTILITIES
   Fine-tune letter spacing
   ================================================================= */
.typo-spacing-tight { letter-spacing: -0.025em !important; }
.typo-spacing-normal { letter-spacing: 0 !important; }
.typo-spacing-wide { letter-spacing: 0.025em !important; }
.typo-spacing-wider { letter-spacing: 0.05em !important; }
.typo-spacing-widest { letter-spacing: 0.1em !important; }

/* =================================================================
   LINE HEIGHT UTILITIES
   Precise line height control
   ================================================================= */
.typo-lh-none { line-height: 1 !important; }
.typo-lh-tight { line-height: 1.25 !important; }
.typo-lh-snug { line-height: 1.375 !important; }
.typo-lh-normal { line-height: 1.5 !important; }
.typo-lh-relaxed { line-height: 1.625 !important; }
.typo-lh-loose { line-height: 2 !important; }

/* =================================================================
   ELEMENT-SPECIFIC RESET UTILITIES
   Override defaults for specific use cases
   ================================================================= */
.typo-reset {
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  text-transform: inherit !important;
  font-style: inherit !important;
}

/* Reset for specific element types */
.typo-reset-heading {
  font-size: inherit !important;
  font-weight: inherit !important;
  margin: 0 !important;
}

.typo-reset-link {
  color: inherit !important;
  text-decoration: none !important;
}

/* =================================================================
   RESPONSIVE TYPOGRAPHY UTILITIES
   Size adjustments for different screen sizes
   ================================================================= */
@media (max-width: 767px) {
  .typo-mobile-large { font-size: calc(var(--typo-size-large) * 0.85) !important; }
  .typo-mobile-medium { font-size: calc(var(--typo-size-medium) * 0.85) !important; }
  .typo-mobile-small { font-size: calc(var(--typo-size-small) * 0.85) !important; }
  .typo-mobile-tiny { font-size: calc(var(--typo-size-tiny) * 0.85) !important; }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .typo-tablet-large { font-size: calc(var(--typo-size-large) * 0.92) !important; }
  .typo-tablet-medium { font-size: calc(var(--typo-size-medium) * 0.92) !important; }
  .typo-tablet-small { font-size: calc(var(--typo-size-small) * 0.92) !important; }
  .typo-tablet-tiny { font-size: calc(var(--typo-size-tiny) * 0.92) !important; }
}

/* =================================================================
   DEFAULT ELEMENT STYLES
   Semantic typography classes with default styling
   ================================================================= */
   
/* Caption Elements */
.caption-title {
  font-size: var(--typo-size-medium) !important;
  line-height: var(--typo-lh-medium) !important;
  font-weight: 500 !important;
}

.caption-year {
  font-size: var(--typo-size-tiny) !important;
  line-height: var(--typo-lh-tiny) !important;
  font-weight: 400 !important;
}

.caption-description {
  font-size: var(--typo-size-small) !important;
  line-height: var(--typo-lh-small) !important;
  font-weight: 400 !important;
}

.caption-categories {
  font-size: var(--typo-size-tiny) !important;
  line-height: var(--typo-lh-tiny) !important;
  font-weight: 400 !important;
}

/* Project Elements */
.project-title {
  font-size: var(--typo-size-large) !important;
  line-height: var(--typo-lh-large) !important;
  font-weight: 600 !important;
}

.project-year {
  font-size: var(--typo-size-tiny) !important;
  line-height: var(--typo-lh-tiny) !important;
  font-weight: 400 !important;
}

.project-category {
  font-size: var(--typo-size-tiny) !important;
  line-height: var(--typo-lh-tiny) !important;
  font-weight: 400 !important;
}

.project-description {
  font-size: var(--typo-size-small) !important;
  line-height: var(--typo-lh-small) !important;
  font-weight: 400 !important;
}

/* =================================================================
   COMBINATION UTILITIES
   Common typography combinations for quick application
   ================================================================= */
.typo-headline {
  font-family: var(--font-family-primary) !important;
  font-size: var(--typo-size-large) !important;
  font-weight: var(--font-weight-primary) !important;
  line-height: var(--typo-lh-large) !important;
  letter-spacing: var(--typo-ls-large) !important;
}

.typo-body {
  font-family: var(--font-family-primary) !important;
  font-size: var(--typo-size-small) !important;
  font-weight: var(--font-weight-primary) !important;
  line-height: var(--typo-lh-small) !important;
  letter-spacing: var(--typo-ls-small) !important;
}

.typo-caption {
  font-family: var(--font-family-primary) !important;
  font-size: var(--typo-size-tiny) !important;
  font-weight: var(--font-weight-primary) !important;
  line-height: var(--typo-lh-tiny) !important;
  letter-spacing: var(--typo-ls-tiny) !important;
}

.typo-navigation {
  font-family: var(--font-family-primary) !important;
  font-size: var(--typo-size-medium) !important;
  font-weight: var(--font-weight-primary) !important;
  line-height: var(--typo-lh-medium) !important;
  letter-spacing: var(--typo-ls-medium) !important;
}