/* ============================================================
   Design tokens — single source of truth for the whole game.
   Palette is a warm clay/wood/greige story, deliberately kept
   distinct from the cool-navy-on-cream look of the genre leaders.
   ============================================================ */

:root {
  /* --- surfaces --- */
  --c-wall: #d4ccc0;
  --c-wall-deep: #c3baac;
  --c-surface: #e8e0d2;
  --c-paper: #f4efe6;
  --c-paper-hi: #fbf8f2;

  /* --- ink --- */
  --c-ink: #3a342e;
  --c-ink-soft: #6b6157;
  --c-ink-faint: #9a9086;

  /* --- wood / warm structure --- */
  --c-wood: #c4a574;
  --c-wood-dark: #9a7a4e;
  --c-wood-edge: #8b6840;

  /* --- accents --- */
  --c-clay: #c47a5a;
  --c-clay-deep: #a55c40;
  --c-apricot: #e0a172;
  --c-mustard: #d4a53c;
  --c-olive: #7c8b4f;
  --c-sage: #b3bfa2;
  --c-teal: #3f6b72;
  --c-plum: #6b5470;

  /* --- type --- */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-ui: "Karla", "Manrope", system-ui, -apple-system, sans-serif;

  /* Type scale, 1.25 ratio on a 16px base. */
  --t-xs: 13px;
  --t-sm: 16px;
  --t-md: 20px;
  --t-lg: 25px;
  --t-xl: 31px;
  --t-2xl: 39px;

  /* --- shadows -----------------------------------------------
     Always tinted toward the warm ink, never pure black.
     Two layers max: one tight contact shadow + one ambient.
     Max opacity 0.22 or it stops reading as paper.
     ---------------------------------------------------------- */
  --shadow-rest: 0 1px 1px rgba(58, 52, 46, 0.1), 0 3px 6px -2px rgba(58, 52, 46, 0.11);
  --shadow-hover: 0 2px 3px rgba(58, 52, 46, 0.1), 0 7px 14px -3px rgba(58, 52, 46, 0.15);
  --shadow-lift: 0 6px 8px -4px rgba(58, 52, 46, 0.12), 0 18px 32px -8px rgba(58, 52, 46, 0.22);
  --shadow-inset: inset 0 2px 6px rgba(58, 52, 46, 0.13), inset 0 1px 0 rgba(58, 52, 46, 0.06);
  --shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 10px 28px -12px rgba(58, 52, 46, 0.26);
  --shadow-snap: 0 0 0 2px rgba(212, 165, 60, 0.55), 0 4px 10px -2px rgba(58, 52, 46, 0.18);

  /* --- radii -------------------------------------------------
     Kept small on purpose. Large radii read as app UI, not objects.
     ---------------------------------------------------------- */
  --r-chip: 2px;
  --r-tray: 6px;
  --r-card: 10px;
  --r-pill: 999px;

  /* --- easing ------------------------------------------------ */
  --ease-snap: cubic-bezier(0.22, 1.2, 0.36, 1);
  --ease-lift: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.45, 0.05, 0.55, 0.95);
  --ease-reject: cubic-bezier(0.36, 0.07, 0.19, 0.97);

  /* --- durations --- */
  --dur-tap: 90ms;
  --dur-lift: 140ms;
  --dur-snap: 200ms;
  --dur-drop: 240ms;
  --dur-scene: 320ms;
  --dur-reward: 420ms;

  /* --- noise tiles, reused by .grain and per-object texture --- */
  --noise-coarse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.62' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23a)'/%3E%3C/svg%3E");
  --noise-fine: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23b)'/%3E%3C/svg%3E");
}