/* ============================================================
   nom.quest — design tokens (single source of truth)
   Every game links this so fonts, colors and spacing stay
   consistent. New game:  <link rel="stylesheet" href="/tokens.css">
   Spacing follows an 8-point scale (Apple/Google standard).
   ============================================================ */
:root{
  /* fonts */
  --font-body: ui-rounded, "SF Pro Rounded", -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
  --font-display: "Fredoka", var(--font-body);
  --font-hand: "Gochi Hand", var(--font-display);

  /* color */
  --bg:#fbf5ec;        /* page cream            */
  --ink:#2f2621;       /* primary text          */
  --muted:#948a80;     /* secondary text        */
  --line:#ece0cf;      /* hairline / border     */
  --card:#fffdf9;      /* raised surface        */
  --accent:#ff7a4d;    /* coral primary         */
  --accent-2:#ffe6da;  /* coral tint            */
  --accent-ink:#b8461f;/* text on coral tint    */
  --good:#1fae98;      /* teal success          */
  --good-2:#dcf5f0;    /* teal tint             */
  --bad:#e2604f;       /* error                 */
  --rose:#cf5168;      /* mouth interior        */
  --tongue:#ff6b81;    /* mascot tongue         */

  /* spacing — 8-point scale */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;

  /* radius + elevation */
  --r-sm:9px; --r-md:14px; --r-lg:18px; --r-xl:22px;
  --shadow-btn:0 2px 0 var(--line);
  --shadow-pop:0 6px 16px rgba(255,122,77,.16);
}
.fred{font-family:var(--font-display)}
.hand{font-family:var(--font-hand)}