/* ============================================================
   AlterAgro — Design System
   Agri-tech: deep field-green + harvest-amber + precision steel
   Display: Space Grotesk · Body: Inter
   ============================================================ */

:root {
  /* ── Colour ─────────────────────────────── */
  --green-900: #0C3322;
  --green-800: #114229;
  --green-700: #16623E;   /* primary */
  --green-600: #1E7A4D;
  --green-500: #2E9866;
  --green-050: #EAF3ED;

  --color-primary:      #16623E;
  --color-primary-rgb:  22, 98, 62;
  --color-primary-dark: #0C3322;
  --color-accent:       #E0A53B;   /* harvest amber / soil */
  --color-accent-rgb:   224, 165, 59;
  --color-accent-dark:  #C2872A;
  --color-steel:        #5B6770;   /* precision grey */
  --color-steel-light:  #8A949B;

  --color-surface:      #FFFFFF;
  --color-surface-alt:  #F3F6F3;
  --color-surface-deep: #0C3322;   /* dark sections */
  --color-text:         #16231C;
  --color-text-muted:   #586860;
  --color-text-invert:  #EAF3ED;
  --color-border:       #DCE4DD;
  --color-border-strong:#C3CFC6;
  --color-success:      #2E9866;
  --color-error:        #D14343;

  /* ── Typography ─────────────────────────── */
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'Space Grotesk', ui-monospace, 'SFMono-Regular', monospace;

  --text-xs:   clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --text-sm:   clamp(0.8125rem, 0.78rem + 0.18vw, 0.875rem);
  --text-base: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
  --text-lg:   clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
  --text-xl:   clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
  --text-2xl:  clamp(1.5rem, 1.25rem + 1.3vw, 2.125rem);
  --text-3xl:  clamp(1.875rem, 1.45rem + 2.1vw, 2.875rem);
  --text-hero: clamp(2.5rem, 1.7rem + 3.6vw, 4.75rem);

  --leading-tight: 1.1;
  --leading-snug:  1.28;
  --leading-base:  1.62;
  --tracking-wide: 0.08em;

  /* ── Spacing ────────────────────────────── */
  --space-xs: 0.25rem;  --space-sm: 0.5rem;  --space-md: 1rem;
  --space-lg: 1.5rem;   --space-xl: 2rem;    --space-2xl: 3rem;
  --space-3xl: 4rem;    --space-4xl: 6rem;
  --space-section: clamp(4rem, 8vw, 7.5rem);

  /* ── Layout ─────────────────────────────── */
  --container-max: 1180px;
  --container-narrow: 760px;
  --container-pad: clamp(1.25rem, 4vw, 2.5rem);

  /* ── Effects ────────────────────────────── */
  --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-full: 9999px;
  --shadow-sm: 0 1px 2px rgba(12,51,34,0.06);
  --shadow-md: 0 6px 18px rgba(12,51,34,0.08);
  --shadow-lg: 0 18px 44px rgba(12,51,34,0.12);
  --ring: 0 0 0 3px rgba(var(--color-accent-rgb), 0.45);

  /* ── Motion ─────────────────────────────── */
  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --d-fast: 160ms; --d-base: 300ms; --d-slow: 560ms;
}

/* ── Reset ───────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-base);
  color: var(--color-text);
  background: var(--color-surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
ul, ol { list-style: none; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: var(--leading-tight); letter-spacing: -0.01em; }

/* ── Typography helpers ──────────────────── */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent-dark);
  display: inline-flex; align-items: center; gap: 0.5rem;
}
.eyebrow::before { content: ""; width: 1.75rem; height: 1px; background: currentColor; opacity: 0.6; }
.section-title { font-size: var(--text-3xl); max-width: 18ch; }
.lede { font-size: var(--text-lg); color: var(--color-text-muted); max-width: 60ch; }

/* ── Layout utilities ────────────────────── */
.container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); }
.container-narrow { max-width: var(--container-narrow); margin-inline: auto; padding-inline: var(--container-pad); }
.section { padding-block: var(--space-section); }
.section--alt { background: var(--color-surface-alt); }
.section--deep { background: var(--color-surface-deep); color: var(--color-text-invert); }
.section--deep .section-title, .section--deep h2, .section--deep h3 { color: #fff; }
.section--deep .lede { color: rgba(234,243,237,0.8); }
.stack > * + * { margin-top: var(--space-md); }

/* ── Accessibility ───────────────────────── */
.skip-link {
  position: absolute; left: 0.5rem; top: -3rem; z-index: 200;
  background: var(--color-primary); color: #fff; padding: 0.6rem 1rem;
  border-radius: var(--radius-sm); transition: top var(--d-fast) var(--ease);
}
.skip-link:focus { top: 0.5rem; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-sm); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}