/* ==========================================================================
   serviceR Typography System
   ========================================================================== */

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

:root {
  /* ---------------------------------------------------------
     FONT FAMILIES
     --------------------------------------------------------- */
  /* Outfit: A geometric, highly modern sans-serif. Perfect for tech startup headings. */
  --font-heading: 'Outfit', sans-serif;
  
  /* Inter: Incredibly crisp and legible. The industry standard for UI and body text. */
  --font-body: 'Inter', sans-serif;
  
  /* JetBrains Mono: Clean, developer-focused monospace for code blocks or technical accents. */
  --font-mono: 'JetBrains Mono', monospace;

  /* ---------------------------------------------------------
     FONT WEIGHTS
     --------------------------------------------------------- */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ---------------------------------------------------------
     LINE HEIGHTS
     --------------------------------------------------------- */
  --line-height-tight: 1.1;
  --line-height-heading: 1.25;
  --line-height-body: 1.6;
  --line-height-relaxed: 1.75;

  /* ---------------------------------------------------------
     TYPE SCALE (Base: 16px / Ratio: 1.25 Major Third)
     --------------------------------------------------------- */
  --font-size-caption: 0.75rem;   /* 12px */
  --font-size-small: 0.875rem;    /* 14px */
  --font-size-body: 1rem;         /* 16px */
  --font-size-h6: 1rem;           /* 16px (Same size as body, differentiated by weight/font) */
  --font-size-h5: 1.25rem;        /* 20px */
  --font-size-h4: 1.5rem;         /* 24px */
  --font-size-h3: 1.875rem;       /* 30px */
  --font-size-h2: 2.25rem;        /* 36px */
  --font-size-h1: 3rem;           /* 48px */
  --font-size-display: 4.5rem;    /* 72px (For massive hero sections) */
}

/* ==========================================================================
   TYPOGRAPHY BASE STYLES & UTILITIES
   ========================================================================== */

/* Apply base font to the document */
body {
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
  /* Uses the colors defined in colors.css */
  color: var(--color-text-primary, #0F172A);
  background-color: var(--color-bg-primary, #FFFFFF);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-heading);
  margin-top: 0;
  margin-bottom: 0.5em;
  color: var(--color-text-primary, #0F172A);
}

h1, .h1 {
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: -0.02em; /* Tighten large text slightly */
}

h2, .h2 {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  letter-spacing: -0.01em;
}

h3, .h3 {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-heading);
}

h4, .h4 {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-heading);
}

h5, .h5 {
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-heading);
}

h6, .h6 {
  font-size: var(--font-size-h6);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  letter-spacing: 0.05em;
  text-transform: uppercase; /* Makes H6 great for section labels */
}

/* Specialized Text */
small, .text-small {
  font-size: var(--font-size-small);
  color: var(--color-text-secondary);
}

.text-caption {
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

pre, code, .font-mono {
  font-family: var(--font-mono);
  font-size: 0.9em; /* Monospace usually needs a slight optical scale-down */
}