/* ==========================================================================
   JOOY Pet Wellness — Design tokens
   Single source of truth for color, type, spacing and shape used across
   every shared component and page.
   ========================================================================== */

:root {
  /* --- Brand colors --- */
  --jooy-green-900: #0b2e20;   /* deepest green — gradients, overlays */
  --jooy-green-800: #123b2a;   /* primary brand green — header, footer, dark sections, dark buttons */
  --jooy-green-700: #1b4d37;   /* lighter green — borders/dividers on green bg, hovers */
  --jooy-green-600: #256b4a;   /* accent green, icon strokes on cream */

  --jooy-yellow-500: #f7d842;  /* primary brand yellow — CTAs, accents, active states */
  --jooy-yellow-600: #efc90f;  /* yellow hover/active */
  --jooy-yellow-100: #fdf3c9;  /* faint yellow tint, badges bg */

  --jooy-cream-100: #f7f3e7;   /* page background */
  --jooy-cream-50:  #fbf8f1;   /* card / panel background on cream */
  --jooy-cream-200: #efe8d4;   /* subtle border on cream */

  --jooy-white: #ffffff;
  --jooy-text: #1e2b23;        /* body copy on light backgrounds */
  --jooy-text-muted: #55665c;  /* secondary copy on light backgrounds */
  --jooy-text-on-green-muted: #b9c9bf;

  /* --- Typography --- */
  --font-heading: "Baloo 2", "Segoe UI", system-ui, sans-serif;
  --font-body: "Nunito", "Segoe UI", system-ui, sans-serif;

  /* --- Radii --- */
  --radius-pill: 999px;
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;

  /* --- Shadows --- */
  --shadow-sm: 0 2px 10px rgba(11, 46, 32, 0.08);
  --shadow-md: 0 10px 30px rgba(11, 46, 32, 0.12);
  --shadow-btn: 0 6px 16px rgba(247, 216, 66, 0.35);

  /* --- Layout --- */
  --section-py: clamp(2.75rem, 5vw, 5.5rem);
  --section-py-sm: clamp(2rem, 3.5vw, 3.5rem);
  --container-max: 1320px;
}