/* ===================================================================
   GARDENING GUIDER — DESIGN TOKENS + CORE COMPONENTS  (single source of truth)
   Fresh Garden palette · premium-modern · performance-first.
   Every mockup MUST <link> this file and use these CSS variables /
   .gg-* classes — NO off-palette hardcoded hex (ui-gate.js enforces it).
   =================================================================== */

:root{
  /* ---- BRAND COLORS (Fresh Garden — the ONLY brand colors allowed) ---- */
  --gg-green:#2E7D32;        /* primary brand / header / nav            */
  --gg-forest:#1B5E20;       /* deep green / footer / hover-text        */
  --gg-terra:#E2683B;        /* CTA / buttons / accents                 */
  --gg-terra-dark:#C7552C;   /* button hover                            */
  --gg-cream:#F7F6F1;        /* page background                         */
  --gg-ink:#2D2D2D;          /* body text on light                      */

  /* tints/shades derived from brand (use for soft backgrounds, borders) */
  --gg-green-050:#EAF4EA;
  --gg-green-100:#D4E8D5;
  --gg-green-700:#256C29;
  --gg-terra-050:#FCEDE6;

  /* ---- NEUTRALS (allowed alongside brand) ---- */
  --gg-white:#FFFFFF;
  --gg-gray-50:#F6F7F6;
  --gg-gray-100:#ECEFEC;
  --gg-gray-200:#DCE3DC;     /* hairlines / borders */
  --gg-gray-400:#9AA69A;
  --gg-gray-600:#5C6B5C;     /* muted text */
  --gg-gray-900:#1F2A1F;

  /* ---- SEMANTIC ---- */
  --gg-bg:var(--gg-cream);
  --gg-surface:var(--gg-white);
  --gg-text:var(--gg-ink);
  --gg-text-muted:var(--gg-gray-600);
  --gg-line:var(--gg-gray-200);
  --gg-link:var(--gg-green);
  --gg-link-hover:var(--gg-forest);

  /* ---- TYPOGRAPHY (system stack = ZERO web-font requests = fast).
     If a display font is truly needed, self-host ONE, font-display:swap. ---- */
  --gg-font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --gg-font-display:var(--gg-font-sans);   /* swap to a self-hosted display font here if approved */

  /* fluid type scale (clamp = responsive without media queries) */
  --gg-text-xs:0.78rem;
  --gg-text-sm:0.875rem;
  --gg-text-base:1rem;
  --gg-text-lg:1.125rem;
  --gg-text-xl:clamp(1.25rem,1.1rem + 0.6vw,1.5rem);
  --gg-text-2xl:clamp(1.6rem,1.3rem + 1.2vw,2.1rem);
  --gg-text-3xl:clamp(2rem,1.5rem + 2.2vw,3rem);
  --gg-text-hero:clamp(2.4rem,1.6rem + 3.6vw,4rem);
  --gg-leading-tight:1.18;
  --gg-leading:1.65;

  /* ---- SPACING (4px base) ---- */
  --gg-1:4px; --gg-2:8px; --gg-3:12px; --gg-4:16px; --gg-5:24px;
  --gg-6:32px; --gg-7:48px; --gg-8:64px; --gg-9:96px; --gg-10:128px;

  /* ---- RADIUS / SHADOW / LAYOUT ---- */
  --gg-radius-sm:8px; --gg-radius:14px; --gg-radius-lg:22px; --gg-radius-full:999px;
  --gg-shadow-sm:0 1px 3px rgba(27,94,32,.07),0 1px 2px rgba(27,94,32,.06);
  --gg-shadow:0 6px 22px rgba(27,94,32,.10);
  --gg-shadow-lg:0 18px 50px rgba(27,94,32,.16);
  --gg-container:1200px;
  --gg-container-narrow:720px;
  --gg-ease:cubic-bezier(.22,.61,.36,1);
}

