/* ─────────────────────────────────────────────────
   GLOBAL CROPSCIENCE — CSS DESIGN TOKENS
   ───────────────────────────────────────────────── */
:root {
  /* ── COLOURS (Emerald Green Palette) ── */
  --color-green-deep: #064e3b; /* Deep Emerald */
  --color-green-mid: #059669; /* Mid Emerald */
  --color-green-bright: #10b981; /* Bright Emerald */

  /* Retaining teal names for compatibility with existing files, but using green values */
  --color-teal-deep: #064e3b;
  --color-teal-mid: #059669;
  --color-teal-bright: #10b981;

  --color-emerald-deep: #064e3b;
  --color-emerald-mid: #059669;

  --color-lime: #6dbf3e;
  --color-lime-dark: #4a9b26;

  --color-white: #ffffff;
  --color-offwhite: #f8faf9; /* Tinted towards green */
  --color-ice: #ecfdf5; /* Emerald ice */
  --color-frost: #d1fae5; /* Emerald frost */
  --color-grid-bg: #f3fbf7;

  --color-navy: #022c22; /* Very deep emerald-navy */
  --color-slate: #064e3b; /* Deep emerald slate */
  --color-charcoal: #1f2937;

  --color-text: #06201a; /* Deepest emerald text */
  --color-subtext: #374151;
  --color-muted: #6b7280;
  --color-border: #d1fae5;
  --color-border-dark: rgba(255, 255, 255, 0.08);

  --color-success: #10b981;
  --color-warning: #f5a623;
  --color-error: #ef4444;

  /* ── GRADIENTS ── */
  --grad-hero: linear-gradient(135deg, #064e3b 0%, #059669 55%, #022c22 100%);
  --grad-cta: linear-gradient(135deg, #6dbf3e 0%, #4a9b26 100%);
  --grad-teal: linear-gradient(135deg, #059669 0%, #064e3b 100%);
  --grad-green: linear-gradient(135deg, #059669 0%, #064e3b 100%);
  --grad-dark-section: linear-gradient(180deg, #022c22 0%, #064e3b 100%);
  --grad-card-top: linear-gradient(180deg, #ecfdf5 0%, #f8faf9 100%);

  /* ── TYPOGRAPHY ── */
  --font-display: "Outfit", system-ui, sans-serif;
  --font-body: "Nunito Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "Courier New", monospace;

  --text-xs: clamp(0.75rem, 0.7vw, 0.85rem);
  --text-sm: clamp(0.875rem, 0.9vw, 1rem);
  --text-base: clamp(1rem, 1.1vw, 1.2rem);
  --text-lg: clamp(1.125rem, 1.2vw, 1.35rem);
  --text-xl: clamp(1.25rem, 1.5vw, 1.75rem);
  --text-2xl: clamp(1.5rem, 2vw, 2rem);
  --text-3xl: clamp(1.75rem, 2.5vw, 2.5rem);
  --text-hero: clamp(2.2rem, 4vw, 4rem);

  /* Fluid Typography (UI Fix Guid) */
  --fs-xs: clamp(0.75rem, 0.7vw, 0.85rem);
  --fs-sm: clamp(0.875rem, 0.9vw, 1rem);
  --fs-base: clamp(1rem, 1.1vw, 1.2rem);
  --fs-lg: clamp(1.25rem, 1.5vw, 1.75rem);
  --fs-xl: clamp(1.75rem, 2.5vw, 2.5rem);
  --fs-hero: clamp(2.2rem, 4vw, 4rem);

  /* ── SPACING ── */
  --space-1: clamp(4px, 0.5vw, 6px);
  --space-2: clamp(8px, 1vw, 12px);
  --space-3: clamp(12px, 1.5vw, 20px);
  --space-4: clamp(16px, 1.8vw, 24px);
  --space-5: clamp(20px, 2vw, 32px);
  --space-6: clamp(28px, 3vw, 48px);
  --space-7: clamp(32px, 4vw, 64px);
  --space-8: clamp(48px, 6vw, 96px);
  --space-section: clamp(60px, 8vw, 120px);

  /* Fluid Spacing (UI Fix Guid) */
  --space-xs: clamp(8px, 1vw, 12px);
  --space-sm: clamp(12px, 1.5vw, 20px);
  --space-md: clamp(20px, 2vw, 32px);
  --space-lg: clamp(32px, 4vw, 64px);
  --space-xl: clamp(48px, 6vw, 96px);

  /* ── BORDER RADIUS ── */
  --radius-none: 0;
  --radius-xs: clamp(2px, 0.2vw, 4px);
  --radius-sm: clamp(4px, 0.4vw, 8px);
  --radius-md: clamp(6px, 0.8vw, 12px);
  --radius-lg: clamp(12px, 1.5vw, 20px);
  --radius-xl: clamp(16px, 2vw, 28px);
  --radius-pill: 9999px;

  /* ── SHADOWS ── */
  --shadow-card:
    0 1px 4px rgba(6, 78, 59, 0.08), 0 4px 16px rgba(6, 78, 59, 0.06);
  --shadow-hover:
    0 4px 24px rgba(6, 78, 59, 0.18), 0 1px 4px rgba(0, 0, 0, 0.06);
  --shadow-modal:
    0 20px 60px rgba(2, 44, 34, 0.3), 0 4px 16px rgba(0, 0, 0, 0.14);
  --shadow-btn: 0 2px 12px rgba(109, 191, 62, 0.35);
  --shadow-nav: 0 1px 0 var(--color-border), 0 4px 20px rgba(6, 78, 59, 0.07);

  /* ── LAYOUT ── */
  --container-max: 1320px;
  --container-pad: clamp(20px, 5vw, 64px);
  --grid-gutter: clamp(16px, 2.5vw, 32px);

  /* ── TRANSITIONS ── */
  --transition-fast: 0.18s ease;
  --transition-normal: 0.28s ease;
  --transition-slow: 0.45s ease-out;
}