/* ==========================================================================
   ENSO PUZZEL — Design tokens
   Bron: docs/design-system/design.md (Enso v2.22) + index.html-canon.
   Eén ladder grijs, Samurai-Rood als accent, Press Start 2P + VT323.
   ========================================================================== */

:root {
  /* --- Papier & inkt --- */
  --paper:        #FAFAFA;
  --paper-soft:   #F4F4F4;   /* gray-50  */
  --paper-warm:   #F2E5E0;   /* samurai-red-subtle (washi) */
  --ink:          #121212;
  --ink-muted:    #666666;   /* gray-600 */
  --border:       #E0E0E0;   /* gray-200 */
  --border-strong:#B3B3B3;   /* gray-400 */

  /* --- Grijsladder --- */
  --gray-50:  #F4F4F4;
  --gray-100: #EDEDED;
  --gray-200: #E0E0E0;
  --gray-300: #CCCCCC;
  --gray-400: #B3B3B3;
  --gray-500: #8A8A8A;
  --gray-600: #666666;
  --gray-700: #4A4A4A;
  --gray-800: #2E2E2E;
  --gray-900: #1C1C1C;

  /* --- Accent (samurai-rood) --- */
  --samurai:     #9D0A0E;
  --samurai-hov: #7A0709;
  --samurai-act: #5C0406;

  /* --- Premium (boss) --- */
  --gold: #D4AF37;

  /* --- Indigo & semantiek --- */
  --indigo:        #2C3E50;
  --success:       #2F6E3C;
  --success-soft:  #E8F1EA;
  --warning:       #A67A00;
  --warning-soft:  #F5EFE0;
  --danger:        #9D0A0E;
  --danger-soft:   #F2E5E0;

  /* --- Spacing (4-pt schaal, voorkeur 8-pt stappen) --- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* --- Typografie --- */
  --font-pixel: 'Press Start 2P', monospace;
  --font-body:  'VT323', monospace;

  --fs-xs:   10px;
  --fs-sm:   12px;
  --fs-base: 14px;
  --fs-md:   16px;
  --fs-lg:   18px;
  --fs-xl:   22px;
  --fs-2xl:  28px;
  --fs-3xl:  36px;

  /* --- Border / chunky 16-bit --- */
  --bw-thin:   2px;
  --bw-base:   3px;
  --bw-thick:  4px;
  --shadow-pixel: 4px 4px 0 var(--border-strong);
  --shadow-btn:   0 6px 0 var(--ink);
  --shadow-btn-h: 0 4px 0 var(--ink);
  --shadow-btn-a: 0 0 0 var(--ink);

  /* --- Motion (kort, decisive) --- */
  --dur-fast: 80ms;
  --dur-base: 160ms;
  --dur-slow: 320ms;
  --ease-out: cubic-bezier(.22,.9,.3,1);
}

/* Reduced motion — eerbiedigen */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}