:root {
  /* Zimkari jungle-island palette — vivid, rich, playful */
  --color-jungle: #1a7a52;
  --color-jungle-dark: #0d4a32;
  --color-canopy: #2ecc71;
  --color-canopy-dark: #1f9d57;
  --color-lagoon: #1a9aaa;
  --color-lagoon-dark: #127a87;
  --color-mountain: #5c4d7a;
  --color-mountain-dark: #3f3458;
  --color-treasure: #e8a020;
  --color-treasure-dark: #b8780a;
  --color-sunset: #e85d24;
  --color-sunset-dark: #c44512;
  --color-bloom: #9b4de8;
  --color-bloom-dark: #6f2fc4;

  /* Legacy aliases used across components */
  --color-blue: var(--color-lagoon);
  --color-blue-dark: var(--color-lagoon-dark);
  --color-red: #d63a45;
  --color-red-dark: #a82832;
  --color-yellow: #f5c518;
  --color-gold: var(--color-treasure);
  --color-green: var(--color-canopy);
  --color-green-dark: var(--color-canopy-dark);
  --color-orange: var(--color-sunset);
  --color-purple: var(--color-bloom);
  --color-purple-dark: var(--color-bloom-dark);

  /* Surfaces */
  --surface-page: #e6f2ea;
  --surface-panel: #fffef9;
  --surface-panel-alt: #f4faf6;
  --surface-inset: #dceee3;
  --surface-night: #1a2420;

  /* Text */
  --text-primary: #14231c;
  --text-secondary: #3d5248;
  --text-muted: #5c7267;
  --text-inverse: #fffef9;

  /* Borders & shadows — darker outlines for game UI contrast */
  --border-color: #6a8f7a;
  --border-strong: #2f4f3f;
  --shadow-sm: 0 2px 0 rgba(20, 35, 28, 0.12);
  --shadow-md: 0 4px 0 rgba(20, 35, 28, 0.16);
  --shadow-panel: 0 3px 0 var(--border-strong);

  /* Modal */
  --modal-backdrop: rgba(20, 35, 28, 0.55);
  --modal-blur: 6px;

  /* Radius */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* Typography */
  --font-family: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-size-xs: 0.7rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.375rem;
  --font-size-2xl: 1.75rem;
  --line-height-tight: 1.2;
  --line-height-normal: 1.45;

  /* Layout */
  --header-height: 56px;
  --bottom-nav-height: 64px;
  --pet-strip-height: 100px;
  --pet-strip-width: 300px;
  --player-strip-height: 64px;
  --content-max-width: 720px;
  --chrome-max-width: 1100px;
  --chrome-gutter: clamp(16px, 4vw, 28px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* Z-index */
  --z-header: 100;
  --z-pet-widget: 108;
  --z-bottom-nav: 110;
  --z-drawer: 200;
  --z-modal: 300;
  --z-modal-confirm: 310;
  --z-alert: 400;
}