/* Design tokens. Daylight block world: sky, grass, dirt, stone, with gem teal as the reward colour. */
:root {
  --sky-1: #8fd3ff;
  --sky-2: #d4f0ff;
  --grass: #5fb346;
  --grass-dark: #3f8a2e;
  --dirt: #8a5a3b;
  --dirt-dark: #6b432a;
  --stone: #9aa1ab;
  --stone-dark: #6b727c;
  --stone-light: #c5cad1;
  --wood: #c08a50;
  --wood-dark: #8f6233;
  --ink: #1f2430;
  --ink-soft: #4a5263;
  --paper: #fff8e7;
  --paper-2: #f3e7c9;
  --white: #ffffff;
  --gem: #19b8ab;
  --gem-dark: #0e8279;
  --gem-light: #b8fff6;
  --gold: #f6c33b;
  --gold-dark: #b98510;
  --good: #3f9b2f;
  --good-bg: #dff5d3;
  --bad: #d9413f;
  --bad-bg: #ffe1dd;
  --hint: #2f6fd0;
  --hint-bg: #e2eeff;

  --font-display: ui-rounded, "SF Pro Rounded", "Nunito", "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-body: system-ui, -apple-system, "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: clamp(1.5rem, 1.2rem + 1.6vw, 2rem);
  --text-hero: clamp(2.1rem, 1.4rem + 4vw, 3.6rem);
  --text-question: clamp(1.25rem, 1rem + 1.4vw, 1.75rem);
  --text-expr: clamp(2rem, 1.4rem + 3.6vw, 3.25rem);

  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;

  --px: 4px;                 /* one "pixel" of the block world */
  --edge: 3px solid var(--ink);
  --drop: 0 var(--px) 0 var(--ink);
  --radius: 6px;

  --fast: 120ms;
  --normal: 240ms;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --page: 68rem;
}

/* World themes (cosmetic, chosen in the shop). Only the backdrop changes. */
[data-theme="theme.desert"] { --sky-1: #ffd98a; --sky-2: #fff1cf; --grass: #e6c26a; --grass-dark: #c29a3e; --dirt: #c98f4e; --dirt-dark: #a06c33; }
[data-theme="theme.snow"] { --sky-1: #b9dcf5; --sky-2: #eef8ff; --grass: #f4fbff; --grass-dark: #c3dcea; --dirt: #8fa4b5; --dirt-dark: #6f8496; }
[data-theme="theme.cave"] { --sky-1: #7d8794; --sky-2: #b3bcc7; --grass: #7a828d; --grass-dark: #5b626c; --dirt: #4a4f58; --dirt-dark: #363a41; }
[data-theme="theme.night"] { --sky-1: #2b3a67; --sky-2: #56669a; --grass: #3d7a4a; --grass-dark: #2a5a36; --dirt: #5a3f30; --dirt-dark: #432d21; }