/* Nutri colour tokens (Nov 2026). Loaded first on every page that uses layout.blade.php.
   The green scale is built on the logo green (#63a54f, step 500). Buttons, backgrounds, borders
   and text use these steps only; icons may use other greens. Translucent tints keep a literal
   (for example #63a54f1f) because var() cannot take an alpha, but must use a scale colour. */
:root {
  --nutri-green-50: #f4fff1;   /* tinted sections and cards */
  --nutri-green-100: #e4f0e1;  /* hover and selected backgrounds, top bar */
  --nutri-green-200: #cfe3c7;  /* borders and dividers */
  --nutri-green-300: #b1e0a3;  /* soft fills, strong borders */
  --nutri-green-500: #63a54f;  /* logo green: primary green buttons, links */
  --nutri-green-600: #4c873e;  /* hover and pressed state of 500 */
  --nutri-green-700: #407a35;  /* text on light backgrounds, dark buttons, nav bar */
  --nutri-green-800: #2f5f27;  /* text on green tints */
  --nutri-green-900: #1a3a1f;  /* forest: footer and deep overlays */
  --nutri-olive: #9ca84d;      /* testimonial and badge accents (Figma Desktop - 2) */
  --nutri-mist: #f8faf6;       /* neutral page sections (Figma Desktop - 2) */
  --nutri-plum: #7a458b;       /* brand plum: primary calls to action (logo, Figma Desktop - 2) */
  --nutri-plum-dark: #6d3d7c;  /* hover and pressed state of plum */
}