/* ==================== FLOWCAPTAIN TYPOGRAPHY SYSTEM ==================== */
/* Centralized font definitions for consistent typography */

/* ==================== FONT IMPORTS ==================== */
/* Google Fonts - Optimized loading */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&family=Source+Sans+Pro:wght@300;400;500;600;700&display=swap');

/* ==================== FONT VARIABLES ==================== */
:root {
  /* ==================== FONT FAMILIES ==================== */
  --fc-font-primary: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --fc-font-secondary: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --fc-font-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --fc-font-mono: 'Monaco', 'Menlo', 'SF Mono', 'Courier New', Consolas, monospace;
  
  /* ==================== FONT WEIGHTS ==================== */
  --fc-weight-light: 300;
  --fc-weight-normal: 400;
  --fc-weight-medium: 500;
  --fc-weight-semibold: 600;
  --fc-weight-bold: 700;
  --fc-weight-extrabold: 800;
  --fc-weight-black: 900;
  
  /* ==================== FONT SIZES ==================== */
  /* Base scale (16px = 1rem) */
  --fc-text-xs: 0.75rem;    /* 12px */
  --fc-text-sm: 0.875rem;   /* 14px */
  --fc-text-base: 1rem;     /* 16px */
  --fc-text-lg: 1.125rem;   /* 18px */
  --fc-text-xl: 1.25rem;    /* 20px */
  --fc-text-2xl: 1.5rem;    /* 24px */
  --fc-text-3xl: 1.875rem;  /* 30px */
  --fc-text-4xl: 2.25rem;   /* 36px */
  --fc-text-5xl: 3rem;      /* 48px */
  --fc-text-6xl: 3.75rem;   /* 60px */
  
  /* ==================== LINE HEIGHTS ==================== */
  --fc-leading-tight: 1.25;
  --fc-leading-snug: 1.375;
  --fc-leading-normal: 1.5;
  --fc-leading-relaxed: 1.625;
  --fc-leading-loose: 2;
  
  /* ==================== LETTER SPACING ==================== */
  --fc-tracking-tighter: -0.05em;
  --fc-tracking-tight: -0.025em;
  --fc-tracking-normal: 0em;
  --fc-tracking-wide: 0.025em;
  --fc-tracking-wider: 0.05em;
  --fc-tracking-widest: 0.1em;
}

/* ==================== BASE TYPOGRAPHY ==================== */
/* Set default font for the entire document */
html {
  font-family: var(--fc-font-system);
}

body {
  font-family: var(--fc-font-secondary);
  font-weight: var(--fc-weight-normal);
  font-size: var(--fc-text-base);
  line-height: var(--fc-leading-normal);
  letter-spacing: var(--fc-tracking-normal);
}

/* ==================== HEADING STYLES ==================== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--fc-font-primary);
  font-weight: var(--fc-weight-bold);
  line-height: var(--fc-leading-tight);
  letter-spacing: var(--fc-tracking-tight);
  margin: 0;
}

h1 {
  font-size: var(--fc-text-5xl);
  font-weight: var(--fc-weight-black);
}

h2 {
  font-size: var(--fc-text-4xl);
  font-weight: var(--fc-weight-extrabold);
}

h3 {
  font-size: var(--fc-text-3xl);
  font-weight: var(--fc-weight-bold);
}

h4 {
  font-size: var(--fc-text-2xl);
  font-weight: var(--fc-weight-semibold);
}

h5 {
  font-size: var(--fc-text-xl);
  font-weight: var(--fc-weight-semibold);
}

h6 {
  font-size: var(--fc-text-lg);
  font-weight: var(--fc-weight-medium);
}

/* ==================== TEXT ELEMENT STYLES ==================== */
p {
  font-family: var(--fc-font-secondary);
  font-size: var(--fc-text-base);
  font-weight: var(--fc-weight-normal);
  line-height: var(--fc-leading-relaxed);
  margin: 0;
}

/* Small text */
small {
  font-size: var(--fc-text-sm);
  font-weight: var(--fc-weight-normal);
}

/* Code and pre */
code, pre {
  font-family: var(--fc-font-mono);
  font-size: var(--fc-text-sm);
}

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

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

/* ==================== UTILITY CLASSES ==================== */
/* Font families */
.font-primary { font-family: var(--fc-font-primary); }
.font-secondary { font-family: var(--fc-font-secondary); }
.font-system { font-family: var(--fc-font-system); }
.font-mono { font-family: var(--fc-font-mono); }

/* Font weights */
.font-light { font-weight: var(--fc-weight-light); }
.font-normal { font-weight: var(--fc-weight-normal); }
.font-medium { font-weight: var(--fc-weight-medium); }
.font-semibold { font-weight: var(--fc-weight-semibold); }
.font-bold { font-weight: var(--fc-weight-bold); }
.font-extrabold { font-weight: var(--fc-weight-extrabold); }
.font-black { font-weight: var(--fc-weight-black); }

/* Font sizes */
.text-xs { font-size: var(--fc-text-xs); }
.text-sm { font-size: var(--fc-text-sm); }
.text-base { font-size: var(--fc-text-base); }
.text-lg { font-size: var(--fc-text-lg); }
.text-xl { font-size: var(--fc-text-xl); }
.text-2xl { font-size: var(--fc-text-2xl); }
.text-3xl { font-size: var(--fc-text-3xl); }
.text-4xl { font-size: var(--fc-text-4xl); }
.text-5xl { font-size: var(--fc-text-5xl); }
.text-6xl { font-size: var(--fc-text-6xl); }

/* Line heights */
.leading-tight { line-height: var(--fc-leading-tight); }
.leading-snug { line-height: var(--fc-leading-snug); }
.leading-normal { line-height: var(--fc-leading-normal); }
.leading-relaxed { line-height: var(--fc-leading-relaxed); }
.leading-loose { line-height: var(--fc-leading-loose); }

/* Letter spacing */
.tracking-tighter { letter-spacing: var(--fc-tracking-tighter); }
.tracking-tight { letter-spacing: var(--fc-tracking-tight); }
.tracking-normal { letter-spacing: var(--fc-tracking-normal); }
.tracking-wide { letter-spacing: var(--fc-tracking-wide); }
.tracking-wider { letter-spacing: var(--fc-tracking-wider); }
.tracking-widest { letter-spacing: var(--fc-tracking-widest); }

/* Text alignment */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }

/* Text decoration */
.underline { text-decoration: underline; }
.no-underline { text-decoration: none; }

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

/* ==================== RESPONSIVE TYPOGRAPHY ==================== */
/* Mobile adjustments */
@media (max-width: 768px) {
  :root {
    --fc-text-5xl: 2.5rem;    /* 40px */
    --fc-text-4xl: 2rem;      /* 32px */
    --fc-text-3xl: 1.75rem;   /* 28px */
  }
  
  body {
    font-size: var(--fc-text-sm);
  }
}

/* Large screen enhancements */
@media (min-width: 1280px) {
  :root {
    --fc-text-6xl: 4rem;      /* 64px */
    --fc-text-5xl: 3.5rem;    /* 56px */
  }
}