/* ==========================================================================
   TYPOGRAPHY.CSS — Digilent Design System
   Type Scale, Headings & Text Utilities
   ========================================================================== */

/* ==========================================================================
   HEADINGS
   ========================================================================== */

.dig-h1 {
  font-size: var(--dig-font-size-4xl);
  font-weight: var(--dig-font-weight-bold);
  line-height: var(--dig-line-height-tight);
  letter-spacing: var(--dig-letter-spacing-tight);
  color: var(--dig-text-primary);
}

.dig-h2 {
  font-size: var(--dig-font-size-3xl);
  font-weight: var(--dig-font-weight-bold);
  line-height: var(--dig-line-height-tight);
  letter-spacing: var(--dig-letter-spacing-tight);
  color: var(--dig-text-primary);
}

.dig-h3 {
  font-size: var(--dig-font-size-2xl);
  font-weight: var(--dig-font-weight-semibold);
  line-height: var(--dig-line-height-tight);
  letter-spacing: var(--dig-letter-spacing-tight);
  color: var(--dig-text-primary);
}

.dig-h4 {
  font-size: var(--dig-font-size-xl);
  font-weight: var(--dig-font-weight-semibold);
  line-height: var(--dig-line-height-tight);
  color: var(--dig-text-primary);
}

.dig-h5 {
  font-size: var(--dig-font-size-lg);
  font-weight: var(--dig-font-weight-semibold);
  line-height: var(--dig-line-height-normal);
  color: var(--dig-text-primary);
}

.dig-h6 {
  font-size: var(--dig-font-size-md);
  font-weight: var(--dig-font-weight-semibold);
  line-height: var(--dig-line-height-normal);
  color: var(--dig-text-primary);
}

/* Responsive headings */
@media (max-width: 1023px) {
  .dig-h1 {
    font-size: var(--dig-font-size-3xl);
  }
  
  .dig-h2 {
    font-size: var(--dig-font-size-2xl);
  }
  
  .dig-h3 {
    font-size: var(--dig-font-size-xl);
  }
}

@media (max-width: 767px) {
  .dig-h1 {
    font-size: var(--dig-font-size-2xl);
  }
  
  .dig-h2 {
    font-size: var(--dig-font-size-xl);
  }
  
  .dig-h3 {
    font-size: var(--dig-font-size-lg);
  }
  
  .dig-h4 {
    font-size: var(--dig-font-size-md);
  }
}

/* ==========================================================================
   BODY TEXT
   ========================================================================== */

.dig-body-l {
  font-size: var(--dig-font-size-lg);
  font-weight: var(--dig-font-weight-regular);
  line-height: var(--dig-line-height-relaxed);
  color: var(--dig-text-primary);
}

.dig-body-m {
  font-size: var(--dig-font-size-base);
  font-weight: var(--dig-font-weight-regular);
  line-height: var(--dig-line-height-relaxed);
  color: var(--dig-text-secondary);
}

.dig-body-s {
  font-size: var(--dig-font-size-sm);
  font-weight: var(--dig-font-weight-regular);
  line-height: var(--dig-line-height-normal);
  color: var(--dig-text-secondary);
}

.dig-body-xs {
  font-size: var(--dig-font-size-xs);
  font-weight: var(--dig-font-weight-regular);
  line-height: var(--dig-line-height-normal);
  color: var(--dig-text-tertiary);
}

/* ==========================================================================
   LABELS & OVERLINES
   ========================================================================== */

.dig-label {
  font-size: var(--dig-font-size-sm);
  font-weight: var(--dig-font-weight-medium);
  line-height: var(--dig-line-height-normal);
  color: var(--dig-text-secondary);
}

.dig-overline {
  font-size: var(--dig-font-size-xs);
  font-weight: var(--dig-font-weight-semibold);
  line-height: var(--dig-line-height-normal);
  letter-spacing: var(--dig-letter-spacing-caps);
  text-transform: uppercase;
  color: var(--dig-text-tertiary);
}

/* ==========================================================================
   TEXT UTILITIES
   ========================================================================== */

.dig-text-primary { color: var(--dig-text-primary); }
.dig-text-secondary { color: var(--dig-text-secondary); }
.dig-text-tertiary { color: var(--dig-text-tertiary); }
.dig-text-inverse { color: var(--dig-text-inverse); }
.dig-text-gold { color: var(--dig-gold-text); }

.dig-text-center { text-align: center; }
.dig-text-left { text-align: left; }
.dig-text-right { text-align: right; }

.dig-font-medium { font-weight: var(--dig-font-weight-medium); }
.dig-font-semibold { font-weight: var(--dig-font-weight-semibold); }
.dig-font-bold { font-weight: var(--dig-font-weight-bold); }

/* ==========================================================================
   LINKS
   ========================================================================== */

.dig-link {
  color: var(--dig-text-primary);
  font-weight: var(--dig-font-weight-medium);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--dig-transition-fast);
}

.dig-link:hover {
  color: var(--dig-text-secondary);
}

.dig-link--arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--dig-space-8);
  text-decoration: none;
}

.dig-link--arrow::after {
  content: '→';
  transition: transform var(--dig-transition-fast);
}

.dig-link--arrow:hover::after {
  transform: translateX(4px);
}