/* ============================================================
   Push the Button — Design Tokens
   The single source of truth for the visual system.
   Every design-review tweak starts here.
   ============================================================ */

:root {
  /* ---- Surfaces ---- */
  --color-bg: #faf7f2;            /* warm cream background */
  --color-surface: #fffdf9;        /* raised plastic (bubble, button base) */

  /* ---- Ink ---- */
  --color-ink: #333333;            /* charcoal text */
  --color-ink-soft: rgba(51, 51, 51, 0.55);
  --color-ink-faint: rgba(51, 51, 51, 0.16);

  /* ---- The Button (red) ---- */
  --color-red: #e8402e;            /* glossy red top */
  --color-red-light: #ff6a4d;      /* highlight edge */
  --color-red-dark: #b8281c;       /* side wall / depth */
  --color-red-deep: #8f1f16;       /* bottom rim */

  /* ---- The Button (base plate) ---- */
  --color-base: #fffefa;           /* cream/white base */
  --color-base-shadow: #e3ddd2;    /* base underside */

  /* ---- Accents ---- */
  --color-accent-yellow: #ffc24b;  /* celebration particles */
  --color-accent-yellow-deep: #f5a623;

  /* ---- Play area boundary ---- */
  --color-boundary: rgba(51, 51, 51, 0.10);
  --game-area-max-width: 720px;
  --game-area-max-height: 640px;
  --game-area-radius: 28px;

  /* ---- Button sizing ----
     Deliberately NOT enormous; sized with clamp() so it scales
     with the play area but leaves generous room around it. */
  --button-size: clamp(120px, 26vmin, 176px);

  /* ---- Typography ---- */
  --font-main: "Nunito", system-ui, sans-serif;
  --level-label-size: clamp(0.95rem, 2.4vmin, 1.15rem);

  /* ---- Motion ---- */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* soft overshoot */
  --ease-press: cubic-bezier(0.5, 0, 0.3, 1);
  --dur-press: 90ms;
  --dur-release: 260ms;

  /* ---- Shadows (soft, diffuse — tuned to feel like real objects) ---- */
  --shadow-floor:
    0 18px 30px -12px rgba(51, 40, 30, 0.28),
    0 6px 12px -6px rgba(51, 40, 30, 0.18);
  --shadow-floor-tight:
    0 6px 12px -6px rgba(51, 40, 30, 0.30),
    0 2px 5px -2px rgba(51, 40, 30, 0.20);
}