/* ============================================================
   GREEN DROP — Brand Tokens
   Herb-infused recovery & compression. Dark, athletic, natural.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600;700;800&family=Archivo:wght@600;700;800;900&display=swap');

:root {
  /* ---- Brand color ---- */
  --gd-green:        #8DC63F;  /* THE Green Drop green (apple/lime) */
  --gd-green-bright: #A7DC52;  /* hover / highlight on dark */
  --gd-green-700:    #5E991F;  /* deepened green on light surfaces */
  --gd-green-forest: #2F7D2E;  /* knit forest green from sleeve */
  --gd-lime-100:     #EEF6DC;  /* faint green wash panel */
  --gd-lime-200:     #DCEDB9;

  /* ---- Ink / dark surfaces ---- */
  --gd-black:        #0A0A0A;
  --gd-ink:          #141414;
  --gd-char-900:     #101010;
  --gd-char-800:     #1A1A1A;
  --gd-char-700:     #262626;
  --gd-char-600:     #343434;

  /* ---- Neutrals / stone (from product photography) ---- */
  --gd-graphite:     #5A5F63;
  --gd-stone-400:    #9CA09A;
  --gd-stone-300:    #C9CCC4;
  --gd-stone-200:    #E5E7E0;
  --gd-stone-100:    #F3F4EF;
  --gd-white:        #FFFFFF;

  /* ---- Semantic (light context default) ---- */
  --bg:        var(--gd-white);
  --bg-soft:   var(--gd-stone-100);
  --surface:   var(--gd-white);
  --fg1:       var(--gd-black);
  --fg2:       #3A3D3C;
  --fg3:       var(--gd-graphite);
  --border:    var(--gd-stone-200);
  --border-strong: #CDD0C8;
  --accent:    var(--gd-green);
  --accent-ink:#142200;       /* text that sits ON green */

  /* ---- Type ---- */
  --font-display: 'Anton', 'Arial Narrow', sans-serif;  /* condensed athletic */
  --font-strong:  'Archivo', 'Inter', sans-serif;       /* heavy sub-display */
  --font-body:    'Inter', system-ui, sans-serif;

  /* ---- Radius (mostly square / lightly rounded) ---- */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-pill: 999px;

  /* ---- Spacing (4pt) ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px; --s-32: 128px;

  /* ---- Shadow (quiet, near-black) ---- */
  --sh-sm: 0 1px 2px rgba(10,10,10,.06), 0 1px 1px rgba(10,10,10,.04);
  --sh-md: 0 6px 18px rgba(10,10,10,.08);
  --sh-lg: 0 18px 50px rgba(10,10,10,.16);

  /* ---- Motion ---- */
  --ease: cubic-bezier(.2,.7,.2,1);
  --t-fast: 140ms;
  --t-base: 200ms;
}

/* Dark context — flip semantics */
.gd-dark {
  --bg:        var(--gd-black);
  --bg-soft:   var(--gd-char-900);
  --surface:   var(--gd-char-800);
  --fg1:       var(--gd-white);
  --fg2:       #C7CAC4;
  --fg3:       #8A8F89;
  --border:    var(--gd-char-700);
  --border-strong: var(--gd-char-600);
  --accent:    var(--gd-green);
}

* { box-sizing: border-box; }

/* ---- Display utility ---- */
.gd-display {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .005em;
  line-height: .92;
}
.gd-eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 12px;
}
.gd-ital { font-style: italic; } /* not used much — Anton has no italic */

/* Green highlight word */
.gd-hl { color: var(--accent); }

/* Skewed "INFUSED"-style badge */
.gd-slash {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transform: skewX(-11deg);
  background: var(--gd-black);
  color: var(--gd-white);
  font-family: var(--font-strong);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 7px 16px;
  font-size: 13px;
}
.gd-slash > * { transform: skewX(11deg); }
.gd-slash--green { background: var(--gd-green); color: var(--accent-ink); }

/* Buttons */
.gd-btn {
  --_bg: var(--gd-green);
  --_fg: var(--accent-ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-strong);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 14px;
  padding: 15px 28px;
  background: var(--_bg);
  color: var(--_fg);
  border: 0;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-base) var(--ease);
}
.gd-btn:hover { background: var(--gd-green-bright); }
.gd-btn:active { transform: translateY(1px); }
.gd-btn--block { width: 100%; }
.gd-btn--lg { padding: 18px 34px; font-size: 15px; }
.gd-btn--dark { --_bg: var(--gd-black); --_fg: var(--gd-white); }
.gd-btn--dark:hover { --_bg: var(--gd-char-700); background: var(--gd-char-700); }
.gd-btn--ghost {
  --_bg: transparent; --_fg: currentColor;
  border: 1.5px solid currentColor;
}
.gd-btn--ghost:hover { background: rgba(141,198,63,.12); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}