/* Strik · design tokens — single source of truth.
   Paste this over the existing :root in index.html (or @import it).
   Names match what's already in the code, so most call sites keep working;
   the new tokens (--inkt-zacht, --rand, --rand-sterk, the --r-* scale) are
   what you migrate the hard-coded values onto. */
:root{
  /* Surfaces */
  --papier:#FFFFFF;       /* cards, app body            */
  --canvas:#FAF8F4;       /* page background, inputs     */
  --kraft:#EDE3D2;        /* gift surfaces, selected     */

  /* Ink & text */
  --inkt:#161412;         /* primary text, dark buttons  */
  --inkt-zacht:#5C564D;   /* secondary body copy  (was #5C564D/#4D463D/#3E382F) */
  --grijs:#6E6760;        /* labels, placeholders        */

  /* Brand & functional */
  --lint:#C42A2E;         /* brand red · pay / commit    */
  --lint-donker:#9E1F23;  /* hover, badges, errors       */
  --groen:#2E7D5B;        /* success only                */
  --goud:#8A6310;         /* ratings (AA on white)       */

  /* Lines (replace ~10 near-identical hairline browns) */
  --rand:#E4DDD2;         /* hairline borders            */
  --rand-sterk:#CFC8BC;   /* hover / dashed / emphasis   */

  /* Radius (replace the ~11 raw corner values) */
  --r-sm:10px;            /* small chips, mini surfaces  */
  --r-md:14px;            /* buttons, fields, cards      */
  --r-lg:20px;            /* feature cards (gift card)   */
  --r-frame:34px;         /* device frame                */
  --r-pill:999px;         /* chips, pills, badges        */

  /* Focus */
  --focus:2px;

  /* Spacing — 4px base. Use the steps, not the in-betweens. */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s6:24px; --s8:32px; --s12:48px;

  --font:"Switzer","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-titel:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
}

/* One focus rule everywhere (replaces the 2px / 2.5px split). */
:focus-visible{ outline:var(--focus) solid var(--lint); outline-offset:2px; }