/* ============================================================
   DISTILLANCE GOLF DIVISION — BRAND TOKENS v2 ("Morning Light")
   Aivera brand kit + Distillance primaries
   Drop this in BEFORE your existing stylesheet, then delete
   hard-coded colours from the old sheet.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bitter:wght@500;600;700;800&family=Karla:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {

  /* ---------- 1. CORE BRAND ---------- */
  --brand-green:      #385333;   /* Tom Thumb  — primary */
  --brand-tan:        #B9A175;   /* Mongoose   — secondary */

  /* ---------- 2. GREEN RAMP (Aivera) ---------- */
  --green-900: #22331F;          /* derived — deep ink, headings */
  --green-800: #385333;          /* Tom Thumb */
  --green-700: #526A4D;
  --green-600: #6D8168;
  --green-500: #889984;
  --green-400: #A5B2A2;
  --green-300: #C2CBC0;
  --green-200: #E0E5DF;
  --green-100: #EFF2EE;          /* derived — lightest sage wash */

  /* ---------- 3. TAN RAMP (Aivera) ---------- */
  --tan-700: #B9A175;            /* Mongoose */
  --tan-600: #C3AE88;
  --tan-500: #CEBB9B;
  --tan-400: #D8C8AE;
  --tan-300: #E2D6C2;
  --tan-200: #ECE3D6;
  --tan-100: #F5F1EA;

  /* ---------- 4. SURFACES (light-first) ---------- */
  --surface-page:    #FBFAF7;    /* page base — warm off-white */
  --surface-raised:  #FFFFFF;    /* cards */
  --surface-sunk:    var(--tan-100);
  --surface-sage:    var(--green-200);
  --surface-sand:    var(--tan-200);
  --surface-invert:  var(--green-800);   /* rare: footer / final CTA only */

  /* ---------- 5. TEXT ---------- */
  --text-primary:    var(--green-900);
  --text-body:       #4A5A46;    /* green-grey, 6.0:1 on page */
  --text-muted:      #6F7C6B;
  --text-on-dark:    var(--tan-100);
  --text-on-dark-mu: rgba(245,241,234,.72);
  --text-accent:     var(--green-700);

  /* ---------- 6. LINES & EDGES ---------- */
  --line-hairline:   rgba(56,83,51,.10);
  --line-soft:       rgba(56,83,51,.16);
  --line-tan:        rgba(185,161,117,.38);
  --line-on-dark:    rgba(245,241,234,.16);

  /* ---------- 7. GRADIENTS (the "smooth blend" layer) ---------- */
  /* Hero: white → cream → sage. No hard section edges anywhere. */
  --grad-hero:
      radial-gradient(900px 520px at 82% -8%, rgba(185,161,117,.22), transparent 62%),
      radial-gradient(760px 460px at 8% 4%,  rgba(224,229,223,.85), transparent 60%),
      linear-gradient(180deg, #FFFFFF 0%, #FBFAF7 46%, var(--green-200) 100%);

  /* Section-to-section wash — use instead of borders */
  --grad-band-sand: linear-gradient(180deg, #FBFAF7 0%, var(--tan-100) 38%, #FBFAF7 100%);
  --grad-band-sage: linear-gradient(180deg, #FBFAF7 0%, var(--green-100) 40%, var(--tan-100) 100%);

  /* Cards */
  --grad-card:      linear-gradient(158deg, #FFFFFF 0%, #FDFCF9 55%, var(--tan-100) 100%);
  --grad-card-sage: linear-gradient(158deg, #FFFFFF 0%, var(--green-100) 100%);

  /* The one dark moment: closing CTA + footer */
  --grad-invert:
      radial-gradient(720px 380px at 78% 0%, rgba(185,161,117,.28), transparent 64%),
      linear-gradient(165deg, var(--green-800) 0%, var(--green-900) 100%);

  /* Accents */
  --grad-tan-rule:  linear-gradient(90deg, transparent, var(--tan-700), transparent);
  --grad-btn:       linear-gradient(180deg, var(--green-700) 0%, var(--green-800) 100%);

  /* ---------- 8. ELEVATION (green-tinted, never black) ---------- */
  --shadow-xs: 0 1px 2px rgba(34,51,31,.05);
  --shadow-sm: 0 2px 8px rgba(34,51,31,.06);
  --shadow-md: 0 10px 28px -12px rgba(34,51,31,.16);
  --shadow-lg: 0 28px 60px -28px rgba(34,51,31,.24);
  --shadow-tan: 0 14px 34px -18px rgba(185,161,117,.55);

  /* ---------- 9. RADIUS ---------- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-xl: 40px;
  --r-pill: 999px;

  /* ---------- 10. TYPE ---------- */
  --font-display: 'Bitter', Georgia, serif;        /* clubhouse slab — crest lettering */
  --font-body:    'Karla', system-ui, sans-serif;
  --font-data:    'IBM Plex Mono', ui-monospace, monospace;  /* yardages, stats, eyebrows */

  --fs-eyebrow: .75rem;
  --fs-body:    1.0625rem;
  --fs-lead:    1.25rem;
  --fs-h3:      1.375rem;
  --fs-h2:      clamp(1.75rem, 3.4vw, 2.75rem);
  --fs-h1:      clamp(2.5rem, 6vw, 4.25rem);
  --fs-display: clamp(3rem, 9vw, 6rem);

  --lh-tight: 1.06;
  --lh-head:  1.18;
  --lh-body:  1.65;
  --tr-eyebrow: .16em;

  /* ---------- 11. SPACING & MOTION ---------- */
  --sp-1:.25rem; --sp-2:.5rem;  --sp-3:.75rem; --sp-4:1rem;
  --sp-6:1.5rem; --sp-8:2rem;   --sp-12:3rem;  --sp-16:4rem;
  --sp-24:6rem;  --sp-32:8rem;
  --container: 1160px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --dur:  .28s;
}

/* ============================================================
   BASE
   ============================================================ */
html { scroll-behavior: smooth; }

body {
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4 {
  font-family: var(--font-display);
  color: var(--text-primary);
  line-height: var(--lh-head);
  letter-spacing: -.015em;
  font-weight: 700;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

/* Italic display = the "distilled" emphasis word in the hero */
.em-distilled {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  color: var(--green-700);
}

a { color: var(--text-accent); text-underline-offset: 3px; }
a:hover { color: var(--green-800); }

::selection { background: var(--tan-300); color: var(--green-900); }

:focus-visible {
  outline: 2px solid var(--green-700);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

/* ============================================================
   STRUCTURAL DEVICES
   ============================================================ */

/* Eyebrow — mono, tracked, tan tick */
.eyebrow {
  font-family: var(--font-data);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--green-600);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
}
.eyebrow::before {
  content: "";
  width: 26px; height: 2px;
  background: var(--tan-700);
  border-radius: 2px;
}

/* SIGNATURE: yardage readout — reuse for every number on the site */
.yardage {
  display: inline-flex;
  align-items: baseline;
  gap: .4ch;
  font-family: var(--font-data);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--green-800);
  background: linear-gradient(180deg, #FFFFFF, var(--green-100));
  border: 1px solid var(--line-hairline);
  border-radius: var(--r-pill);
  padding: .3rem .85rem;
  box-shadow: var(--shadow-xs);
}
.yardage .unit {
  font-size: .72em;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: .06em;
}
.yardage--pin { background: linear-gradient(180deg, var(--tan-100), var(--tan-200)); border-color: var(--line-tan); }

/* Section bands — gradients, never borders */
.band          { background: var(--surface-page); padding: var(--sp-24) 0; }
.band--sand    { background: var(--grad-band-sand); }
.band--sage    { background: var(--grad-band-sage); }
.band--invert  { background: var(--grad-invert); color: var(--text-on-dark); }
.band--invert h1, .band--invert h2, .band--invert h3 { color: var(--text-on-dark); }
.band--invert .eyebrow { color: var(--tan-400); }

/* Soft fade seam between two bands */
.seam { height: 96px; background: linear-gradient(180deg, transparent, var(--tan-100)); }

/* Tan hairline rule */
.rule { height: 1px; background: var(--grad-tan-rule); border: 0; }

/* ============================================================
   COMPONENTS
   ============================================================ */

.card {
  background: var(--grad-card);
  border: 1px solid var(--line-hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-8);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.card--sage { background: var(--grad-card-sage); }

/* Featured pricing tier — tan, not dark */
.card--featured {
  background: linear-gradient(158deg, #FFFFFF 0%, var(--tan-200) 100%);
  border-color: var(--line-tan);
  box-shadow: var(--shadow-tan);
}

.badge {
  font-family: var(--font-data);
  font-size: .7rem;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  background: var(--brand-tan);
  color: var(--green-900);
  border-radius: var(--r-pill);
  padding: .3rem .8rem;
}

.btn {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  border-radius: var(--r-pill);
  padding: .85rem 1.6rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  display: inline-flex; align-items: center; gap: .5rem;
}
.btn--primary {
  background: var(--grad-btn);
  color: var(--tan-100);
  box-shadow: var(--shadow-md);
}
.btn--primary:hover { filter: brightness(1.08); box-shadow: var(--shadow-lg); }

.btn--secondary {
  background: var(--surface-raised);
  color: var(--green-800);
  border-color: var(--line-tan);
  box-shadow: var(--shadow-xs);
}
.btn--secondary:hover { background: var(--tan-100); border-color: var(--brand-tan); }

.btn--ghost { background: transparent; color: var(--green-700); }
.btn--ghost:hover { background: var(--green-100); }

/* Header — translucent, blurred, no hard bottom border */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251,250,247,.78);
  backdrop-filter: blur(14px) saturate(1.15);
  border-bottom: 1px solid var(--line-hairline);
}

/* Footer sits inside .band--invert */
.site-footer a { color: var(--text-on-dark-mu); }
.site-footer a:hover { color: var(--tan-300); }

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