/* ==========================================================================
   Design System: Typography
   ==========================================================================

   This file establishes the typography scale with consistent font families,
   sizes, weights, and line heights. It defines the heading hierarchy and
   body text styles for the Mission Control application.

   Usage:
   - Use CSS custom properties (--font-*, --text-*, --leading-*, --tracking-*)
   - Apply utility classes (.text-*, .font-*, .leading-*, .tracking-*)
   - Use semantic heading classes (.heading-1, .heading-2, etc.)

   ========================================================================== */

/* ==========================================================================
   CSS Custom Properties (Design Tokens)
   ========================================================================== */

:root {
  /* Font Families
     -------------------------------------------------------------------------- */
  --font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --font-family-serif: Georgia, Cambria, "Times New Roman", Times, serif;
  --font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  /* Font Sizes (modular scale based on 1rem = 16px, ratio ~1.25)
     -------------------------------------------------------------------------- */
  --text-xs: 0.75rem;      /* 12px */
  --text-sm: 0.875rem;     /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-md: 1.0625rem;    /* 17px */
  --text-lg: 1.125rem;     /* 18px */
  --text-xl: 1.25rem;      /* 20px */
  --text-2xl: 1.5rem;      /* 24px */
  --text-3xl: 1.75rem;     /* 28px */
  --text-4xl: 2rem;        /* 32px */
  --text-5xl: 2.5rem;      /* 40px */
  --text-6xl: 3rem;        /* 48px */

  /* Font Weights
     -------------------------------------------------------------------------- */
  --font-thin: 100;
  --font-extralight: 200;
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;
  --font-black: 900;

  /* Line Heights
     -------------------------------------------------------------------------- */
  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;

  /* Letter Spacing (Tracking)
     -------------------------------------------------------------------------- */
  --tracking-tighter: -0.05em;
  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;

  /* Text Colors
     -------------------------------------------------------------------------- */
  --text-primary: #1a1a2e;
  --text-secondary: #374151;
  --text-tertiary: #6b7280;
  --text-muted: #9ca3af;
  --text-inverse: #ffffff;
  --text-link: #6366f1;
  --text-link-hover: #4f46e5;
  --text-error: #991b1b;
  --text-success: #065f46;
  --text-warning: #92400e;

  /* Heading Defaults (composite tokens)
     -------------------------------------------------------------------------- */
  --heading-font-family: var(--font-family-sans);
  --heading-font-weight: var(--font-semibold);
  --heading-line-height: var(--leading-tight);
  --heading-letter-spacing: var(--tracking-tight);
  --heading-color: var(--text-primary);

  /* Body Text Defaults
     -------------------------------------------------------------------------- */
  --body-font-family: var(--font-family-sans);
  --body-font-weight: var(--font-normal);
  --body-font-size: var(--text-base);
  --body-line-height: var(--leading-normal);
  --body-letter-spacing: var(--tracking-normal);
  --body-color: var(--text-secondary);
}

/* ==========================================================================
   Base Typography Styles
   ========================================================================== */

/* Apply base typography to body */
body {
  font-family: var(--body-font-family);
  font-size: var(--body-font-size);
  font-weight: var(--body-font-weight);
  line-height: var(--body-line-height);
  letter-spacing: var(--body-letter-spacing);
  color: var(--body-color);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   Heading Hierarchy
   ========================================================================== */

/* Base heading styles */
h1, h2, h3, h4, h5, h6,
.heading-1, .heading-2, .heading-3, .heading-4, .heading-5, .heading-6 {
  font-family: var(--heading-font-family);
  font-weight: var(--heading-font-weight);
  line-height: var(--heading-line-height);
  letter-spacing: var(--heading-letter-spacing);
  color: var(--heading-color);
  margin-top: 0;
  margin-bottom: 0.5em;
}

/* H1 - Page titles, hero headings */
h1, .heading-1 {
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
}

/* H2 - Section headings */
h2, .heading-2 {
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
}

/* H3 - Subsection headings */
h3, .heading-3 {
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
}

/* H4 - Card headings, form section titles */
h4, .heading-4 {
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
}

/* H5 - Small headings, labels */
h5, .heading-5 {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

/* H6 - Smallest headings, captions */
h6, .heading-6 {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

/* ==========================================================================
   Body Text Styles
   ========================================================================== */

/* Paragraph styles */
p {
  margin-top: 0;
  margin-bottom: 1em;
}

/* Lead paragraph - intro text, larger body copy */
.text-lead {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}

/* Standard body text */
.text-body {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
}

/* Small body text - secondary content, captions */
.text-small {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-tertiary);
}

/* Extra small text - timestamps, metadata */
.text-xs {
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--text-muted);
}

/* ==========================================================================
   Font Size Utilities
   ========================================================================== */

.text-size-xs { font-size: var(--text-xs); }
.text-size-sm { font-size: var(--text-sm); }
.text-size-base { font-size: var(--text-base); }
.text-size-md { font-size: var(--text-md); }
.text-size-lg { font-size: var(--text-lg); }
.text-size-xl { font-size: var(--text-xl); }
.text-size-2xl { font-size: var(--text-2xl); }
.text-size-3xl { font-size: var(--text-3xl); }
.text-size-4xl { font-size: var(--text-4xl); }
.text-size-5xl { font-size: var(--text-5xl); }
.text-size-6xl { font-size: var(--text-6xl); }

/* ==========================================================================
   Font Weight Utilities
   ========================================================================== */

.font-thin { font-weight: var(--font-thin); }
.font-extralight { font-weight: var(--font-extralight); }
.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); }
.font-black { font-weight: var(--font-black); }

