/* =========================
   Typography System
   Based on Windows 11 Fluent Design
   ========================= */

/* === BASE TYPOGRAPHY === */
body, html {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* === HEADINGS === */
.heading-1, h1 {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-4) 0;
}

.heading-2, h2 {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-3) 0;
}

.heading-3, h3 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-3) 0;
}

.heading-4, h4 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2) 0;
}

/* === BODY TEXT === */
.text-body-large, .body-large {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-primary);
}

.text-body, .body {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
}

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

/* === CAPTION & LABELS === */
.text-caption, .caption {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

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

/* === SPECIALTY TEXT === */
.text-code, .code {
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  background-color: var(--color-surface-hover);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
}

.text-number, .number {
  font-family: 'Segoe UI', 'SF Mono', monospace;
  font-weight: var(--font-weight-medium);
  font-variant-numeric: tabular-nums;
}

/* === TEXT MODIFIERS === */
.text-semibold { font-weight: var(--font-weight-semibold); }
.text-bold { font-weight: var(--font-weight-bold); }
.text-medium { font-weight: var(--font-weight-medium); }

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

.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 === */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* === TEXT UTILITIES === */
.text-nowrap { white-space: nowrap; }
.text-truncate { 
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* === LINKS === */
a, .link {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
  cursor: pointer;
}

a:hover, .link:hover {
  color: var(--color-primary-hover);
  text-decoration: underline;
}

a:active, .link:active {
  color: var(--color-primary-active);
}

/* === RESPONSIVE TYPOGRAPHY === */
@media (max-width: 768px) {
  .heading-1, h1 { font-size: var(--font-size-2xl); }
  .heading-2, h2 { font-size: var(--font-size-xl); }
  .heading-3, h3 { font-size: var(--font-size-lg); }
}