/* ============================================================
   AGRIVANA — Design Tokens & Theme System (Premium Agricultural Export)
   Curated Palette: 55-60% Warm Ivory/White, 20-25% Botanical Green,
   10-15% Soft Sage, 5% Agrivana Gold Accent.
   ============================================================ */

:root {

  /* ── 1. Primary Brand Colors ── */
  --c-botanical:          #0B421F; /* Deep Botanical Green (Dominant Brand Signature) */
  --c-forest:             #155C2A; /* Rich Forest Green */
  --c-fresh:              #2E7D32; /* Vibrant Agricultural Fresh Green */
  --c-dark-surface:       #082e16; /* Deepest Botanical Shade for dark surfaces */
  --c-dark-elevated:      #0e4f26; /* Elevated Dark Element */

  /* ── 2. Accent Colors ── */
  --c-gold:               #C89A32; /* Agrivana Signature Gold */
  --c-gold-harvest:       #D9AD45; /* Harvest Gold / Sunlit Accent */
  --c-gold-light:         #F3E5AB; /* Soft Gold Tint */
  --c-gold-glow:          rgba(200, 154, 50, 0.28);

  /* ── 3. Background & Surface Colors ── */
  --c-ivory:              #F8F4E8; /* Warm Ivory (Signature Background Surface) */
  --c-white:              #FFFFFF; /* Pure Clean White */
  --c-sage:               #EAF0E2; /* Soft Organic Sage */
  --c-very-light:         #F4F7F0; /* Very Light Botanical Mist */
  --c-bg:                 #F8F4E8; /* Default Page Background */
  --c-cream:              #FDFBF7; /* Ultra Soft Off-White */

  /* ── 4. Typography Colors (WCAG AAA/AA) ── */
  --c-text-primary:       #17351F; /* Deep Organic Pine (14.2:1 contrast) */
  --c-text-secondary:     #5D6B60; /* Natural Slate Sage (5.8:1 contrast) */
  --c-text-muted:         #7C887E; /* Soft Botanical Muted (4.6:1 contrast) */

  /* Light Text for Deep Green Sections */
  --c-text-dark-primary:   #FFFFFF;
  --c-text-dark-secondary: #EAF0E2;
  --c-text-dark-muted:     rgba(234, 240, 226, 0.72);

  /* ── 5. Borders & Dividers ── */
  --c-border:             rgba(23, 53, 31, 0.12);
  --c-border-light:       rgba(23, 53, 31, 0.06);
  --c-border-gold:        rgba(200, 154, 50, 0.35);
  --c-border-dark:        rgba(255, 255, 255, 0.14);

  /* ── 6. Gradients ── */
  --gradient-botanical:   linear-gradient(145deg, #0B421F 0%, #155C2A 55%, #2E7D32 100%);
  --gradient-gold:        linear-gradient(135deg, #C89A32 0%, #D9AD45 60%, #E8C165 100%);
  --gradient-ivory:       linear-gradient(180deg, #F8F4E8 0%, #FFFFFF 100%);
  --gradient-sage:        linear-gradient(180deg, #EAF0E2 0%, #F8F4E8 100%);
  --gradient-dark-hero:   linear-gradient(145deg, #072512 0%, #0B421F 60%, #155C2A 100%);

  /* ── 7. Natural Shadows & Elevations ── */
  --shadow-xs:            0 1px 3px rgba(11, 66, 31, 0.05);
  --shadow-sm:            0 3px 10px rgba(11, 66, 31, 0.06);
  --shadow-md:            0 8px 24px rgba(11, 66, 31, 0.08);
  --shadow-lg:            0 14px 40px rgba(11, 66, 31, 0.11);
  --shadow-xl:            0 24px 60px rgba(11, 66, 31, 0.15);
  --shadow-gold:          0 8px 24px rgba(200, 154, 50, 0.22);
  --shadow-dark:          0 16px 48px rgba(0, 0, 0, 0.32);

  /* ── 8. Typography: Families ── */
  --f-primary:            'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --f-secondary:          'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --f-editorial:          'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --f-arabic:             'IBM Plex Sans Arabic', 'Manrope', sans-serif;

  /* ── 9. Typography: Fluid Scale ── */
  --fs-xs:                0.75rem;     /* 12px */
  --fs-sm:                0.875rem;    /* 14px */
  --fs-base:              1rem;        /* 16px */
  --fs-md:                1.125rem;    /* 18px */
  --fs-lg:                1.25rem;     /* 20px */
  --fs-xl:                1.5rem;      /* 24px */
  --fs-2xl:               2rem;        /* 32px */
  --fs-3xl:               2.5rem;      /* 40px */
  --fs-4xl:               3.25rem;     /* 52px */
  --fs-5xl:               4.5rem;      /* 72px */
  --fs-6xl:               5.5rem;      /* 88px */

  /* ── 10. Typography: Weights ── */
  --fw-regular:           400;
  --fw-medium:            500;
  --fw-semibold:          600;
  --fw-bold:              700;
  --fw-extrabold:         800;

  /* ── 11. Typography: Line Heights & Spacing ── */
  --lh-tight:             1.12;
  --lh-snug:              1.32;
  --lh-normal:            1.6;
  --lh-relaxed:           1.75;

  --ls-tight:             -0.03em;
  --ls-normal:            0;
  --ls-wide:              0.04em;
  --ls-wider:             0.08em;
  --ls-widest:            0.15em;

  /* ── 12. Spacing System (8px Baseline) ── */
  --sp-0-5:               0.25rem;  /* 4px */
  --sp-1:                 0.5rem;   /* 8px */
  --sp-1-5:               0.75rem;  /* 12px */
  --sp-2:                 1rem;     /* 16px */
  --sp-3:                 1.5rem;   /* 24px */
  --sp-4:                 2rem;     /* 32px */
  --sp-5:                 2.5rem;   /* 40px */
  --sp-6:                 3rem;     /* 48px */
  --sp-8:                 4rem;     /* 64px */
  --sp-10:                5rem;     /* 80px */
  --sp-12:                6rem;     /* 96px */
  --sp-16:                8rem;     /* 128px */
  --sp-20:                10rem;    /* 160px */

  --section-py:           clamp(4.5rem, 8vw, 7.5rem);

  /* ── 13. Layout Boundaries ── */
  --max-width:            1280px;
  --container-px:         clamp(1.25rem, 4.5vw, 4rem);

  /* ── 14. Organic & Standard Radii Scale ── */
  --r-xs:                 4px;
  --r-sm:                 8px;
  --r-md:                 12px;
  --r-lg:                 18px;
  --r-xl:                 24px;
  --r-2xl:                36px;
  --r-full:               9999px;
  --r-organic-1:          32px 12px 32px 12px;
  --r-organic-2:          16px 40px 16px 40px;
  --r-organic-blob:       42% 58% 62% 38% / 45% 45% 55% 55%;

  /* ── 15. Motion & Transitions ── */
  --ease-out:             cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:          cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:          cubic-bezier(0.34, 1.4, 0.64, 1);
  --t-fast:               180ms;
  --t-base:               280ms;
  --t-slow:               450ms;

  /* ── 16. Accessibility & Touch Targets ── */
  --focus-ring:           0 0 0 3px rgba(200, 154, 50, 0.45);
  --focus-outline:        2px solid var(--c-gold);
  --min-touch-target:     44px;

  /* ── 17. Z-Index Scale ── */
  --z-base:               1;
  --z-above:              10;
  --z-overlay:            50;
  --z-nav:                100;
  --z-modal:              200;
  --z-loader:             300;
}