/* Lumakins design tokens — original IP, modern virtual-pet premium */
:root {
  /* Core palette — warm whimsy, not purple SaaS */
  --ink: #1a1520;
  --ink-soft: #3d3548;
  --cream: #fff8ef;
  --cream-dim: #f3e6d4;
  --parchment: #efe0c8;
  --gold: #e8a838;
  --gold-deep: #c47a12;
  --coral: #e86b5a;
  --coral-deep: #c44a3a;
  --teal: #2a9d8f;
  --teal-deep: #1a6b62;
  --sky-top: #7ec8e8;
  --sky-mid: #b8e0f0;
  --sky-bot: #f5e6c8;
  --grass: #6bbf59;
  --grass-deep: #3d8b3d;
  --shadow: rgba(26, 21, 32, 0.18);
  --shadow-deep: rgba(26, 21, 32, 0.35);
  --glass: rgba(255, 248, 239, 0.72);
  --glass-border: rgba(255, 255, 255, 0.55);
  --glow-gold: 0 0 24px rgba(232, 168, 56, 0.45);
  --glow-teal: 0 0 20px rgba(42, 157, 143, 0.4);

  /* Type */
  --font-display: "Segoe UI", "Avenir Next", "Nunito", system-ui, sans-serif;
  --font-body: "Segoe UI", "Avenir Next", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

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

  /* Radii */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast: 140ms;
  --t-med: 240ms;
  --t-slow: 420ms;

  /* Z */
  --z-bg: 0;
  --z-world: 1;
  --z-pet: 5;
  --z-fx: 10;
  --z-ui: 20;
  --z-nav: 30;
  --z-modal: 40;
  --z-toast: 50;

  /* Layout */
  --nav-h: 64px;
  --panel-w: min(420px, 100%);
  --max-w: 1280px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0ms;
    --t-med: 0ms;
    --t-slow: 0ms;
  }
}