/* Design Elevation - Typography System */
:root {
  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Heading Sizes per design spec */
  --font-h1: 48px;
  --font-h2: 36px;
  --font-h3: 24px;
  --font-h4: 20px;

  /* 8-point typographic scale */
  --font-xs: 12px;
  --font-sm: 14px;
  --font-base: 16px;
  --font-lg: 18px;
  --font-xl: 24px;
  --font-2xl: 32px;
  --font-3xl: 48px;
  --font-4xl: 64px;

  /* Line heights */
  --line-height-tight: 1.2;
  --line-height-normal: 1.6;
  --line-height-relaxed: 1.8;

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

  /* Font families */
  --font-heading: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

/* Typography base styles */
html {
  font-size: var(--font-base);
  line-height: var(--line-height-normal);
}

body {
  font-family: var(--font-body);
  font-size: var(--font-base);
  line-height: var(--line-height-normal);
  color: var(--text);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  font-weight: var(--font-weight-bold);
}

h1 { font-size: var(--font-h1); }
h2 { font-size: var(--font-h2); }
h3 { font-size: var(--font-h3); }
h4 { font-size: var(--font-h4); }
h5 { font-size: var(--font-lg); }
h6 { font-size: var(--font-base); }

/* Text gradients for key headlines */
.text-gradient {
  background: var(--accent-gradient-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Responsive typography */
@media (max-width: 768px) {
  h1 { font-size: var(--font-3xl); }
  h2 { font-size: var(--font-2xl); }
  h3 { font-size: var(--font-xl); }
}