/* ============================================================
   mU Greens and Greens — design tokens (single source of truth)
   Every colour, size and effect used anywhere in this package
   is defined here. Page and component CSS reference vars only.
   Measured WCAG ratios noted where a colour carries text.
   ============================================================ */
:root {
  /* ---- Brand colours (fixed by the logo — dark-native) ---- */
  --brand-lime: #A8D830;        /* sprout lime · 1.68:1 on white — NEVER text/icons on light */
  --brand-leaf: #30D030;        /* leaf green · 8.66:1 on Soil — dark surfaces only */
  --brand-soil: #181810;        /* the roundel's warm olive-black disc */
  --brand-gradient: linear-gradient(90deg, #A8D830, #30D030); /* lives inside the mark only */

  /* ---- Working greens (light-surface voice) ---- */
  --green-deep: #0D3507;        /* 13.73:1 white / 12.55:1 paper · headings, primary buttons */
  --green-forest: #1A6A0E;      /* 6.75:1 white / 6.17:1 paper · links, icons */

  /* ---- Feather greys (olive-warmed neutral ramp) ---- */
  --grey-100: #ECEBDF;
  --grey-200: #D8D7C9;
  --grey-300: #B0AFA2;          /* 8.07:1 on Soil · secondary text on dark; decorative on light */
  --grey-400: #83827A;          /* 3.53:1 on paper · decorative / ≥24px only on light */
  --grey-500: #565549;          /* 6.88:1 on paper · secondary text on light */
  --grey-600: #34332B;

  /* ---- Accents (from the produce; flags & live indicators only) ---- */
  --accent-harvest: #A3195B;    /* red-amaranth stem · 6.74:1 paper; white on it 7.38:1 — LEAD accent */
  --accent-marigold: #E8A013;   /* alternate · fill only, soil text 8.05:1 */
  --accent-harvest-on-dark: #F27DB4; /* harvest, lightened for Soil surfaces */

  /* ---- Status (success is teal, never a brand green) ---- */
  --status-success: #0C6B5A;    /* 5.88:1 on paper */
  --status-success-bg: #E3EFE7;
  --status-warning: #8A5A00;    /* 5.42:1 on paper */
  --status-warning-bg: #F9EFD6;
  --status-error: #B3261E;      /* 5.97:1 on paper */
  --status-error-bg: #F9E7E3;
  --status-info: #1D5C86;       /* 6.56:1 on paper */
  --status-info-bg: #E4EDF3;

  /* ---- Surfaces ---- */
  --surface-paper: #F6F5EC;     /* page ground */
  --surface-card: #FFFFFF;      /* cards; product photos sit on white */
  --surface-tint: #EDF3DA;      /* lime tint · takeaway boxes, fresh-badge fill */
  --surface-soil: #181810;      /* brand moments: hero, footer, training, packaging */
  --surface-soil-raised: #23231A;

  /* ---- Text ---- */
  --text-primary: #181810;
  --text-secondary: #565549;
  --text-tertiary: #83827A;
  --text-on-dark: #F6F5EC;      /* 16.31:1 on Soil */
  --text-secondary-on-dark: #B0AFA2;
  --text-on-lime: #181810;      /* 10.65:1 */
  --text-link: #1A6A0E;
  --text-link-hover: #0D3507;

  /* ---- Actions ---- */
  --action-primary: #0D3507;
  --action-primary-hover: #14520C;
  --action-primary-text: #FFFFFF;
  --action-on-dark: #A8D830;    /* lime fill + soil label — dark surfaces only */
  --action-on-dark-hover: #BCE84A;
  --action-on-dark-text: #181810;
  --action-whatsapp: #25D366;   /* WhatsApp brand green, soil label */
  --action-whatsapp-hover: #3BDD78;
  --action-whatsapp-text: #181810;
  --action-wash: rgba(13,53,7,.08);  /* secondary/ghost hover fill */

  /* ---- Lines, borders, focus ---- */
  --border-line: #DDDCCE;
  --border-strong: #B0AFA2;
  --border-on-dark: #3A392E;
  --border-on-dark-soft: rgba(246,245,236,.3);
  --badge-fresh-border: #C9DCA4;
  --focus-ring: #1A6A0E;

  /* ---- On-dark tint washes ---- */
  --wash-lime-on-dark: rgba(168,216,48,.14);
  --wash-paper-on-dark: rgba(246,245,236,.1);

  /* ---- Typography ----
     Display/UI: Archivo variable (wght 100–900, wdth 62–125, italic) — ₹ + tabular figures.
     Text: Literata variable (wght 200–900, opsz 7–72) — long-form reading. */
  --font-display: "Archivo", "Arial Narrow", sans-serif;
  --font-text: "Literata", Georgia, serif;
  --stretch-display: 72%;
  --stretch-heading: 84%;
  --size-display: 64px;  --lh-display: 1.02;
  --size-h1: 44px;       --lh-h1: 1.08;
  --size-h2: 32px;       --lh-h2: 1.15;
  --size-h3: 24px;       --lh-h3: 1.25;
  --size-h4: 19px;       --lh-h4: 1.35;
  --size-lead: 21px;     --lh-lead: 1.55;
  --size-body: 18px;     --lh-body: 1.68;
  --size-small: 15px;    --lh-small: 1.55;
  --size-caption: 13px;  --lh-caption: 1.4;
  --size-overline: 12px; --ls-overline: 0.09em;
  --size-price: 22px;
  --size-button: 16px;
  --weight-display: 800;
  --weight-heading: 700;
  --weight-ui: 600;
  --measure-article: 680px;   /* ~62ch at 18px Literata */

  /* ---- Spacing (4px base) ---- */
  --space-1: 4px;  --space-2: 8px;   --space-3: 12px;
  --space-4: 16px; --space-5: 24px;  --space-6: 32px;
  --space-7: 48px; --space-8: 64px;  --space-9: 96px;
  --container-max: 1200px;

  /* ---- Radii ---- */
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px;
  --radius-pill: 999px; --radius-round: 50%;

  /* ---- Elevation (warm, soil-tinted — never blue) ---- */
  --shadow-card: 0 1px 2px rgba(24,24,16,.05), 0 3px 10px rgba(24,24,16,.06);
  --shadow-lift: 0 2px 4px rgba(24,24,16,.06), 0 10px 28px rgba(24,24,16,.12);
  --shadow-overlay: 0 8px 16px rgba(24,24,16,.14), 0 24px 60px rgba(24,24,16,.22);

  /* ---- Motion (grow/unfurl; no bounces) ---- */
  --ease-grow: cubic-bezier(.22, 1, .36, 1);
  --ease-standard: cubic-bezier(.4, 0, .2, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 450ms;
}

/* Mobile type overrides — most traffic is mid-range Android */
@media (max-width: 640px) {
  :root {
    --size-display: 40px; --size-h1: 32px; --size-h2: 26px;
    --size-h3: 20px; --size-h4: 17px; --size-lead: 19px;
    --size-body: 17px; --size-price: 20px;
  }
}