/* ---- RESET (lightweight) ---- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--gg-bg);color:var(--gg-text);
  font-family:var(--gg-font-sans);font-size:var(--gg-text-base);line-height:var(--gg-leading);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,picture,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--gg-link);text-decoration:none;transition:color .2s var(--gg-ease)}
a:hover{color:var(--gg-link-hover)}
h1,h2,h3,h4{font-family:var(--gg-font-display);line-height:var(--gg-leading-tight);color:var(--gg-forest);margin:0 0 var(--gg-4)}
h1{font-size:var(--gg-text-hero);letter-spacing:-.02em}
h2{font-size:var(--gg-text-3xl);letter-spacing:-.01em}
h3{font-size:var(--gg-text-xl)}
p{margin:0 0 var(--gg-4)}
:focus-visible{outline:3px solid var(--gg-terra);outline-offset:2px;border-radius:4px}

/* ---- LAYOUT PRIMITIVES ---- */
.gg-container{width:100%;max-width:var(--gg-container);margin-inline:auto;padding-inline:var(--gg-5)}
.gg-narrow{max-width:var(--gg-container-narrow)}
.gg-section{padding-block:var(--gg-9)}
.gg-grid{display:grid;gap:var(--gg-5)}
.gg-cols-2{grid-template-columns:repeat(2,1fr)}
.gg-cols-3{grid-template-columns:repeat(3,1fr)}
.gg-cols-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.gg-cols-3,.gg-cols-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.gg-cols-2,.gg-cols-3,.gg-cols-4{grid-template-columns:1fr}}

/* ---- BUTTONS ---- */
.gg-btn{display:inline-flex;align-items:center;gap:var(--gg-2);
  padding:var(--gg-3) var(--gg-5);border-radius:var(--gg-radius-full);
  font-weight:700;font-size:var(--gg-text-base);cursor:pointer;border:2px solid transparent;
  transition:transform .15s var(--gg-ease),background .2s var(--gg-ease),box-shadow .2s var(--gg-ease)}
.gg-btn:hover{transform:translateY(-2px)}
.gg-btn-primary{background:var(--gg-terra);color:var(--gg-white);box-shadow:var(--gg-shadow-sm)}
.gg-btn-primary:hover{background:var(--gg-terra-dark);color:var(--gg-white);box-shadow:var(--gg-shadow)}
.gg-btn-ghost{background:transparent;color:var(--gg-forest);border-color:var(--gg-green)}
.gg-btn-ghost:hover{background:var(--gg-green-050);color:var(--gg-forest)}

/* ---- CARD ---- */
.gg-card{background:var(--gg-surface);border:1px solid var(--gg-line);border-radius:var(--gg-radius);
  overflow:hidden;box-shadow:var(--gg-shadow-sm);transition:transform .2s var(--gg-ease),box-shadow .2s var(--gg-ease)}
.gg-card:hover{transform:translateY(-4px);box-shadow:var(--gg-shadow)}
.gg-card__body{padding:var(--gg-5)}
.gg-card__title{font-size:var(--gg-text-lg);margin:0 0 var(--gg-2)}
.gg-tag{display:inline-block;background:var(--gg-green-050);color:var(--gg-green-700);
  font-size:var(--gg-text-xs);font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  padding:4px 10px;border-radius:var(--gg-radius-full)}

/* ---- HERO ---- */
.gg-hero{position:relative;background:linear-gradient(135deg,var(--gg-green),var(--gg-forest));
  color:var(--gg-white);padding-block:var(--gg-10)}
.gg-hero h1{color:var(--gg-white)}
.gg-hero p{color:rgba(255,255,255,.92);font-size:var(--gg-text-lg);max-width:42ch}

/* ---- UTILITIES ---- */
.gg-muted{color:var(--gg-text-muted)}
.gg-center{text-align:center}
.gg-eyebrow{color:var(--gg-terra);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:var(--gg-text-sm)}
.gg-skip{position:absolute;left:-9999px}
.gg-skip:focus{left:var(--gg-4);top:var(--gg-4);z-index:99;background:var(--gg-white);padding:var(--gg-3) var(--gg-4);border-radius:var(--gg-radius-sm)}

/* ---- MOTION SAFETY (accessibility) ---- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}