/* =========================================================
   Greenscape Turfing — Design Tokens
   Single source of truth. Components and pages only reference
   these variables — never hard-coded hex / px values.
   ========================================================= */

:root {
  /* --- Brand palette (per PRD §6.1) ----------------------- */
  --gs-green-deep:    #14361F;
  --gs-green:         #1E5631;
  --gs-green-accent:  #3E7C47;
  --gs-gold:          #C8A96A;
  --gs-gold-soft:     #E5D6B3;
  --gs-cream:         #F6F4EE;
  --gs-cream-deep:    #ECE7D9;
  --gs-ink:           #1A1A1A;
  --gs-grey:          #6B6F6C;
  --gs-grey-light:    #B7B9B7;
  --gs-white:         #FFFFFF;

  /* Functional roles */
  --gs-bg:            var(--gs-white);
  --gs-bg-alt:        var(--gs-cream);
  --gs-bg-dark:       var(--gs-green-deep);
  --gs-text:          var(--gs-ink);
  --gs-text-muted:    var(--gs-grey);
  --gs-text-on-dark:  var(--gs-cream);
  --gs-primary:       var(--gs-green-deep);
  --gs-accent:        var(--gs-gold);
  --gs-link:          var(--gs-green-accent);
  --gs-border:        #E2DFD6;
  --gs-border-dark:   rgba(255,255,255,0.12);

  /* Status */
  --gs-success:       #2F7D44;
  --gs-error:         #B23A3A;

  /* --- Typography ----------------------------------------- */
  --gs-font-display:  'Cormorant', Georgia, 'Times New Roman', serif;
  --gs-font-body:     'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Fluid type scale — clamp(min, fluid, max) — per PRD §8 */
  --gs-fs-xs:    clamp(0.75rem, 0.72rem + 0.15vw, 0.875rem);   /* 12–14 */
  --gs-fs-sm:    clamp(0.875rem, 0.84rem + 0.18vw, 1rem);      /* 14–16 */
  --gs-fs-base:  clamp(1rem, 0.96rem + 0.2vw, 1.125rem);       /* 16–18 */
  --gs-fs-lg:    clamp(1.125rem, 1.06rem + 0.32vw, 1.375rem);  /* 18–22 */
  --gs-fs-xl:    clamp(1.375rem, 1.25rem + 0.6vw, 1.75rem);    /* 22–28 */
  --gs-fs-2xl:   clamp(1.75rem, 1.5rem + 1.1vw, 2.5rem);       /* 28–40 */
  --gs-fs-3xl:   clamp(2.25rem, 1.85rem + 2vw, 3.5rem);        /* 36–56 */
  --gs-fs-4xl:   clamp(2.75rem, 2.1rem + 3.2vw, 4.75rem);      /* 44–76 */

  --gs-lh-tight:  1.15;
  --gs-lh-snug:   1.3;
  --gs-lh-body:   1.65;     /* PRD §6 "generous line-height" */
  --gs-lh-loose:  1.8;

  --gs-tracking-tight:  -0.01em;
  --gs-tracking-base:    0;
  --gs-tracking-wide:    0.08em;
  --gs-tracking-eyebrow: 0.18em;

  /* --- Spacing (8pt base, fluid for section padding) ------ */
  --gs-space-1:  0.25rem;
  --gs-space-2:  0.5rem;
  --gs-space-3:  0.75rem;
  --gs-space-4:  1rem;
  --gs-space-5:  1.25rem;
  --gs-space-6:  1.5rem;
  --gs-space-8:  2rem;
  --gs-space-10: 2.5rem;
  --gs-space-12: 3rem;
  --gs-space-16: 4rem;
  --gs-space-20: 5rem;

  --gs-section-y:  clamp(3.5rem, 2rem + 6vw, 7.5rem);          /* premium breathing room */
  --gs-section-x:  clamp(1.25rem, 0.5rem + 3vw, 3rem);
  --gs-container:  1280px;
  --gs-container-narrow: 920px;

  /* --- Radii, shadows, borders --------------------------- */
  --gs-radius-sm: 6px;
  --gs-radius:    10px;       /* PRD §6.3 "rounded-but-restrained 8–12px" */
  --gs-radius-lg: 16px;
  --gs-radius-pill: 999px;

  --gs-shadow-xs: 0 1px 2px rgba(20, 54, 31, 0.06);
  --gs-shadow-sm: 0 4px 12px rgba(20, 54, 31, 0.08);
  --gs-shadow:    0 12px 30px rgba(20, 54, 31, 0.10);
  --gs-shadow-lg: 0 24px 60px rgba(20, 54, 31, 0.18);

  --gs-divider-gold: 1px solid var(--gs-gold);
  --gs-divider:      1px solid var(--gs-border);

  /* --- Motion (per skill: 150–300ms) --------------------- */
  --gs-ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
  --gs-dur-fast:    150ms;
  --gs-dur-base:    220ms;
  --gs-dur-slow:    420ms;

  /* --- Layered z-index scale ----------------------------- */
  --gs-z-base:    1;
  --gs-z-sticky:  10;
  --gs-z-header:  50;
  --gs-z-overlay: 80;
  --gs-z-modal:   100;
  --gs-z-toast:   110;

  /* --- Header heights (used for sticky offsets) ---------- */
  --gs-header-h:        84px;
  --gs-header-h-mobile: 68px;
}

