/* ═══════════════════════════════════════════════
   GRASSOPS AI — Brand Tokens
   Direction: Living Field (04)
   Locked: April 2026
═══════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Outfit:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  /* ── Backgrounds ── */
  --bg:            #FAFCF8;
  --surface:       #FFFFFF;
  --surface-green: rgba(45, 122, 69, 0.06);
  --surface-amber: rgba(217, 119, 64, 0.07);
  --surface-blue:  rgba(58, 128, 178, 0.06);
  --surface-dark:  #172B1E;

  /* ── Text ── */
  --headline:      #172B1E;
  --body:          #3A5040;
  --muted:         #7A9E80;
  --on-dark:       #F0F7EC;
  --on-dark-muted: #8AB898;

  /* ── Lawn Greens ── */
  --green-900:     #1A4A2A;
  --green-700:     #2D7A45;   /* primary accent */
  --green-500:     #4A9E60;   /* fresh-cut grass */
  --green-300:     #82C88E;   /* blooming meadow */
  --green-100:     #C4E8C8;   /* spring morning */
  --green-50:      #EBF7ED;

  /* ── Amber Orange (CTA) ── */
  --amber-700:     #C2622A;   /* hover */
  --amber-500:     #D97740;   /* primary CTA */
  --amber-300:     #F5B482;
  --amber-100:     #FDE8D4;
  --amber-50:      #FEF4EC;

  /* ── Pond Blues ── */
  --blue-700:      #2A6090;
  --blue-500:      #3A80B2;   /* deep pond */
  --blue-300:      #7AB8D8;   /* sky reflection */
  --blue-100:      #C8E4F0;   /* morning mist */
  --blue-50:       #EBF5FB;

  /* ── Borders ── */
  --border:        #D8EDD8;
  --border-amber:  #F0CCA8;
  --border-blue:   #B8D8EC;

  /* ── Typography ── */
  --font-headline: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body:     'Outfit', system-ui, sans-serif;
  --font-mono:     'IBM Plex Mono', 'Courier New', monospace;

  /* ── Type Scale ── */
  --text-xs:    11px;
  --text-sm:    13px;
  --text-base:  15px;
  --text-md:    17px;
  --text-lg:    20px;
  --text-xl:    24px;
  --text-2xl:   32px;
  --text-3xl:   42px;
  --text-4xl:   56px;
  --text-5xl:   72px;

  /* ── Font Weights ── */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-black:   800;

  /* ── Spacing Scale ── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;

  /* ── Border Radius ── */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-pill: 100px;

  /* ── Shadows ── */
  --shadow-sm:  0 1px 3px rgba(23, 43, 30, 0.06), 0 1px 2px rgba(23, 43, 30, 0.04);
  --shadow-md:  0 2px 8px rgba(23, 43, 30, 0.07), 0 4px 24px rgba(23, 43, 30, 0.06);
  --shadow-lg:  0 4px 16px rgba(23, 43, 30, 0.08), 0 16px 48px rgba(23, 43, 30, 0.08);
  --shadow-cta: 0 4px 16px rgba(217, 119, 64, 0.35);

  /* ── Gradients ── */
  --gradient-meadow: linear-gradient(90deg, var(--green-700) 0%, var(--green-500) 35%, var(--amber-500) 65%, var(--blue-500) 100%);
  --gradient-surface: radial-gradient(ellipse 60% 80% at 110% 50%, var(--surface-amber) 0%, transparent 70%), radial-gradient(ellipse 50% 60% at -10% 80%, var(--surface-green) 0%, transparent 70%);
  --gradient-dark: linear-gradient(135deg, var(--green-900) 0%, #1A3528 100%);
}