/* ============================================================
   AgroAI — shared design tokens
   Loaded first by every page (map tool + content pages) so the
   whole multi-page site draws from one palette / type / spacing
   source. Page-specific CSS (styles.css, site.css) assumes these.

   THEME: white + agricultural green (light). One coordinated set
   of semantic tokens, mapped onto a single green/neutral shade
   scale — reference the tokens, don't scatter raw hex.
   ============================================================ */
:root {
  /* ---- Green ramp (forest / leaf) ---- */
  --green-50:  #F1F8EE;
  --green-100: #DEEED2;
  --green-200: #BEDDA9;
  --green-300: #93C77B;
  --green-400: #5FA851;
  --green-500: #3E8B3A;
  --green-600: #2E7D32;   /* primary accent */
  --green-700: #266A2A;
  --green-800: #1E5422;
  --green-900: #14361A;   /* darkest — text */

  /* ---- Surfaces & backgrounds (white + pale green neutrals) ---- */
  --bg:            #F4F8F1;   /* app base — pale green-tinted off-white */
  --surface:       #FFFFFF;   /* cards, panels, sidebars */
  --surface-2:     #EFF5EB;   /* nested cards, inputs, raised rows */
  --surface-glass: rgba(255, 255, 255, 0.88);   /* floating chrome over the map */
  --border:        #DEE9D7;   /* hairlines, dividers */
  --border-strong: #C7D8BD;   /* emphasised edges */

  /* ---- Primary green (actions / active / accents) ---- */
  --accent:        #2E7D32;   /* forest green — AA on white (~4.7:1) */
  --accent-hover:  #276B2B;
  --accent-press:  #1F5A23;
  --accent-ink:    #FFFFFF;   /* text/icon sitting on a green fill */
  --accent-weak:   rgba(46, 125, 50, 0.10);
  --accent-line:   rgba(46, 125, 50, 0.28);

  /* ---- Supporting data hues (AA on white) ---- */
  --water:         #2E6FB0;   /* moisture / weather data */
  --water-weak:    rgba(46, 111, 176, 0.10);
  --water-line:    rgba(46, 111, 176, 0.28);

  --wheat:         #8A6310;   /* warnings / needs-irrigation */
  --wheat-weak:    rgba(214, 158, 46, 0.14);
  --wheat-line:    rgba(214, 158, 46, 0.40);

  --danger:        #B23B2E;   /* errors */
  --danger-weak:   rgba(178, 59, 46, 0.10);
  --danger-line:   rgba(178, 59, 46, 0.28);

  /* ---- Text ---- */
  --text:          #16301C;   /* primary text — near-black green (~14:1 on white) */
  --muted:         #51695A;   /* secondary / labels (green-gray, AA) */
  --muted-2:       #5E7867;   /* tertiary / meta (sage, AA) */

  /* ---- Type ---- */
  --font-head: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* ---- Spacing scale (4 / 8 / 12 / 16 / 24) ---- */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s6: 24px;

  /* ---- Radii ---- */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-pill: 999px;

  /* ---- Elevation (soft, green-tinted — not black) + depth ---- */
  --shadow-chrome: 0 16px 40px -16px rgba(20, 54, 26, 0.22), 0 2px 8px rgba(20, 54, 26, 0.10);
  --shadow-lift:   0 24px 50px -18px rgba(20, 54, 26, 0.26), 0 6px 14px rgba(20, 54, 26, 0.12);
  --shadow-glow:   0 8px 20px -8px rgba(46, 125, 50, 0.30);
  --shadow-glow-lg:0 14px 30px -8px rgba(46, 125, 50, 0.40);
  --glass-edge:    inset 0 1px 0 rgba(255, 255, 255, 0.7);   /* subtle top highlight on white */

  /* ---- Gradients (dimensional fills) ---- */
  --accent-grad:   linear-gradient(150deg, #3E9A43 0%, #2E7D32 100%);
  --surface-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 44%);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}