/* Galago — design tokens. Single source for color, type, space, motion. PRD §11. */
:root {
  /* ---- Neutral / UI palette (warm, soft) ---- */
  --c-ink: #2c2434;
  --c-ink-soft: #5b5168;
  --c-paper: #fff8ef;
  --c-paper-2: #fdeede;
  --c-card: #ffffff;
  --c-line: #e7dccf;
  --c-shadow: rgba(60, 36, 52, 0.14);

  /* ---- Brand ---- */
  --c-brand: #f0883e; /* fennec amber */
  --c-brand-ink: #b4541a;
  --c-accent: #6c63c4; /* twilight violet */
  --c-paw: #f0a73e; /* care-point gold */

  /* ---- Semantic states (NEVER color-only — always paired w/ icon/motion, PRD §8.5) ---- */
  --c-good: #2fa97a;
  --c-good-soft: #dff3ea;
  --c-tryagain: #e08a3c; /* warm, not alarming red */
  --c-tryagain-soft: #fbe9d6;
  --c-locked: #b9ae9f;

  /* ---- Biome accents (per-world theming) ---- */
  --biome-desert: #f2c179;
  --biome-desert-deep: #d98f3c;
  --biome-wetland: #5fb3c4;
  --biome-wetland-deep: #2f7f93;
  --biome-forest: #7fb46a;
  --biome-forest-deep: #4d8a45;
  --biome-rainforest: #4fbf9a;
  --biome-rainforest-deep: #2f9a86;
  --biome-night: #5b5aa6;
  --biome-night-deep: #343170;

  /* ---- Typography ---- */
  --font-sans: 'Nunito', 'Baloo 2', 'Quicksand', system-ui, -apple-system,
    'Segoe UI', Roboto, sans-serif;
  --fs-xs: 0.85rem;
  --fs-sm: 1rem;
  --fs-md: 1.25rem;
  --fs-lg: 1.6rem;
  --fs-xl: 2.2rem;
  --fs-2xl: 3rem;
  --fw-normal: 600;
  --fw-bold: 800;

  /* ---- Spacing scale ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* ---- Radii ---- */
  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-pill: 999px;

  /* ---- Touch targets (touch-first, PRD §7) ---- */
  --tap-min: 64px; /* minimum interactive target */
  --tap-primary: 88px; /* primary answer targets */

  /* ---- Motion (respect reduced-motion, PRD §11) ---- */
  --dur-fast: 120ms;
  --dur-med: 240ms;
  --dur-slow: 420ms;
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* ---- Elevation ---- */
  --elev-1: 0 2px 6px var(--c-shadow);
  --elev-2: 0 6px 18px var(--c-shadow);
  --elev-3: 0 14px 36px var(--c-shadow);

  /* ---- Layout ---- */
  --content-max: 1100px;
  --z-overlay: 100;
  --z-toast: 200;
}

/* Biome theming hook: set data-biome on a container to recolor accents. */
[data-biome='desert'] {
  --biome: var(--biome-desert);
  --biome-deep: var(--biome-desert-deep);
}
[data-biome='wetland'] {
  --biome: var(--biome-wetland);
  --biome-deep: var(--biome-wetland-deep);
}
[data-biome='forest'] {
  --biome: var(--biome-forest);
  --biome-deep: var(--biome-forest-deep);
}
[data-biome='rainforest'] {
  --biome: var(--biome-rainforest);
  --biome-deep: var(--biome-rainforest-deep);
}
[data-biome='night'] {
  --biome: var(--biome-night);
  --biome-deep: var(--biome-night-deep);
}

/* Reduced motion: honor OS setting and the in-app toggle (body.reduced-motion). */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-med: 1ms;
    --dur-slow: 1ms;
  }
}
body.reduced-motion {
  --dur-fast: 1ms;
  --dur-med: 1ms;
  --dur-slow: 1ms;
}
body.reduced-motion * {
  animation-duration: 1ms !important;
  transition-duration: 1ms !important;
}