/* Huisstijl van Grabbel: papieren lootjes op groen vilt, met een rode hoge hoed.
   Alle kleuren, letters en bewegingen staan hier; de rest van de css gebruikt alleen deze variabelen. */
@font-face { font-family: 'Bowlby One'; src: url('fonts/bowlby-one.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Kalam'; src: url('fonts/kalam-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Hanken Grotesk'; src: url('fonts/hanken-grotesk.woff2') format('woff2'); font-weight: 400 600; font-display: swap; }

:root {
  /* Het vilt van de tafel */
  --vilt: #12332b;
  --vilt-diep: #0a211b;
  --vilt-licht: #1f5446;
  --vilt-rand: #2c6a59;

  /* Papier en inkt */
  --papier: #f8eed9;
  --papier-donker: #e6d6b3;
  --inkt: #1d1b16;
  --inkt-zacht: #6b6455;
  --krijt: #f8eed9;
  --krijt-zacht: #a9c2b8;

  /* De kleuren van de lootjes en de hoed */
  --rood: #f0513c;
  --rood-diep: #b9301f;
  --geel: #f7bf3c;
  --roze: #ff9fb4;
  --blauw: #86cbee;
  --mint: #9de3c1;

  /* Letters */
  --kop: 'Bowlby One', 'Arial Black', sans-serif;
  --tekst: 'Hanken Grotesk', system-ui, sans-serif;
  --pen: 'Kalam', 'Comic Sans MS', cursive;

  /* Beweging: --veer schiet een stukje door en veert terug, --glij komt rustig tot stilstand */
  --veer: cubic-bezier(0.34, 1.56, 0.64, 1);
  --glij: cubic-bezier(0.22, 1, 0.36, 1);

  --rond: 1.125rem;
  --schaduw: 0 1.1rem 1.6rem -0.9rem rgba(4, 16, 13, 0.75);
  --boven: env(safe-area-inset-top, 0px);
  --onder: env(safe-area-inset-bottom, 0px);
}

/* Echte veer waar de browser dat kan (iPhone vanaf iOS 17.2) */
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --veer: linear(0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1.004 83.8%, 1);
  }
}