/* =================================================================
   GROWTH AGRICULTURE - Design System Tokens
   Source: MasterGAWebsite/index.css (the growthag.com.au codebase)
   Earthy, light-mode, glassmorphism on a warm green base.
   ================================================================= */

/* ---- Fonts ---- */
/* Inter is the single sans-serif workhorse across the site.
   Loaded from Google Fonts. For display/logo typography,
   Growth Agriculture's wordmark itself uses a hand-drawn italic
   serif - we pair it with a Playfair Display italic fallback
   for "brand display" moments (not used in the base UI). */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Playfair+Display:ital,wght@1,500;1,700&display=swap');

:root {
  /* ================================================================
     COLORS - BRAND GREENS
     Sampled directly from growthag.com.au.
     ================================================================ */
  --clr-primary:        #3f7d1a;  /* Leaf green - primary brand      */
  --clr-primary-dark:   #006600;  /* Deep forest - footer / headings */
  --clr-primary-mid:    #29961c;  /* Field green - energetic accent  */
  --clr-primary-olive:  #629736;  /* Olive - secondary action        */
  --clr-primary-xlight: #8dc63f;  /* Spring green - highlight        */
  --clr-accent:         #a3c96a;  /* Fresh shoot - tag / accent      */

  /* ---- BROWN / EARTH (from Growth Ag wordmark) ---- */
  --clr-earth:          #4a2a12;  /* Rich soil - wordmark tail       */
  --clr-earth-warm:     #8a6a38;  /* Warm loam - heritage motif      */
  --clr-earth-sand:     #c9a876;  /* Dry sand - timeline era pill    */

  /* ---- SEMANTIC BACKGROUNDS ---- */
  --bg-0:  #F9FAF6;  /* Off-white base - page background           */
  --bg-1:  #F2F6EC;  /* Warm green-tint - alternating section band */
  --bg-2:  #FFFFFF;  /* Pure white - card surfaces                 */
  --bg-deep: #0a1a05; /* Near-black deep green - hero overlay base */

  /* ---- TEXT ---- */
  --text-primary: #1a2810;  /* Almost-black green - headings + body */
  --text-muted:   #4d6038;  /* Muted olive - secondary copy         */
  --text-light:   #7a9060;  /* Light sage - tertiary / meta         */
  --text-inverse: #ffffff;  /* On green / dark surfaces             */

  /* ---- BORDERS (translucent, tinted with primary green) ---- */
  --border-sm:    rgba(63,125,26,0.14);
  --border-med:   rgba(63,125,26,0.28);
  --border-hover: rgba(63,125,26,0.52);

  /* ---- GLASS (signature surface treatment) ---- */
  --glass-bg:     rgba(255,255,255,0.72);
  --glass-border: rgba(63,125,26,0.18);
  --glass-shadow: 0 8px 40px rgba(63,125,26,0.12);
  --glass-blur:   blur(20px);

  /* ---- GRADIENTS ---- */
  --grad-main:    linear-gradient(135deg, #3f7d1a 0%, #629736 100%);
  --grad-hero:    linear-gradient(135deg, #006600 0%, #3f7d1a 50%, #629736 100%);
  --grad-deep:    linear-gradient(160deg, rgba(0,60,0,0.55) 0%, rgba(5,20,2,0.75) 100%);
  --grad-marquee: linear-gradient(135deg, #006600, #629736);
  --grad-text-accent: linear-gradient(120deg, #8dc63f 0%, #a3c96a 60%, #c5e88a 100%);

  /* ---- SHADOWS & GLOWS (green-tinted, not neutral grey) ---- */
  --shadow-sm:  0 2px 12px rgba(63,125,26,0.07);
  --shadow-md:  0 4px 28px rgba(63,125,26,0.11);
  --shadow-lg:  0 8px 48px rgba(63,125,26,0.17);
  --glow-card:  0 0 24px rgba(63,125,26,0.18);
  --glow-btn:   0 0 32px rgba(63,125,26,0.32);

  /* ---- RADII ---- */
  --r-sm:   8px;   /* inputs, chips                 */
  --r-md:  14px;   /* small cards, badges           */
  --r-lg:  22px;   /* primary cards                 */
  --r-xl:  32px;   /* hero cards / panels           */
  --r-pill: 999px; /* buttons, pill labels          */

  /* ---- SPACING (informal; codebase uses clamp + rems) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.8rem;
  --space-4: 1.2rem;
  --space-5: 1.8rem;
  --space-6: 2.5rem;
  --space-7: 3.5rem;
  --space-8: 5rem;
  --section-y: clamp(5rem, 9vw, 8rem);

  /* ---- MOTION ---- */
  --t:       0.30s cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow:  0.55s cubic-bezier(0.4, 0, 0.2, 1);

  /* ================================================================
     TYPOGRAPHY
     ================================================================ */
  --font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Playfair Display', 'Inter', serif;       /* brand moments */
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Fluid base scale */
  --fs-h1:    clamp(2.6rem, 6vw, 5rem);      /* 42–80px   */
  --fs-h2:    clamp(1.75rem, 3.5vw, 2.75rem); /* 28–44px  */
  --fs-h3:    1.18rem;                        /* ~19px     */
  --fs-h4:    0.90rem;                        /* ~14px     */
  --fs-body:  1.00rem;                        /* 16px      */
  --fs-sm:    0.87rem;                        /* ~14px     */
  --fs-xs:    0.72rem;                        /* ~11.5px   */

  --lh-tight: 1.15;
  --lh-body:  1.75;
}

/* =================================================================
   SEMANTIC BASELINE
   (Mirrors base styles in the source index.css)
   ================================================================= */
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  background: var(--bg-0);
  color: var(--text-primary);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  color: var(--text-primary);
  font-weight: 700;
  line-height: var(--lh-tight);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); letter-spacing: -0.03em; font-weight: 900; }
h2 { font-size: var(--fs-h2); letter-spacing: -0.02em; }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); letter-spacing: 0.04em; text-transform: uppercase; }

p  { color: var(--text-muted); line-height: var(--lh-body); text-wrap: pretty; }

a  { color: var(--clr-primary); text-decoration: none; transition: color var(--t); }
a:hover { color: var(--clr-primary-dark); }

/* Small all-caps label - used above H2s site-wide */
.section-label {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--clr-primary);
  background: rgba(63,125,26,0.08);
  border: 1px solid var(--border-med);
  padding: 0.28em 1em;
  border-radius: var(--r-pill);
}

/* Gradient text-fill for emphasised words in hero */
.accent-text {
  background: var(--grad-text-accent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Focus ring */
:focus-visible {
  outline: 2px solid var(--clr-primary);
  outline-offset: 3px;
  border-radius: 6px;
}