/* LittleWins — Spacing, radius, shadow, motion, layout tokens */
:root {
  /* spacing — 4px base grid */
  --sp-0: 0; /* @kind spacing */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* radii — rounded but strong (not pill-everything) */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;   /* default card / input */
  --radius-lg: 20px;   /* large cards / board tiles */
  --radius-xl: 28px;   /* hero panels */
  --radius-pill: 999px;
  /* the logo icon uses a superellipse-ish squircle at ~22% of its size */
  --radius-squircle: 24%;

  /* borders */
  --bw-hair: 1px;
  --bw-1: 1.5px;
  --bw-2: 2px;
  --bw-3: 3px;

  /* shadows — soft, cool navy-tinted, never harsh black */
  --shadow-xs: 0 1px 2px rgba(14,34,56,.06);
  --shadow-sm: 0 2px 6px rgba(14,34,56,.08);
  --shadow-md: 0 6px 18px rgba(14,34,56,.10);
  --shadow-lg: 0 16px 40px rgba(14,34,56,.14);
  --shadow-xl: 0 28px 70px rgba(14,34,56,.18);
  /* colored glows for emphasis / earned states */
  --shadow-green: 0 8px 22px rgba(27,122,61,.30);
  --shadow-orange:0 8px 22px rgba(240,127,31,.32);
  /* inset for the "magnetic Board" recess */
  --shadow-inset: inset 0 2px 6px rgba(5,13,22,.45);

  /* motion — snappy, athletic, a little spring */
  --ease-out: cubic-bezier(.2,.7,.3,1); /* @kind other */
  --ease-in-out: cubic-bezier(.65,0,.35,1); /* @kind other */
  --ease-spring: cubic-bezier(.34,1.56,.64,1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 200ms; /* @kind other */
  --dur-slow: 360ms; /* @kind other */
  --dur-cel: 620ms; /* @kind other */

  /* layout */
  --container: 1200px; /* @kind spacing */
  --container-wide: 1440px; /* @kind spacing */
  --gutter: var(--sp-6);
  --tap-min: 44px; /* min touch target */
}