/* Pickle Smacker — design tokens.
   Direction: "Farm Stand Signage". Every colour is pulled from the game's own
   world — jar brine, kraft labels, crate wood, gingham cloth, amber lids — rather
   than the glossy blue plastic chrome the genre defaults to. */

@font-face {
  font-family: 'Bungee';
  src: url('../assets/fonts/bungee-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url('../assets/fonts/nunito-var.woff2') format('woff2-variations');
  font-weight: 200 1000;
  font-display: swap;
}

:root {
  /* ---- Palette ------------------------------------------------------ */
  --dill: #6FBF2E;          /* pickle green — the brand */
  --dill-lit: #9BE04F;      /* highlight green */
  --dill-deep: #3F7A17;     /* pressed / shadow green */
  --brine: #22400E;         /* near-black green — text, outlines */
  --brine-soft: #3D5B27;

  --kraft: #F5E6C8;         /* label paper — surfaces */
  --kraft-dim: #E2CFA8;     /* label paper in shadow */
  --cream: #FFF9EC;         /* raised paper */

  --amber: #FFB627;         /* lids, coins, stars */
  --amber-deep: #D98A0B;
  --gingham: #E23D28;       /* cloth red — hearts, danger */
  --gingham-deep: #A82415;
  --sky: #4FC3E8;           /* secondary accent */
  --sky-deep: #2088AE;
  --crate: #A9713B;         /* barrel & crate wood */
  --crate-deep: #6E441F;
  --grape: #8E4FCF;         /* rare / legendary */

  /* Tile colours, kept in sync with the sprite set so procedural fallbacks,
     particles and glows all read as the same material as the artwork. */
  --tile-pickle: #5FB733;
  --tile-tomato: #E8382F;
  --tile-carrot: #FF8A1E;
  --tile-chili: #FFD024;
  --tile-beet: #9B3FC4;
  --tile-blueberry: #3D7BE8;
  --tile-golden: #FFD75E;

  /* ---- Type --------------------------------------------------------- */
  /* Bungee is modelled on American street & shopfront signage — the same
     lettering a market stall paints on its board. Nunito carries the soft,
     legible UI voice underneath it. */
  --font-display: 'Bungee', 'Impact', sans-serif;
  --font-ui: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Sized in `cqw` — a percentage of the STAGE, not the viewport.
     `vw` was wrong here and it showed: the game lives inside a fixed-aspect
     stage, so on an iPhone SE the stage is 308px wide inside a 375px viewport
     and the type sized itself to a world it wasn't in. The result barely moved
     across a 40% width range (23.0px -> 23.5px), so on a small phone everything
     was proportionally huge — "START SMACKING" wrapped onto two lines and the
     HUD wrapped to a second row.

     Ratios are set so each step matches its old size at the 430px design width,
     then genuinely shrinks below it. The clamps stop it collapsing on a tiny
     stage or ballooning on a tablet. */
  --step--1: clamp(9.5px,  2.60cqw, 13px);
  --step-0:  clamp(11px,   3.07cqw, 15px);
  --step-1:  clamp(12.5px, 3.57cqw, 17.5px);
  --step-2:  clamp(15px,   4.32cqw, 22px);
  --step-3:  clamp(18px,   5.47cqw, 28px);
  --step-4:  clamp(23px,   7.20cqw, 38px);
  --step-5:  clamp(30px,   9.70cqw, 52px);

  /* ---- Space & shape ------------------------------------------------ */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-pill: 999px;

  /* Chunky toy-like depth: a hard bottom edge rather than a soft blur is what
     makes casual game buttons feel pressable. */
  --lift-1: 0 3px 0 var(--shadow-edge, rgba(34, 64, 14, .45));
  --lift-2: 0 5px 0 var(--shadow-edge, rgba(34, 64, 14, .45)), 0 8px 18px rgba(34, 64, 14, .28);
  --lift-3: 0 8px 0 var(--shadow-edge, rgba(34, 64, 14, .45)), 0 16px 34px rgba(34, 64, 14, .35);
  --ink-outline: 0 0 0 3px var(--brine);

  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in: cubic-bezier(.55, 0, 1, .45);

  --t-fast: 120ms;
  --t-mid: 260ms;
  --t-slow: 460ms;

  --z-board: 10;
  --z-hud: 20;
  --z-modal: 40;
  --z-toast: 60;

  /* Safe-area insets, so the native shell doesn't clip the HUD under the notch. */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 1ms;
    --t-mid: 1ms;
    --t-slow: 1ms;
  }
}