:root {
  --sky: #45C0F5; /* Sky / primary field */
  --pistachio: #7EDB63; /* Foliage / success */
  --pale-lemon: #F2EC3F; /* Sunlight / celebration (lemon-chiffon) */
  --blossom: #F77FC0; /* Supporting plume */
  --lilac: #9A70E8; /* Supporting plume */
  --mint: #4FE3BC; /* Supporting plume */
  --periwinkle: #6E8FF5; /* Supporting plume */
  --rose: #EE4D74; /* Supporting plume */
  --sky-deep: #1E88DD; /* Supporting plume */
  --clover: #45B939; /* Supporting plume */
  --soft-coral: #F2A69B; /* Attention accent (warm, soft) */
  --ink: #2E3A59; /* Structural dark / ink */
  --warm-white: #FDFBF7; /* Card / base neutral */
  --peach: #F9CDB4;      /* Warm accent */
  --butter: #FBE7A9;     /* Warm accent */
  --soft-gold: #EBD59B;  /* Warm accent */
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}

/* Menu button hover.
   This replaces "Task 28: Holographic Menu Buttons", which swept a 45-degree white
   gradient band across every button over 0.6s and scaled it to 1.05 on hover. That
   is decorative motion carrying no state, it ran well past the 250ms interface
   ceiling, and it made a quiet gift game feel like a promo page. What a hover needs
   to say is only "this is the thing you are about to press". */
.panel button {
  position: relative;
  transition: transform 0.12s ease-out, background-color 0.12s ease-out;
}

.panel button:hover {
  transform: translateY(-1px);
  background-color: #E8E5DF;
}

.panel button:active {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .panel button { transition: none; }
  .panel button:hover,
  .panel button:active { transform: none; }
}