/* ============================================================================
   DE BOUWSTENEN VAN HET ONTWERP: richting A, "Zand en licht"
   ----------------------------------------------------------------------------
   Alle kleuren, fonts en maten staan hier bij elkaar. Verander je hier een
   kleur, dan verandert hij in de hele scan mee.

   De scan houdt bewust altijd dezelfde kleuren aan, ook als iemand zijn
   telefoon op de donkere modus heeft staan. Dit zijn Lynns merkkleuren en
   die moeten kloppen.
   ========================================================================== */

:root {
  /* --- kleuren --------------------------------------------------- */
  --grond:          #f5ebdd;  /* warm zand, het hoofdvlak */
  --grond-diep:     #efe2d0;  /* net iets dieper, voor de plafondpanelen */
  --vlak:           #fffaf4;  /* de antwoordopties en velden */
  --inkt:           #334846;  /* alle lopende tekst en koppen */
  --inkt-zacht:     #6d827f;  /* bijschriften en hulptekst */
  --lijn:           #e3d7c6;  /* randjes en scheidingen */
  --salie:          #a3b1ac;  /* rust, lege keuzerondjes */

  --accent:         #d00575;  /* magenta: knoppen en accenten */
  --accent-diep:    #a80460;  /* magenta bij hover en focus */
  --accent-zacht:   #fdeef6;  /* magenta als achtergrondje */
  --laagkleur:      #c2542a;  /* de laagtitels, een diepere tint oranje */

  --fout:           #a32214;  /* foutmeldingen */
  --fout-zacht:     #fdeeec;

  /* --- letters --------------------------------------------------- */
  --font-display: "Playfair Display", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body: "Poppins", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  /* --- maten ----------------------------------------------------- */
  --tekst-xs:  0.75rem;
  --tekst-s:   0.875rem;
  --tekst-m:   1rem;
  --tekst-l:   1.125rem;
  --vraag:     clamp(1.4rem, 5.4vw, 2rem);
  --titel:     clamp(2.1rem, 9vw, 3.1rem);
  --uitslag:   clamp(1.75rem, 6.6vw, 2.5rem);

  /* --- ruimte ---------------------------------------------------- */
  --ruimte-1: 0.35rem;
  --ruimte-2: 0.65rem;
  --ruimte-3: 1rem;
  --ruimte-4: 1.5rem;
  --ruimte-5: 2.25rem;
  --ruimte-6: 3.25rem;

  --rand:       12px;
  --rand-rond:  999px;
  --zijkant:    clamp(1.25rem, 6vw, 2rem);
  --breedte:    34rem;

  /* --- beweging -------------------------------------------------- */
  --soepel: cubic-bezier(0.22, 0.7, 0.3, 1);
}

/* Iemand die beweging heeft uitgezet op haar telefoon krijgt geen animaties. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}