/* Shared font definitions and typographic scale */
/* NOTE: Fonts are now loaded via <link rel="stylesheet"> and <link rel="preload"> in HTML head */
/* This prevents FOUT/FOIT by loading fonts in parallel with HTML parsing */

@font-face {
  font-family: 'electro_wave_vol_2';
  src: url('./assets/ElectroWaveVol2.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'pixel_font';
  src: url('./assets/10Pixel.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'cocogoose';
  src: url('./assets/Cocogoose.ttf') format('truetype'), url('./assets/Cocogoose.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'magmawave';
  src: url('./assets/MagmaWave.otf') format('opentype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'cyborg_punk';
  src: url('./assets/CyborgPunk.ttf') format('truetype'), url('./assets/CyborgPunk.otf') format('opentype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* EIOT: custom workshop display font requested by the user */
@font-face {
  font-family: 'eiot';
  src: url('./assets/EIOT.ttf') format('truetype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* Additional fonts discovered in the assets folder */
@font-face {
  font-family: 'heavitas';
  src: url('./assets/Heavitas.ttf') format('truetype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'magnetar';
  src: url('./assets/Magnetar.otf') format('opentype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'merkur';
  src: url('./assets/Merkur.otf') format('opentype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'minecraft_px';
  src: url('./assets/MINECRAFT.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'retro_display';
  src: url('./assets/Retro.otf') format('opentype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Science';
  src: url('./assets/Science.ttf') format('truetype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}



@font-face {
  font-family: 'space_crusaders';
  src: url('./assets/Space%20Crusaders.ttf') format('truetype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'starjedi';
  src: url('./assets/Starjedi.ttf') format('truetype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'whitenice';
  src: url('./assets/Whitenice.ttf') format('truetype');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Dune';
  src: url('./assets/Dune.ttf') format('truetype');
  font-weight: 300 700; /* keep range only if font supports it */
  font-style: normal;   /* ✅ MUST be normal */
  font-display: swap;
}
@font-face {
  font-family: 'BoldsPixels';
  src: url('./assets/BoldsPixels.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}




/* Font roles using available custom fonts */
:root {
  --font-BoldsPixels: 'BoldsPixels', monospace;
  --font-hero: 'electro_wave_vol_2', 'Arial Black', sans-serif;
  --font-heading: 'pixel_font', 'Arial Black', sans-serif;
  --font-body: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-accent: 'cocogoose', 'Arial', sans-serif;
  --font-workshop: 'cocogoose', 'Arial Black', sans-serif;
  --font-timer: 'magmawave', monospace;
  --font-cyborg: 'cyborg_punk', 'Arial Black', sans-serif;
  --font-retro: 'retro_display', 'Arial', sans-serif;
  --font-sci: 'space_crusaders', 'monospace';
  --font-eiot: 'eiot', 'Arial', sans-serif;
  --font-display: 'heavitas', 'Arial Black', sans-serif;
  --font-minecraft: 'minecraft_px', monospace;
  --font-dune: 'Dune', system-ui, sans-serif;

  /* Typographic scale */
  /* Increased sizes for better visibility */
  --fs-base: 20px; /* body */
  --fs-small: 15px;
  --fs-h1: clamp(56px, 8vw, 110px);
  --fs-h2: clamp(34px, 5vw, 56px);
  --fs-h3: 24px;
  --fs-lead: 24px;
  --leading: 1.65;
}

/* Utility text styles */
.text-lead { font-size: var(--fs-lead); line-height: var(--leading); }
.small { font-size: var(--fs-small); }

/* Global role mappings so pages pick up the appropriate fonts */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings and display text */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  letter-spacing: 1px;
}

.hero-title, .glitch-text, .logo {
  font-family: var(--font-hero);
}

/* Special-purpose roles */
.retro, .badge-retro { font-family: var(--font-retro); }
.sci-fi, .space-title { font-family: var(--font-sci); }
.display { font-family: var(--font-display); }
.minecraft { font-family: var(--font-minecraft); }

/* Monospace/system text */
.system-text, code, pre { font-family: 'Courier New', monospace; }

/* Buttons and small UI text get a compact display face */
.btn, button { font-family: var(--font-accent); }