/**
 * XEVOTECH TYPOGRAPHY SYSTEM
 * Three-font stack: Syne (display), Inter (body), JetBrains Mono (mono)
 * Version: 1.0.0
 */

/* ============================================
   FONT IMPORTS
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ============================================
   CSS CUSTOM PROPERTIES
   ============================================ */
:root {
  /* Font Families */
  --font-display: 'Syne', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  
  /* Type Scale - rem based (1rem = 16px) */
  --text-xs: 0.75rem;      /* 12px */
  --text-sm: 0.875rem;     /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg: 1.125rem;     /* 18px */
  --text-xl: 1.25rem;      /* 20px */
  --text-2xl: 1.5rem;      /* 24px */
  --text-3xl: 1.875rem;    /* 30px */
  --text-4xl: 2.25rem;     /* 36px */
  --text-5xl: 3rem;        /* 48px */
  --text-6xl: 3.75rem;     /* 60px */
  --text-7xl: 4.5rem;      /* 72px */
  --text-8xl: 6rem;        /* 96px */
  --text-9xl: 8rem;        /* 128px */
  
  /* Line Heights */
  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 1.75;
  
  /* Letter Spacing */
  --tracking-tighter: -0.05em;
  --tracking-tight: -0.03em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;
  --tracking-mono: 0.02em;
}

/* ============================================
   DISPLAY TYPOGRAPHY (Syne)
   Used for: H1, hero text, section titles
   ============================================ */
.font-display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}

/* Hero Headlines */
.text-hero {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3rem, 6vw, 5.5rem);
  letter-spacing: -0.04em;
  line-height: 1.1;
}

/* Section Titles */
.text-section {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-4xl);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}

/* Card Titles */
.text-card-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xl);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
}

/* ============================================
   BODY TYPOGRAPHY (Inter)
   Used for: paragraphs, descriptions, labels
   ============================================ */
.font-body {
  font-family: var(--font-body);
  font-weight: 400;
  line-height: var(--leading-loose);
}

/* Body Large - Lead paragraphs */
.text-body-lg {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: 1.7;
  max-width: 65ch;
}

/* Body Default */
.text-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: 1.7;
  max-width: 65ch;
}

/* Body Small - Captions, metadata */
.text-body-sm {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

/* Labels & UI Text */
.text-label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
}

/* ============================================
   MONO TYPOGRAPHY (JetBrains Mono)
   Used for: metrics, code, stat labels, tags
   ============================================ */
.font-mono {
  font-family: var(--font-mono);
  font-weight: 400;
  letter-spacing: var(--tracking-mono);
  line-height: var(--leading-normal);
}

/* Mono Tags - Category labels, eyebrow text */
.text-mono-tag {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Mono Stats - Numbers, metrics */
.text-mono-stat {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-mono);
}

/* Mono Terminal - Code blocks, terminal output */
.text-mono-terminal {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--text-sm);
  line-height: 1.6;
}

/* ============================================
   HEADING SCALE
   ============================================ */
h1, .h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-5xl);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-4xl);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-3xl);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
}

h4, .h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-2xl);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
}

h5, .h5 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-xl);
  letter-spacing: var(--tracking-normal);
  line-height: var(--leading-snug);
}

h6, .h6 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-normal);
  line-height: var(--leading-snug);
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.font-thin { font-weight: 100; }
.font-light { font-weight: 300; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }

.tracking-tighter { letter-spacing: -0.05em; }
.tracking-tight { letter-spacing: -0.03em; }
.tracking-normal { letter-spacing: 0; }
.tracking-wide { letter-spacing: 0.025em; }
.tracking-wider { letter-spacing: 0.05em; }

.leading-none { line-height: 1; }
.leading-tight { line-height: 1.25; }
.leading-snug { line-height: 1.375; }
.leading-normal { line-height: 1.5; }
.leading-relaxed { line-height: 1.625; }
.leading-loose { line-height: 1.75; }

/* Text truncation */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}