/* =============================================================================
   TYPOGRAPHY SYSTEM
   ============================================================================= */

/* Typography Variables */
:root {
  /* Font Families */
  --font-mono: 'JetBrains Mono', 'SF Mono', Monaco, 'Inconsolata', 'Roboto Mono', 'Source Code Pro', monospace;
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  
  /* Font Sizes */
  --text-xs: 11px;      /* Timestamps, fine print */
  --text-sm: 12px;      /* Labels, captions */
  --text-base: 13px;    /* Body text, buttons */
  --text-md: 14px;      /* Data values, inputs */
  --text-lg: 16px;      /* Main headings */
  --text-xl: 18px;      /* Section titles */
  --text-2xl: 24px;     /* Page titles */
  
  /* Font Weights */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  
  /* Line Heights */
  --leading-tight: 1.2;
  --leading-normal: 1.4;
  --leading-relaxed: 1.6;
}

/* Material Icons Utility */
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 16px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

.material-icons.md-16 { font-size: 16px; }
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-20 { font-size: 20px; }
.material-icons.md-24 { font-size: 24px; }