/* =========================================================
   Element resets — light touch on top of Kadence
   ========================================================= */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body.kadence-base,
body {
  font-family: var(--gs-font-body);
  font-size: var(--gs-fs-base);
  line-height: var(--gs-lh-body);
  color: var(--gs-text);
  background: var(--gs-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5,
.gs-display {
  font-family: var(--gs-font-display);
  font-weight: 500;
  line-height: var(--gs-lh-tight);
  letter-spacing: var(--gs-tracking-tight);
  color: var(--gs-primary);
  margin: 0 0 var(--gs-space-4);
}
h1 { font-size: var(--gs-fs-4xl); font-weight: 600; }
h2 { font-size: var(--gs-fs-3xl); }
h3 { font-size: var(--gs-fs-2xl); }
h4 { font-size: var(--gs-fs-xl);  }
h5 { font-size: var(--gs-fs-lg);  }

p { margin: 0 0 var(--gs-space-4); max-width: 70ch; }

a {
  color: var(--gs-link);
  text-decoration: none;
  transition: color var(--gs-dur-base) var(--gs-ease);
}
a:hover { color: var(--gs-green-deep); }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--gs-gold);
  outline-offset: 3px;
  border-radius: var(--gs-radius-sm);
}

img, picture, video, svg { max-width: 100%; height: auto; display: block; }
::selection { background: var(--gs-gold); color: var(--gs-green-deep); }

/* Utility helpers (small set — no Tailwind in WP theme) */
.gs-container        { width: 100%; max-width: var(--gs-container);        margin-inline: auto; padding-inline: var(--gs-section-x); }
.gs-container-narrow { width: 100%; max-width: var(--gs-container-narrow); margin-inline: auto; padding-inline: var(--gs-section-x); }
.gs-section          { padding-block: var(--gs-section-y); }
.gs-section--dark    { background: var(--gs-green-deep); color: var(--gs-text-on-dark); }
.gs-section--cream   { background: var(--gs-cream); }
.gs-section--dark h1, .gs-section--dark h2, .gs-section--dark h3 { color: var(--gs-cream); }

.gs-eyebrow {
  display: inline-block;
  font-family: var(--gs-font-body);
  font-size: var(--gs-fs-xs);
  font-weight: 600;
  letter-spacing: var(--gs-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--gs-gold);
  margin-bottom: var(--gs-space-3);
}
.gs-eyebrow::after {
  content: '';
  display: inline-block;
  width: 28px; height: 1px;
  background: var(--gs-gold);
  vertical-align: middle;
  margin-left: var(--gs-space-3);
}

.gs-lead {
  font-size: var(--gs-fs-lg);
  color: var(--gs-text-muted);
  line-height: var(--gs-lh-snug);
  max-width: 65ch;
}

.gs-divider-gold {
  border: 0;
  border-top: var(--gs-divider-gold);
  width: 60px;
  margin: var(--gs-space-6) 0;
}

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

.gs-cursor-pointer { cursor: pointer; }

/* Prevent horizontal scroll defensively (PRD §8).
   Use `clip` not `hidden`: `overflow-x: hidden` turns html/body into a scroll
   container, which silently BREAKS `position: sticky` on the header. `clip`
   clips the same overflow WITHOUT creating a scroll container, so the sticky
   header stays pinned. (ui-ux-pro-max: avoid layout side-effects.) */
html, body { overflow-x: clip; }
/* Fallback for any engine without overflow:clip — accept hidden there. */
@supports not (overflow: clip) {
  html, body { overflow-x: hidden; }
}