/* public/css/fonts.css */
/* Local elegant fonts with optimized loading */

/* Preload and define local font files */
@font-face {
  font-family: 'Amatic SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/amatic-sc-v27-latin_latin-ext-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Amatic SC';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/amatic-sc-v27-latin_latin-ext-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/cinzel-v25-latin_latin-ext-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/cinzel-v25-latin_latin-ext-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/cinzel-v25-latin_latin-ext-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/cinzel-v25-latin_latin-ext-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../assets/fonts/cinzel-v25-latin_latin-ext-800.woff2') format('woff2');
}

@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../assets/fonts/cinzel-v25-latin_latin-ext-900.woff2') format('woff2');
}

:root {
  /* Elegant font families */
  --font-primary: 'Amatic SC', sans-serif;
  --font-accent: 'Cinzel', serif;

  /* Font weights - now with full range available locally */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;
  --weight-black: 900;

  /* Font sizes */
  --size-xs: 0.9rem;
  --size-sm: 1.1rem;
  --size-md: 1.4rem;
  --size-lg: 1.8rem;
  --size-xl: 2.4rem;
  --size-xxl: 3.5rem;
  --size-title: clamp(3.5rem, 8vw, 7rem);
}

/* Game Title */
.game-title {
  font-family: var(--font-accent);
  font-weight: var(--weight-bold);
  font-size: var(--size-title);
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.4);
}

/* Loading Screen Title */
.loading-title {
  font-family: var(--font-accent);
  font-weight: var(--weight-bold);
  font-size: var(--size-title);
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.4);
}

/* Menu Titles */
.menu-title {
  font-family: var(--font-accent);
  font-weight: var(--weight-bold);
  font-size: var(--size-xl);
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* Tutorial Title */
#tutorial-title {
  font-family: var(--font-accent);
  font-weight: var(--weight-semibold);
  font-size: var(--size-xl);
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* Game Subtitle */
.game-subtitle {
  font-family: var(--font-primary);
  font-weight: var(--weight-regular);
  font-size: var(--size-md);
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
}

/* Keeper Titles */
.keeper-title {
  font-family: var(--font-accent);
  font-weight: var(--weight-semibold);
  font-size: var(--size-lg);
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.keeper-subtitle {
  font-family: var(--font-primary);
  font-weight: var(--weight-regular);
  font-size: var(--size-sm);
  color: rgba(255, 255, 255, 0.8);
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
}

/* Menu Items */
.menu-button {
  font-family: var(--font-primary);
  font-weight: var(--weight-bold);
  font-size: var(--size-lg);
  letter-spacing: 0.03em;
  transition: all 0.3s ease;
}

.menu-button:hover {
  transform: scale(1.05);
}

/* Game UI Elements */
.score-display,
.timer-display,
.corruption-meter-label {
  font-family: var(--font-primary);
  font-weight: var(--weight-bold);
  font-size: var(--size-md);
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
}

/* Level and Story Text */
.level-name {
  font-family: var(--font-accent);
  font-weight: var(--weight-semibold);
  font-size: var(--size-xl);
  color: rgba(255, 255, 255, 0.8);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  animation: fadeInOut 4s ease-in-out;
}

.story-text {
  font-family: var(--font-primary);
  font-weight: var(--weight-regular);
  font-size: var(--size-md);
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.85);
}

/* Number Displays */
.score-number,
.boid-count,
.essence-count,
.timer-number,
.level-number,
.percentage-display,
.stats-number,
.progress-number {
  font-family: var(--font-primary);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
}

/* Specific number styling for UI elements */
.corruption-percentage,
.essence-percentage,
.score-value,
.time-value {
  font-family: var(--font-primary);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.95);
}

/* Essence label styling */
.essence-label {
  font-family: var(--font-primary);
  font-weight: var(--weight-regular);
  font-size: var(--size-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.7);
}

/* Completion screen values */
#complete-boids,
#complete-time,
#complete-corruption,
#complete-score {
  font-family: var(--font-primary);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
  font-size: var(--size-md);
}

/* Default font styling for all game UI elements */
.game-ui,
.stats-display,
.hud-element,
[id*="score"],
[id*="count"],
[id*="timer"],
[id*="level"],
[class*="number"],
[class*="count"] {
  font-family: var(--font-primary);
  font-variant-numeric: tabular-nums;
}

/* Force font loading for consistent rendering */
body {
  font-display: swap;
}

/* Button Text */
.button-text {
  font-family: var(--font-primary);
  font-weight: var(--weight-bold);
  letter-spacing: 0.02em;
}

/* Responsive Font Sizing */
@media (max-width: 768px) {
  :root {
    --size-xs: 0.8rem;
    --size-sm: 1rem;
    --size-md: 1.2rem;
    --size-lg: 1.5rem;
    --size-xl: 2rem;
    --size-xxl: 2.8rem;
  }
}