/*
 * FlowDocs Typography System
 * Comprehensive typography utilities for consistent text styling
 * Version: 2.0 - Modern Inter Typography
 *
 * MIGRATION GUIDE:
 * - Replace .font-mono with semantic classes:
 *   - .data-id for shipment numbers, BOL, containers
 *   - .data-currency for financial amounts
 *   - .data-code for customer/vendor codes
 *   - .code-technical for charge codes (keeps monospace)
 */

/* ================================
 * FONT FAMILY UTILITIES
 * ================================ */

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

/*
 * .font-mono - UPDATED for modern appearance
 * Now uses Inter with tabular numerals instead of true monospace
 * This provides aligned numbers without the "developer tool" aesthetic
 * For actual code/technical display, use .code-block, .code-inline, or .code-technical
 */
.font-mono {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

/* Keep true monospace available when needed */
.font-mono-true {
  font-family: var(--font-mono);
}

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

/* ================================
 * FONT SIZE UTILITIES
 * ================================ */

.text-micro {
  font-size: var(--text-micro);
}

.text-xs {
  font-size: var(--text-xs);
}

.text-caption {
  font-size: var(--text-caption);
}

.text-sm {
  font-size: var(--text-sm);
}

.text-label {
  font-size: var(--text-label);
}

.text-base {
  font-size: var(--text-base);
}

.text-md {
  font-size: var(--text-md);
}

.text-lg {
  font-size: var(--text-lg);
}

.text-xl {
  font-size: var(--text-xl);
}

.text-2xl {
  font-size: var(--text-2xl);
}

.text-3xl {
  font-size: var(--text-3xl);
}

.text-4xl {
  font-size: var(--text-4xl);
}

.text-5xl {
  font-size: var(--text-5xl);
}

/* ================================
 * FONT WEIGHT UTILITIES
 * ================================ */

.font-light {
  font-weight: var(--font-light);
}

.font-normal {
  font-weight: var(--font-normal);
}

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

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

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

.font-extrabold {
  font-weight: var(--font-extrabold);
}

/* ================================
 * LINE HEIGHT UTILITIES
 * ================================ */

.leading-none {
  line-height: var(--leading-none);
}

.leading-tight {
  line-height: var(--leading-tight);
}

.leading-snug {
  line-height: var(--leading-snug);
}

.leading-normal {
  line-height: var(--leading-normal);
}

.leading-relaxed {
  line-height: var(--leading-relaxed);
}

.leading-loose {
  line-height: var(--leading-loose);
}

/* ================================
 * LETTER SPACING UTILITIES
 * ================================ */

.tracking-tight {
  letter-spacing: var(--tracking-tight);
}

.tracking-normal {
  letter-spacing: var(--tracking-normal);
}

.tracking-wide {
  letter-spacing: var(--tracking-wide);
}

.tracking-wider {
  letter-spacing: var(--tracking-wider);
}

.tracking-widest {
  letter-spacing: var(--tracking-widest);
}

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

.uppercase {
  text-transform: uppercase;
}

.lowercase {
  text-transform: lowercase;
}

.capitalize {
  text-transform: capitalize;
}

.normal-case {
  text-transform: none;
}

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

.text-primary {
  color: var(--pk-slate-dark);
}

.text-secondary {
  color: var(--pk-slate-lighter);
}

.text-muted {
  color: var(--pk-slate-lighter);
}

.text-accent {
  color: var(--pk-orange);
}

.text-success {
  color: var(--pk-success);
}

.text-error {
  color: var(--pk-error);
}

.text-warning {
  color: var(--pk-warning);
}

.text-info {
  color: var(--pk-info);
}

/* ================================
 * COMBINED TYPOGRAPHY CLASSES
 * ================================ */

/* Headings with consistent styling */
.heading-1 {
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  color: var(--pk-slate-dark);
}

.heading-2 {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  color: var(--pk-slate-dark);
}

.heading-3 {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
  line-height: var(--leading-snug);
  color: var(--pk-slate-dark);
}

.heading-4 {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  line-height: var(--leading-snug);
  color: var(--pk-slate-dark);
}

.heading-5 {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--font-medium);
  line-height: var(--leading-normal);
  color: var(--pk-slate-dark);
}

.heading-6 {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  line-height: var(--leading-normal);
  color: var(--pk-slate-dark);
}

/* Body text variations */
.body-large {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--font-normal);
  line-height: var(--leading-relaxed);
}

.body-normal {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  line-height: var(--leading-normal);
}

.body-small {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-normal);
  line-height: var(--leading-normal);
}

/* Technical/code text - Keep monospace for actual code */
.code-block {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  background-color: var(--pk-surface-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--pk-neutral-border);
}

.code-inline {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background-color: var(--pk-surface-3);
  padding: 0.125rem 0.375rem;
  border-radius: var(--radius-sm);
}

/* Technical charge codes - styled badge with monospace */
.code-technical {
  font-family: var(--font-mono);
  font-size: 0.875em;
  font-weight: var(--font-semibold);
  background-color: var(--pk-surface-3);
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-base);
  letter-spacing: 0.025em;
}

/* ================================
 * SEMANTIC DATA CLASSES (Modern)
 * Use these instead of .font-mono for data display
 * ================================ */

/* Shipment IDs, BOL numbers, Container numbers */
.data-id {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-weight: var(--font-semibold);
  letter-spacing: 0.01em;
}

.data-id-sm {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  letter-spacing: 0.01em;
}

.data-id-lg {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  letter-spacing: 0.01em;
}

/* Financial amounts - tabular for alignment */
.data-currency {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-weight: var(--font-semibold);
}

.data-currency-sm {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
}

.data-currency-lg {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
}

/* Customer codes, vendor codes - uppercase styling */
.data-code {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-weight: var(--font-semibold);
  letter-spacing: 0.02em;
}

.data-code-sm {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  letter-spacing: 0.02em;
}

/* Vessel names, voyage numbers */
.data-vessel {
  font-family: var(--font-data);
  font-weight: var(--font-semibold);
}

/* Numeric data with alignment */
.data-numeric {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-weight: var(--font-medium);
}

.data-numeric-bold {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-weight: var(--font-bold);
}

/* ================================
 * LEGACY MONO CLASSES (Deprecated)
 * These now use Inter with tabular-nums for backwards compatibility
 * Migrate to semantic classes above for new code
 * ================================ */

/* Legacy: Monospace for numbers/data - now uses modern styling */
.mono-data {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-weight: var(--font-semibold);
}

.mono-data-sm {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
}

.mono-data-md {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
}

.mono-data-lg {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
}

/* Labels with uppercase */
.label-text {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--pk-slate-lighter);
}

.label-text-md {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--pk-slate-lighter);
}

/* Helper text */
.help-text {
  font-size: var(--text-sm);
  color: var(--pk-slate-lighter);
  line-height: var(--leading-normal);
}

/* ================================
 * RESPONSIVE TYPOGRAPHY
 * ================================ */

@media (max-width: 768px) {
  .heading-1 {
    font-size: var(--text-3xl);
  }

  .heading-2 {
    font-size: var(--text-2xl);
  }

  .heading-3 {
    font-size: var(--text-xl);
  }

  .body-large {
    font-size: var(--text-base);
  }
}