/* Hyenas FC — ontwerp-tokens.
   Overgenomen uit het Claude Design-project "Hyenas FC Design System"
   (tokens/colors.css + tokens/typography.css). Dit is de enige bron voor
   kleur en typografie; componenten verwijzen hiernaar en hardcoden niets. */

:root {
  /* ---- Ink (bijna-zwart, warm) ---- */
  --ink-950: #030405;
  --ink-900: #0f1012;
  --ink-850: #16181b;
  --ink-800: #1e2024;
  --ink-700: #2b2e33;
  --ink-600: #3d4147;
  --ink-500: #565a61;

  /* ---- Goud (merk) ---- */
  --gold-200: #e4d9c2;
  --gold-300: #cdbb98;
  --gold-400: #b5a17e;
  --gold-500: #988165;
  --gold-600: #7c6a50;
  --gold-700: #5e5039;
  --gold-800: #443a29;

  /* ---- Warme neutralen ---- */
  --paper: #f6f4ef;
  --stone-050: #fbfaf7;
  --stone-100: #ece9e2;
  --stone-200: #ddd9ce;
  --stone-300: #c6c0b2;
  --stone-400: #9c978a;
  --stone-500: #6f6b61;
  --stone-600: #4c4941;
  --white: #ffffff;

  /* ---- Paginavlakken ---- */
  --surface-page: #060708;
  --surface-deep: #000000;
  --surface-panel: #0c0d10;
  --surface-field: #14151a;

  /* ---- Tekst op donker ---- */
  --text-inverse: #f6f4ef;
  --text-inverse-soft: rgba(246, 244, 239, 0.6);
  --text-inverse-mute: rgba(246, 244, 239, 0.45);
  --line-on-ink: rgba(246, 244, 239, 0.14);
  --line-on-ink-soft: rgba(246, 244, 239, 0.12);

  /* ---- Typografie ---- */
  --font-display: 'Archivo', system-ui, sans-serif;
  --font-body: 'Archivo', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;
  --font-serif: 'Instrument Serif', Georgia, serif;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-heavy: 800;
  --fw-black: 900;

  --lh-tight: 0.95;
  --lh-snug: 1.1;
  --lh-body: 1.7;

  --ls-display: -0.02em;
  --ls-label: 0.2em;

  /* ---- Beweging ---- */
  --dur-fast: 0.18s;
  --dur: 0.25s;
  --dur-slow: 1s;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* ---- Kopbalk: 1,5× de maat uit het ontwerp (Elmo, 22-09) ---- */
  --nav-h: 87px;
  --nav-logo: 51px;
  --nav-font: 16.5px;
  --nav-pad-y: 9px;
  --nav-pad-x: 16px;

  /* ---- Instelbaar in het ontwerp, hier als vaste beginwaarde ---- */
  --mist-size: 1;
  --mist-intensity: 1;
}

/* Op de telefoon zou 1,5× de helft van het scherm opslokken: daar iets kleiner. */
@media (max-width: 700px) {
  :root {
    --nav-h: 66px;
    --nav-logo: 40px;
    --nav-font: 13px;
  }
}

/* Het ontwerp vraagt "Archivo Expanded" aan, maar die bestaat niet bij Google
   Fonts: het ontwerp valt dus terug op gewone Archivo op normale breedte. Wat je
   in het ontwerp ziet is daarmee de maat — niet de naam die erin staat. */
.hf-display-face {
  font-family: var(--font-display);
}