@font-face {
  font-family: "Vampire Wars";
  src: url("../fonts/VampireWars.ttf") format("truetype"),
       url("../fonts/VampireWars.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Colors — from DESIGN.md */
  --color-surface: #131313;
  --color-surface-dim: #131313;
  --color-surface-bright: #393939;
  --color-surface-container-lowest: #0e0e0e;
  --color-surface-container-low: #1c1b1b;
  --color-surface-container: #20201f;
  --color-surface-container-high: #2a2a2a;
  --color-surface-container-highest: #353535;
  --color-on-surface: #e5e2e1;
  --color-on-surface-variant: #e1bfb3;
  --color-background: #131313;
  --color-on-background: #e5e2e1;
  --color-primary: #ffb599;
  --color-on-primary: #5a1c00;
  --color-primary-container: #f26522;
  --color-on-primary-container: #4f1800;
  --color-secondary: #ffc969;
  --color-secondary-container: #eea900;
  --color-tertiary: #dbc2ac;
  --color-tertiary-container: #a48d79;
  --color-outline: #a88a7f;
  --color-black: #000;

  /* Spacing */
  --spacing-panel: 2rem;
  --spacing-gutter: 1.5rem;
  --spacing-internal: 1rem;
  --spacing-action-gap: 0.5rem;

  /* Borders & shadows */
  --border-comic: 4px solid var(--color-black);
  --shadow-block: 8px 8px 0 var(--color-black);
  --shadow-block-lg: 12px 12px 0 var(--color-black);
  --shadow-block-orange: 12px 12px 0 var(--color-primary-container);

  /* Typography */
  --font-display: "Vampire Wars", Impact, sans-serif;
  --font-body: "Hanken Grotesk", system-ui, sans-serif;
  --font-label: "JetBrains Mono", monospace;

  --text-display: clamp(3rem, 10vw, 6.25rem);
  --text-headline-xl: clamp(2rem, 5vw, 3rem);
  --text-headline-lg: clamp(1.5rem, 3vw, 2rem);
  --text-body-lg: 1.125rem;
  --text-body-md: 1rem;
  --text-label: 0.75rem;

  /* Layout */
  --header-height: 4.5rem;
  --max-width-content: 72rem;
  --bp-md: 768px;
  --bp-lg: 1024px;
}