:root {
  /* ── Pointer tracking (set by JS) ── */
  --pointer-x: 50%;
  --pointer-y: 50%;
  --pointer-from-center: 0;
  --pointer-from-top: 0.5;
  --pointer-from-left: 0.5;
  --background-x: 50%;
  --background-y: 50%;

  /* ── 3D tilt (set by JS) ── */
  --rotate-x: 0deg;
  --rotate-y: 0deg;
  --card-scale: 1;
  --card-opacity: 0;
  --translate-x: 0px;
  --translate-y: 0px;

  /* ── Rainbow holo colors ── */
  --holo-red: #f80e35;
  --holo-yellow: #eedf10;
  --holo-green: #21e985;
  --holo-blue: #0dbde9;
  --holo-violet: #c929f1;

  /* ── Sunpillar colors ── */
  --sunpillar-1: hsl(2, 100%, 73%);
  --sunpillar-2: hsl(53, 100%, 69%);
  --sunpillar-3: hsl(93, 100%, 69%);
  --sunpillar-4: hsl(176, 100%, 76%);
  --sunpillar-5: hsl(228, 100%, 74%);
  --sunpillar-6: hsl(283, 100%, 73%);

  /* ── Pet state glow (changes per mood) ── */
  --pet-glow: hsl(175, 100%, 70%);
  --pet-glow-idle: hsl(175, 50%, 40%);

  /* ── Pet rarity tier (0-4, set by JS) ── */
  --rarity: 0;

  /* ── Scene / sky ── */
  --sky-top: hsl(200, 80%, 65%);
  --sky-bottom: hsl(35, 90%, 80%);
  --ground-color: hsl(120, 35%, 55%);
  --ground-dark: hsl(120, 30%, 40%);

  /* ── UI colors ── */
  --ui-bg: hsl(230, 20%, 14%);
  --ui-surface: hsl(230, 18%, 20%);
  --ui-surface-hover: hsl(230, 18%, 26%);
  --ui-border: hsl(230, 15%, 30%);
  --ui-text: hsl(0, 0%, 92%);
  --ui-text-dim: hsl(0, 0%, 60%);
  --ui-accent: hsl(175, 80%, 50%);
  --ui-accent-glow: hsl(175, 100%, 70%);

  /* ── Stat bar colors ── */
  --hunger-color: hsl(25, 90%, 55%);
  --happiness-color: hsl(340, 85%, 60%);
  --energy-color: hsl(210, 85%, 60%);
  --hygiene-color: hsl(160, 70%, 50%);

  /* ── Layout ── */
  --scene-width: min(400px, calc(100vw - 16px));
  --scene-height: min(480px, 55vh);
  --card-radius: 5% / 3.5%;

  /* ── Timing ── */
  --breathe-speed: 3s;
  --blink-speed: 4s;
  --bounce-speed: 2s;
}

/* ── Mood glow overrides (set via .mood-* on .pet-card) ── */
.mood-happy   { --pet-glow: hsl(45, 100%, 65%); }
.mood-hungry  { --pet-glow: hsl(10, 90%, 55%); }
.mood-sad     { --pet-glow: hsl(220, 70%, 55%); }
.mood-sick    { --pet-glow: hsl(90, 60%, 45%); }
.mood-sleepy  { --pet-glow: hsl(240, 50%, 55%); }
.mood-ecstatic { --pet-glow: hsl(50, 100%, 75%); }