/*
  Hapje, sub-huisstijl van Silly Oranges, v1.0
  Ontwerptokens. Vult Huisstijlhandboek Silly Oranges v1.1 aan.
  Datum: 23 oktober 2026

  Gebruik: <link rel="stylesheet" href="/_hapje/static/hapje-tokens.css">
*/

:root {
  /* Achtergronden */
  --hapje-schil: #FFF8EF;        /* pagina-achtergrond */
  --hapje-wit: #FFFFFF;          /* kaarten, invoervelden */
  --hapje-room: #FBF3E6;         /* rustige vlakken, zijbalk */
  --hapje-perzik: #FFE7CF;       /* zacht accent, "bijna"-meldingen */
  --hapje-munt: #DFF1EC;         /* zacht accent, "gelukt"-meldingen */
  --hapje-lijn: #EADFCF;         /* randen en scheidingslijnen */

  /* Hoofdkleur en tweede kleur */
  --hapje-mandarijn: #F7953A;    /* hoofdknoppen, motief. Tekst erop altijd --hapje-inkt */
  --hapje-salie: #2E7D74;        /* tweede knoppen, voortgang. Tekst erop altijd --hapje-wit */

  /* Tekst */
  --hapje-inkt: #15171C;         /* hoofdtekst (Ink uit het handboek) */
  --hapje-inkt-zacht: #4A4F57;   /* uitleg, labels */
  --hapje-oranje-diep: #A3460A;  /* links en oranje tekst op lichte vlakken */
  --hapje-salie-diep: #1F6A62;   /* "gelukt"-tekst, groene tekst op lichte vlakken */

  /* Spelerkleuren. Altijd samen met naam en emoji, nooit kleur alleen */
  --hapje-speler-sinaas: #E69F00;
  --hapje-speler-hemel: #56B4E9;
  --hapje-speler-blad: #009E73;
  --hapje-speler-citroen: #F0E442;
  --hapje-speler-zee: #0072B2;
  --hapje-speler-vuur: #D55E00;
  --hapje-speler-bes: #CC79A7;
  --hapje-speler-druif: #6F4FA0;
  --hapje-speler-koraal: #F08A7E;
  --hapje-speler-mos: #8C9A2E;
  --hapje-speler-nacht: #24324F;
  --hapje-speler-steen: #9AA0A6;
  --hapje-speler-rand: rgba(21, 23, 28, 0.18); /* ring om de kleurcirkel, zodat ook licht geel zichtbaar is */

  /* Lettertypen */
  --hapje-font-kop: 'Fredoka', 'Arial Rounded MT Bold', system-ui, sans-serif;
  --hapje-font-tekst: 'Space Grotesk', system-ui, sans-serif;
  --hapje-font-code: 'Space Mono', ui-monospace, monospace;

  /* Lettergroottes voor kinderen (iPad, 1 px = 1 pt) */
  --hapje-kind-titel: 48px;          /* liggend */
  --hapje-kind-titel-staand: 44px;
  --hapje-kind-naam: 32px;           /* naam op spelerknop */
  --hapje-kind-tegel: 26px;          /* naam op app-tegel */
  --hapje-kind-tekst: 24px;          /* korte uitleg voor kinderen */
  --hapje-kind-knop-min: 24px;       /* nooit kleiner op een knop voor kinderen */
  --hapje-kind-emoji: 56px;

  /* Lettergroottes voor ouders */
  --hapje-ouder-h1: 36px;
  --hapje-ouder-h2: 26px;
  --hapje-ouder-h3: 20px;
  --hapje-ouder-tekst: 18px;
  --hapje-ouder-klein: 15px;         /* labels, voetnoten; nooit kleiner */
  --hapje-code: 56px;                /* cijfers in de koppelcode */

  --hapje-regel-kop: 1.15;
  --hapje-regel-tekst: 1.55;

  /* Afstanden */
  --hapje-ruimte-1: 4px;
  --hapje-ruimte-2: 8px;
  --hapje-ruimte-3: 12px;
  --hapje-ruimte-4: 16px;
  --hapje-ruimte-5: 24px;
  --hapje-ruimte-6: 32px;
  --hapje-ruimte-7: 48px;
  --hapje-ruimte-8: 64px;

  /* Aanraken */
  --hapje-tik-ouder: 48px;           /* minimale hoogte en breedte, ouderschermen */
  --hapje-tik-kind: 80px;            /* minimale hoogte en breedte, kinderschermen */
  --hapje-tik-afstand: 24px;         /* minimale afstand tussen knoppen voor kinderen */
  --hapje-tik-afstand-ouder: 12px;
  --hapje-spelerknop: 200px;         /* hoogte spelerknop op de kiespagina */
  --hapje-tegel: 220px;              /* hoogte app-tegel */

  /* Rondingen */
  --hapje-rond-s: 12px;
  --hapje-rond-m: 20px;
  --hapje-rond-l: 28px;
  --hapje-rond-pil: 999px;

  /* Schaduwen (warm, laag) */
  --hapje-schaduw-1: 0 1px 2px rgba(120, 70, 20, 0.08);
  --hapje-schaduw-2: 0 2px 4px rgba(120, 70, 20, 0.06), 0 8px 20px rgba(120, 70, 20, 0.10);
  --hapje-schaduw-ingedrukt: inset 0 2px 4px rgba(120, 70, 20, 0.12);
  --hapje-focus: 0 0 0 4px var(--hapje-schil), 0 0 0 8px var(--hapje-salie);

  /* Beweging */
  --hapje-duur-kort: 120ms;
  --hapje-duur: 240ms;
  --hapje-curve: cubic-bezier(0.3, 0.7, 0.4, 1);

  /* Logo */
  --hapje-logo-min: 96px;            /* minimale breedte beeldmerk, digitaal */
  --hapje-logo-ruimte: 0.25;         /* witruimte rondom = kwart van de logobreedte */
}

/* Donker: alleen iets donkerder, zelfde stijl. Tekst blijft donker. */
@media (prefers-color-scheme: dark) {
  :root {
    --hapje-schil: #EDE4D6;
    --hapje-wit: #F5EEE3;
    --hapje-room: #E6DCCB;
    --hapje-perzik: #F0D4B8;
    --hapje-munt: #CCE2DB;
    --hapje-lijn: #D8CBB6;
    --hapje-mandarijn: #E58A33;
    --hapje-salie: #28706A;
    --hapje-oranje-diep: #8A3B08;
    --hapje-salie-diep: #195A53;
    --hapje-schaduw-1: 0 1px 2px rgba(80, 45, 10, 0.12);
    --hapje-schaduw-2: 0 2px 4px rgba(80, 45, 10, 0.10), 0 8px 20px rgba(80, 45, 10, 0.14);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --hapje-duur-kort: 0ms; --hapje-duur: 0ms; }
}