/* Typography System for BioSeekers NASA */

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

/* Typography Scale */
:root {
  /* Font Families */
  --font-primary: 'Exo 2', 'Orbitron', monospace;
  --font-secondary: 'Source Sans Pro', 'Inter', sans-serif;

  /* Font Sizes */
  --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 */

  /* Line Heights */
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;

  /* Font Weights */
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;
  --font-black: 900;
}

/* Base Typography */
body {
  font-family: var(--font-secondary);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  font-weight: var(--font-normal);
}

/* Ensure consistent font sizes across all pages */
html {
  font-size: 16px; /* Base font size */
}

/* Force consistent font family across all elements */
*, *::before, *::after {
  font-family: var(--font-secondary);
}

/* Override specific elements that need primary font */
h1, h2, h3, h4, h5, h6,
.space-title, .space-subtitle,
.font-primary {
  font-family: var(--font-primary);
}

/* Headings */
h1 {
  font-family: var(--font-primary);
  font-weight: var(--font-black);
  line-height: var(--leading-tight);
  letter-spacing: 0.05em;
}

h2 {
  font-family: var(--font-primary);
  font-weight: var(--font-bold);
  line-height: var(--leading-snug);
  letter-spacing: 0.025em;
}

h3 {
  font-family: var(--font-primary);
  font-weight: var(--font-semibold);
  line-height: var(--leading-snug);
}

h4, h5, h6 {
  font-family: var(--font-secondary);
  font-weight: var(--font-semibold);
  line-height: var(--leading-snug);
}

/* Text Elements */
p {
  font-family: var(--font-secondary);
  line-height: var(--leading-relaxed);
}

/* Space-themed text styles */
.space-title {
  font-family: var(--font-primary);
  font-weight: var(--font-black);
  font-size: var(--text-8xl);
  line-height: var(--leading-tight);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.space-subtitle {
  font-family: var(--font-primary);
  font-weight: var(--font-bold);
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  letter-spacing: 0.05em;
}

.space-body {
  font-family: var(--font-secondary);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  font-weight: var(--font-normal);
}

/* NASA-style labels */
.nasa-label {
  font-family: var(--font-primary);
  font-weight: var(--font-bold);
  font-size: var(--text-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Mission text */
.mission-text {
  font-family: var(--font-secondary);
  font-size: var(--text-xl);
  line-height: var(--leading-relaxed);
  font-weight: var(--font-normal);
}

/* Responsive Typography */
@media (max-width: 768px) {
  .space-title {
    font-size: var(--text-5xl);
  }

  .space-subtitle {
    font-size: var(--text-2xl);
  }

  .space-body {
    font-size: var(--text-base);
  }
}