/* Design tokens. The only file allowed to contain colour values.
   Taken one-to-one from the hint app (verrassing (2).html) so this app reads
   as part two of the same series. See CLAUDE.md section 6. */
:root {
  --cream:    #FAF5EB;
  /* Same as the page on purpose: the near-white of the hint app read as
     white blocks on a phone screen. A card is now held together by its
     gold border and the hairline on top, not by a lighter fill. */
  --card:     #FAF5EB;
  --terra:    #B85C38;
  --terra-d:  #9C4A2B;
  --gold:     #C4952A;
  --brown:    #3D2B1F;
  --brown-m:  #6B4C3B;
  --brown-l:  #9B7B6A;
  --border:   rgba(196, 149, 42, 0.18);
  --border-s: rgba(184, 92, 56, 0.25);
  --red:      #C0392B;
  --red-l:    #FADBD8;
  --coin-1:   #F2D98A;  /* de munt: licht, waar het licht valt  */
  --coin-2:   #DFBE5E;
  --coin-3:   #C09A34;
  --coin-4:   #8F6F20;  /* de munt: donker, in de schaduw       */
  --veil:     rgba(61, 43, 31, 0.55);  /* achter de badge in beeld    */
  --sand:     #EADFC8;  /* onverharde grond in de verkeerspuzzel */
  --road:     #6E6A63;  /* asfalt                                */
  --green:    #1E8449;
  --green-l:  #D5F5E3;

  /* Georgia stands in for Cormorant Garamond: same spirit, no webfont. */
  --font-d: Georgia, "Times New Roman", serif;
  --font-b: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 6px rgba(61, 43, 31, 0.06);
  --shadow-md: 0 4px 16px rgba(61, 43, 31, 0.10);

  --t-fast: 150ms;
  --t-base: 250ms;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}