/* Typography styles */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600&display=swap');

/* Typography Scale Variables */
:root {
  /* Font sizes using fluid typography */
  --font-size-xs: clamp(0.75rem, 0.5vw + 0.65rem, 0.875rem);     /* 12-14px */
  --font-size-sm: clamp(0.875rem, 0.75vw + 0.75rem, 1rem);       /* 14-16px */
  --font-size-base: clamp(1rem, 1vw + 0.75rem, 1.125rem);        /* 16-18px */
  --font-size-lg: clamp(1.125rem, 1.5vw + 0.75rem, 1.375rem);    /* 18-22px */
  --font-size-xl: clamp(1.25rem, 2vw + 0.75rem, 1.75rem);        /* 20-28px */
  --font-size-2xl: clamp(1.5rem, 2.5vw + 1rem, 2.25rem);         /* 24-36px */
  --font-size-3xl: clamp(2rem, 3vw + 1rem, 3rem);                /* 32-48px */
  --font-size-4xl: clamp(2.5rem, 4vw + 1rem, 4rem);              /* 40-64px */
  --font-size-5xl: clamp(3rem, 5vw + 1rem, 4.5rem);              /* 48-72px */
  --font-size-6xl: clamp(3.5rem, 6vw + 1rem, 5.5rem);            /* 56-88px */

  /* Line heights */
  --line-height-tight: 1.15;
  --line-height-snug: 1.25;
  --line-height-normal: 1.4;
  --line-height-relaxed: 1.5;
  --line-height-loose: 1.6;

  /* Letter spacing */
  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.025em;

  /* Font weights */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  /* Spacing scale */
  --space-xs: clamp(0.5rem, 1vw, 0.75rem);      /* 8-12px */
  --space-sm: clamp(0.75rem, 1.5vw, 1rem);      /* 12-16px */
  --space-md: clamp(1rem, 2vw, 1.5rem);         /* 16-24px */
  --space-lg: clamp(1.5rem, 3vw, 2rem);         /* 24-32px */
  --space-xl: clamp(2rem, 4vw, 3rem);           /* 32-48px */
  --space-2xl: clamp(3rem, 5vw, 4rem);          /* 48-64px */
  --space-3xl: clamp(4rem, 6vw, 5rem);          /* 64-80px */
  --space-4xl: clamp(5rem, 8vw, 6rem);          /* 80-96px */
}

/* Base typography */
h1, h2, h3, h4, h5, h6, p, span, div {
  font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Heading styles */
h1 {
  font-size: var(--font-size-6xl);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  margin: 0 0 var(--space-2xl);
  max-width: 600px;
}

h2 {
  font-size: var(--font-size-5xl);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  margin: 0 0 var(--space-xl);
  color: white;
}

h3 {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-snug);
  letter-spacing: var(--letter-spacing-normal);
  margin: 0 0 var(--space-lg);
}

h4 {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-snug);
  letter-spacing: var(--letter-spacing-normal);
  margin: 0 0 var(--space-md);
}

h5 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-snug);
  letter-spacing: var(--letter-spacing-normal);
  margin: 0 0 var(--space-md);
}

h6 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-snug);
  letter-spacing: var(--letter-spacing-wide);
  margin: 0 0 var(--space-sm);
  text-transform: uppercase;
}

/* Body text */
p {
  font-size: var(--font-size-base);
  line-height: var(--line-height-loose);
  color: var(--color-text);
  margin: 0 0 var(--space-md);
}

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

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

/* Font weight utilities */
.font-light { font-weight: var(--font-weight-light); }
.font-normal { font-weight: var(--font-weight-normal); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }

/* Specialized text styles */
.greeting {
  font-size: var(--font-size-xl);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-xl);
  font-weight: var(--font-weight-normal);
  letter-spacing: var(--letter-spacing-tight);
  line-height: var(--line-height-relaxed);
}

.hero-subtitle {
  font-size: var(--font-size-xl);
  margin-bottom: var(--space-xl);
  color: rgba(255, 255, 255, 0.9);
  line-height: var(--line-height-relaxed);
  font-weight: var(--font-weight-normal);
}

.section-subtitle {
  font-size: var(--font-size-lg);
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: var(--space-xl);
  line-height: var(--line-height-relaxed);
  font-weight: var(--font-weight-normal);
}

.calculator-subtitle {
  font-size: var(--font-size-xl);
  color: rgba(255, 255, 255, 0.7);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-2xl);
}

.comparison-subtitle {
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: var(--space-2xl);
  font-size: var(--font-size-xl);
  line-height: var(--line-height-relaxed);
}

.amount {
  color: var(--color-error);
  font-weight: var(--font-weight-normal);
  display: inline;
}

.impact-text {
  font-size: var(--font-size-xl);
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-xl);
  color: var(--color-text);
  max-width: 700px;
  line-height: var(--line-height-relaxed);
}

.impact-text strong {
  font-weight: var(--font-weight-medium);
}

.deployment-text {
  font-size: var(--font-size-lg);
  color: white;
  padding: var(--space-md) var(--space-lg);
  background-color: var(--color-success);
  border-radius: 0;
  display: inline-block;
  font-weight: var(--font-weight-normal);
  margin-top: var(--space-2xl);
  line-height: var(--line-height-normal);
}

/* Remove default margins from last children */
*:last-child {
  margin-bottom: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  h1 { 
    max-width: none; 
    margin-bottom: var(--space-xl);
  }
  
  .greeting { 
    margin-bottom: var(--space-lg); 
  }
  
  .impact-text { 
    margin-top: var(--space-xl); 
    margin-bottom: var(--space-lg); 
  }
  
  .deployment-text { 
    padding: var(--space-sm) var(--space-md); 
    margin-top: var(--space-xl); 
  }
}