/* Design tokens — one place to retune the whole look. */
:root {
  /* Playful palette */
  --sky-top: #7FD3F7;
  --sky-bottom: #CDF1FF;
  --grass: #6FD98A;
  --grass-dark: #4CBF6D;

  --mint: #37D399;      --mint-deep: #1FAE7A;
  --coral: #FF7A6B;     --coral-deep: #E2544A;
  --grape: #9B7BFF;     --grape-deep: #7A57E6;
  --blue: #4FA8FF;      --blue-deep: #2C82DC;
  --pink: #FF8FC7;      --pink-deep: #E866A9;
  --sun: #FFC93C;       --sun-deep: #E9A916;
  --tangerine: #FF9F45; --tangerine-deep: #E8812A;

  --ink: #2A3557;
  --ink-soft: #6A779B;
  --paper: #FFFFFF;
  --paper-tint: #F4F8FF;
  --wood: #C98B54;
  --wood-dark: #9C6335;
  --wood-frame: #7E4E29;

  /* Shape */
  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-xl: 36px;
  --r-pill: 999px;

  /* Chunky "sticker" depth */
  --lift-1: 0 4px 0 rgba(42, 53, 87, .16), 0 8px 18px rgba(42, 53, 87, .12);
  --lift-2: 0 8px 0 rgba(42, 53, 87, .14), 0 16px 28px rgba(42, 53, 87, .16);
  --ring: 0 0 0 4px rgba(255, 255, 255, .85);

  /* Motion */
  --bounce: cubic-bezier(.34, 1.56, .64, 1);
  --swift: cubic-bezier(.4, 0, .2, 1);

  --hud-h: 68px;
  --font: 'Fredoka', 'Baloo 2', 'Comic Sans MS', 'Trebuchet MS', system-ui, sans-serif;
}

/* Named colour helpers so JS can just pass a colour name. */
.c-mint  { --c: var(--mint);  --c-deep: var(--mint-deep); }
.c-coral { --c: var(--coral); --c-deep: var(--coral-deep); }
.c-grape { --c: var(--grape); --c-deep: var(--grape-deep); }
.c-blue  { --c: var(--blue);  --c-deep: var(--blue-deep); }
.c-pink  { --c: var(--pink);  --c-deep: var(--pink-deep); }
.c-sun   { --c: var(--sun);   --c-deep: var(--sun-deep); }
.c-tangerine { --c: var(--tangerine); --c-deep: var(--tangerine-deep); }