/* ============================================================
   Design Tokens — colour palette preserved exactly
   ============================================================ */
:root {
  /* Surfaces */
  --bg:        #1a0a10;
  --card:      #241218;
  --surf:      #2e1820;
  --elev:      #381e2a;

  /* Brand */
  --rose:      #e84868;
  --rose-s:    #f28ca0;
  --rose-g:    rgba(232, 72, 104, 0.25);
  --rose-d:    rgba(232, 72, 104, 0.08);
  --gold:      #d4a853;
  --gold-s:    #f0d89c;

  /* Text */
  --t1:        #f5e6ea;
  --t2:        #b89aa4;
  --t3:        #dcc8cf;
  --tm:        #8a6e78;

  /* Borders */
  --brd:       rgba(232, 72, 104, 0.15);
  --brd-a:     rgba(232, 72, 104, 0.4);

  /* Safe areas */
  --st: env(safe-area-inset-top, 0px);
  --sb: env(safe-area-inset-bottom, 0px);

  /* Type scale */
  --ff-body:    'Nunito', system-ui, -apple-system, sans-serif;
  --ff-serif:   'Lora', Georgia, serif;
  --ff-script:  'Caveat', cursive;

  /* Motion */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   0.2s;
  --dur:        0.3s;
  --dur-slow:   0.5s;

  /* Elevation */
  --shadow-sm:  0 4px 16px rgba(0, 0, 0, 0.2);
  --shadow:     0 8px 32px rgba(0, 0, 0, 0.3);
  --shadow-rose: 0 4px 16px var(--rose-g);

  /* Radii */
  --r-sm: 10px;
  --r:    14px;
  --r-lg: 20px;
  --r-xl: 22px;

  /* Focus ring */
  --focus-ring: 0 0 0 3px var(--rose-g), 0 0 0 1px var(--rose);
}

/* Honour the user's preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0.01ms;
    --dur:      0.01ms;
    --dur-slow: 0.01ms;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}