/* ═══════════════════════════════════════════════════════════════
   AGRI GROWTH ENGINE X — UI SYSTEM
   Design tokens, resets, glassmorphism foundations
   ═══════════════════════════════════════════════════════════════ */

/* ── Google Fonts: Sora (display) + DM Sans (body) ─────────── */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&display=swap');

/* ── Design Tokens ──────────────────────────────────────────── */
:root {
  /* Brand */
  --agex-green:       #009345;
  --agex-green-mid:   #00b356;
  --agex-green-lite:  #00c96a;
  --agex-green-pale:  #e8fff2;
  --agex-earth:       #7a5c2e;
  --agex-gold:        #f5a623;

  /* Ink */
  --agex-ink:         #0a1f14;
  --agex-ink-2:       #1f4a30;
  --agex-ink-soft:    #4a7a5e;
  --agex-muted:       #8fada0;

  /* Surfaces */
  --agex-surface:     rgba(255,255,255,0.72);
  --agex-surface-2:   rgba(255,255,255,0.45);
  --agex-surface-3:   rgba(235,255,243,0.6);
  --agex-glass-border:rgba(255,255,255,0.55);
  --agex-glass-shadow:0 12px 40px rgba(0,60,30,0.14);

  /* Backgrounds */
  --agex-bg:          #f4fdf7;
  --agex-bg-hero:     linear-gradient(135deg,#e8fff2 0%,#f0fdf8 50%,#fff8e8 100%);

  /* Typography */
  --agex-font-display:  'Sora', ui-sans-serif, system-ui, sans-serif;
  --agex-font-body:     'DM Sans', ui-sans-serif, system-ui, sans-serif;

  /* Radii */
  --agex-r-sm:  10px;
  --agex-r:     18px;
  --agex-r-lg:  28px;
  --agex-r-xl:  40px;
  --agex-r-pill:9999px;

  /* Spacing scale */
  --agex-sp-xs: 6px;
  --agex-sp-sm: 12px;
  --agex-sp:    18px;
  --agex-sp-lg: 28px;
  --agex-sp-xl: 48px;

  /* Motion */
  --agex-ease:        cubic-bezier(.22,.68,0,1.2);
  --agex-ease-out:    cubic-bezier(.16,1,.3,1);
  --agex-dur:         .25s;

  /* Z layers */
  --agex-z-fab:       8000;
  --agex-z-assistant: 9000;
  --agex-z-progress:  9999;
  --agex-z-sticky:    7000;
}

/* ── Global reset ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.agex-active {
  font-family: var(--agex-font-body);
  background: var(--agex-bg);
  color: var(--agex-ink);
  line-height: 1.65;
  overflow-x: hidden;
}

/* ── Scroll progress bar ────────────────────────────────────── */
#agex-progress-bar {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--agex-green), var(--agex-green-lite), var(--agex-gold));
  z-index: var(--agex-z-progress);
  transition: width .1s linear;
  border-radius: 0 var(--agex-r-pill) var(--agex-r-pill) 0;
}

/* ── Glass utility mixin (applied via classes) ──────────────── */
.agex-glass {
  background: var(--agex-surface);
  border: 1px solid var(--agex-glass-border);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: var(--agex-glass-shadow);
  border-radius: var(--agex-r);
}

/* ── Typography scale ───────────────────────────────────────── */
body.agex-active h1,
body.agex-active h2,
body.agex-active h3,
body.agex-active h4,
body.agex-active h5,
body.agex-active h6 {
  font-family: var(--agex-font-display);
  color: var(--agex-ink);
  line-height: 1.18;
  letter-spacing: -.02em;
  font-weight: 700;
}

body.agex-active .entry-content p,
body.agex-active .entry-content li {
  font-size: clamp(16px, 2vw, 18px);
  line-height: 1.75;
  color: var(--agex-ink-2);
}

body.agex-active a {
  color: var(--agex-green);
  text-underline-offset: 3px;
}
body.agex-active a:hover {
  color: var(--agex-green-lite);
}

/* ── Background mood ────────────────────────────────────────── */
body.agex-active {
  background:
    radial-gradient(ellipse 900px 600px at 80% 10%, rgba(0,196,106,0.07) 0%, transparent 65%),
    radial-gradient(ellipse 700px 500px at 10% 80%, rgba(245,166,35,0.06) 0%, transparent 60%),
    var(--agex-bg);
}

/* ── Max-width wrapper ──────────────────────────────────────── */
body.agex-active #page,
body.agex-active .site,
body.agex-active .site-content,
body.agex-active .page-wrapper {
  max-width: 1240px;
  margin: 0 auto;
  padding-left: clamp(12px, 2vw, 28px);
  padding-right: clamp(12px, 2vw, 28px);
}

/* ── Toast notifications ────────────────────────────────────── */
#agex-toast-container {
  position: fixed;
  bottom: 90px; right: 20px;
  z-index: var(--agex-z-assistant);
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.agex-toast {
  background: var(--agex-surface);
  border: 1px solid var(--agex-glass-border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: var(--agex-r);
  padding: 14px 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--agex-ink);
  box-shadow: var(--agex-glass-shadow);
  animation: agexToastIn .4s var(--agex-ease-out) both;
}
@keyframes agexToastIn {
  from { opacity:0; transform:translateY(14px) scale(.95); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}