/* ==========================================================================
   Font Family Utilities
   ========================================================================== */

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

/* ==========================================================================
   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-tighter { letter-spacing: var(--tracking-tighter); }
.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 Color Utilities
   ========================================================================== */

.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.text-muted { color: var(--text-muted); }
.text-inverse { color: var(--text-inverse); }
.text-link { color: var(--text-link); }
.text-error { color: var(--text-error); }
.text-success { color: var(--text-success); }
.text-warning { color: var(--text-warning); }

/* ==========================================================================
   Text Alignment Utilities
   ========================================================================== */

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

/* ==========================================================================
   Text Transform Utilities
   ========================================================================== */

.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
.normal-case { text-transform: none; }

/* ==========================================================================
   Text Decoration Utilities
   ========================================================================== */

.underline { text-decoration: underline; }
.line-through { text-decoration: line-through; }
.no-underline { text-decoration: none; }

/* ==========================================================================
   Text Overflow Utilities
   ========================================================================== */

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

.text-wrap { white-space: normal; }
.text-nowrap { white-space: nowrap; }
.break-words { word-wrap: break-word; overflow-wrap: break-word; }
.break-all { word-break: break-all; }

/* ==========================================================================
   Special Text Styles
   ========================================================================== */

/* Code/Monospace text */
code, .code {
  font-family: var(--font-family-mono);
  font-size: 0.875em;
  background-color: #f3f4f6;
  padding: 0.125em 0.375em;
  border-radius: 4px;
}

/* Preformatted text */
pre {
  font-family: var(--font-family-mono);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  background-color: #f3f4f6;
  padding: 1rem;
  border-radius: 8px;
  overflow-x: auto;
}

pre code {
  background: none;
  padding: 0;
}

/* Blockquote */
blockquote {
  font-size: var(--text-lg);
  font-style: italic;
  color: var(--text-tertiary);
  border-left: 4px solid #e5e7eb;
  padding-left: 1rem;
  margin: 1.5rem 0;
}

/* Lists */
ul, ol {
  padding-left: 1.5rem;
  margin-top: 0;
  margin-bottom: 1rem;
}

li {
  margin-bottom: 0.25em;
}

/* Links */
a {
  color: var(--text-link);
  text-decoration: none;
  transition: color 0.15s ease;
}

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

/* Strong/Bold */
strong, b, .font-bold {
  font-weight: var(--font-bold);
}

/* Emphasis/Italic */
em, i {
  font-style: italic;
}

/* Small text element */
small {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

/* Mark/Highlight */
mark {
  background-color: #fef3c7;
  padding: 0.125em 0.25em;
  border-radius: 2px;
}

/* ==========================================================================
   Label & Caption Styles
   ========================================================================== */

/* Form labels */
.label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
  margin-bottom: 0.375rem;
}

/* Captions and helper text */
.caption {
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: var(--leading-normal);
}

/* Hint text (form descriptions) */
.hint {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  margin-top: 0.25rem;
}

/* ==========================================================================
   Display Text (Hero/Marketing)
   ========================================================================== */

.display-1 {
  font-size: var(--text-6xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-tighter);
  color: var(--heading-color);
}

.display-2 {
  font-size: var(--text-5xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
  color: var(--heading-color);
}

.display-3 {
  font-size: var(--text-4xl);
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--heading-color);
}

/* ==========================================================================
   Responsive Typography
   ========================================================================== */

@media (max-width: 768px) {
  :root {
    /* Scale down heading sizes on mobile */
    --text-3xl: 1.5rem;   /* 24px instead of 28px */
    --text-4xl: 1.75rem;  /* 28px instead of 32px */
    --text-5xl: 2rem;     /* 32px instead of 40px */
    --text-6xl: 2.5rem;   /* 40px instead of 48px */
  }

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

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

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

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

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

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
  body {
    font-size: 12pt;
    line-height: 1.5;
    color: #000;
  }

  h1, h2, h3, h4, h5, h6 {
    color: #000;
    page-break-after: avoid;
  }

  a {
    color: #000;
    text-decoration: underline;
  }

  pre, blockquote {
    page-break-inside: avoid;
  }
}