/* HockeyTime design tokens.
   Definitieve richting (keuze Thijmen, juli 2026): donkerblauw + oranje,
   Anton voor koppen (met cursief oranje accent), Hanken Grotesk voor al het andere.
   De oude A/B-verkenning staat in ../website-ab-backup/.

   CONTRAST-REGEL (belangrijk):
   --ht-orange is een VLAKKLEUR, geen tekstkleur op cream/paper. Oranje op cream
   haalt maar 2.74:1 en zakt daarmee door elke WCAG-drempel, ook die voor grote
   koppen (3:1). Gebruik daarom:
     - vlak oranje + navy tekst erop   -> --ht-orange        (5.01:1)
     - oranje tekst op navy            -> --ht-orange        (5.01:1)
     - oranje tekst op cream/paper     -> --ht-orange-text   (4.58:1 / 5.41:1)
     - grote oranje display (>=24px)   -> --ht-orange-display (3.77:1 / 4.45:1)
   Gebruik in de praktijk de semantische aliassen (--accent, --accent-text,
   --accent-display, --accent-on-dark) in plaats van de merkkleuren zelf. */

/* Terugvalletter voor Anton, zolang die nog van Google Fonts binnenkomt.
   Gemeten met "PERFORM." op 100px: Anton 369.7px breed, Impact 384.0px.
   96.3% brengt Impact daarmee vrijwel exact op Antons breedte, zodat de
   hero-kop niet verspringt op het moment dat Anton alsnog laadt.
   De verticale maat ligt al vast via de expliciete line-height op .h1a. */
@font-face {
  font-family: "Anton fallback";
  src: local("Impact");
  size-adjust: 96.3%;
  font-display: swap;
}

:root {
  /* ---- Brand core ---- */
  --ht-orange:         #F5551E;  /* vlakken, en tekst op navy */
  --ht-orange-hover:   #FF6A34;  /* lichter bij hover: contrast gaat omhoog, niet omlaag */
  --ht-orange-text:    #B83D13;  /* tekstoranje op cream/paper */
  --ht-orange-display: #CF4516;  /* display >=24px op cream/paper, en de focusring */
  --ht-cream:          #ECE7DA;
  --ht-paper:          #FBFAF6;

  /* ---- Navy anchor ---- */
  --ht-navy:           #0E1B3B;
  --ht-navy-700:       #1E3161;  /* hover op navy vlakken */

  /* ---- Neutrals (koel, passend bij navy) ---- */
  --ht-grey-500:       #5C6478;  /* muted labels op cream */
  --ht-grey-400:       #A3ADC4;  /* secundaire tekst op navy */
  --ht-hair:           rgba(14, 27, 59, .55);  /* randen van formuliervelden: 3.8:1 */
  --ht-hair-strong:    rgba(14, 27, 59, .78);
  --ht-hair-light:     rgba(255, 255, 255, .22);

  /* ---- Semantic ---- */
  --surface-canvas:    var(--ht-cream);
  --surface-raised:    var(--ht-paper);
  --surface-inverse:   var(--ht-navy);
  --surface-inverse-hover: var(--ht-navy-700);

  --text-strong:       var(--ht-navy);
  --text-body:         #2C3550;
  --text-muted:        var(--ht-grey-500);
  --text-on-dark:      var(--ht-cream);
  --text-on-dark-muted: var(--ht-grey-400);

  --accent:            var(--ht-orange);          /* vlakken + tekst op navy */
  --accent-hover:      var(--ht-orange-hover);
  --accent-text:       var(--ht-orange-text);     /* kleine tekst op licht */
  --accent-display:    var(--ht-orange-display);  /* grote tekst op licht */
  --accent-on-dark:    var(--ht-orange);

  --border-strong:     var(--ht-navy);
  --border-hair:       var(--ht-hair);
  --focus-ring:        var(--ht-orange-display);  /* 3.77:1 op cream, 3.65:1 op navy */

  /* ---- Typography ---- */
  /* "Anton fallback" is hieronder gedefinieerd: het houdt de kop bijna even
     breed zolang Anton nog laadt, zodat de hero niet verspringt. */
  --font-display:  "Anton", "Anton fallback", Impact, "Haettenschweiler", "Arial Narrow", sans-serif;
  --font-ui:       "Hanken Grotesk", system-ui, -apple-system, sans-serif;

  /* Display-trap: alleen Anton, altijd uppercase */
  --fs-display-xl: clamp(52px, 9vw, 132px);
  --fs-display-l:  clamp(40px, 5vw, 72px);
  --fs-display-m:  clamp(34px, 4vw, 54px);
  --fs-display-s:  30px;

  /* Teksttrap: vier maten, meer niet */
  --fs-lead:       18px;   /* intro's onder koppen */
  --fs-body:       16px;   /* alle lopende tekst */
  --fs-meta:       14px;   /* secundair, bijschriften */
  --fs-label:      12px;   /* uppercase micro-labels */

  --lh-display:    .9;
  --lh-body:       1.6;
  --lh-meta:       1.55;

  --ls-caps:       .1em;
  --ls-display:    -.01em;

  /* ---- Beweging ----
     De ingebouwde CSS-easings zijn te slap: `ease-out` remt nauwelijks af en
     laat een transitie mat aanvoelen. Deze twee curves zijn scherper en geven
     de beweging richting. Gebruik --ease-out voor alles wat binnenkomt of
     verdwijnt, --ease-in-out voor iets dat ter plekke verschuift.
     Duur: druk 140ms, hover 160ms, entree 400ms. Alles onder de 300ms
     behalve eenmalige entrees; herhaalde interacties blijven kort. */
  --ease-out:      cubic-bezier(.23, 1, .32, 1);
  --ease-in-out:   cubic-bezier(.77, 0, .175, 1);

  --dur-press:     .14s;
  --dur-hover:     .16s;
  --dur-enter:     .4s;

  /* ---- Spacing (8pt) ---- */
  --sp-1:  4px;  --sp-2:  8px;  --sp-3: 12px;  --sp-4: 16px;  --sp-5: 24px;
  --sp-6: 32px;  --sp-7: 48px;  --sp-8: 64px;  --sp-9: 72px;

  --section-y:     88px;   /* verticaal ritme van secties */
  --gutter:        40px;   /* zijmarge van .wrap */

  /* Linkerkolom op de visie-pagina: de pijlerletter én de kop van een
     dienstenkaart staan erin, zodat beide blokken hetzelfde ritme volgen.
     De letter is precies zo groot als de kolom breed is. */
  --rail:          clamp(120px, 16vw, 220px);

  /* ---- Geometrie: hard en krachtig ---- */
  --bw:            2px;
  --bw-hair:       1.5px;
  --tap:           44px;   /* minimale aanraakoppervlakte */

  /* ---- Layout ---- */
  --container:     1200px;
  --header-h:      76px;
}

@media (max-width: 860px) {
  :root { --gutter: 24px; --rail: 96px; }
}

@media (max-width: 560px) {
  :root {
    --section-y: 56px;
    --header-h:  64px;
    --fs-lead:   17px;
  }
}