/* =============================================================================
   DESIGN TOKENS  —  The Harvest Crew OJC Global
   Colours sampled directly from the approved design mock-up.
   Change a value here and it updates everywhere on the site.
   ========================================================================== */

:root {
  /* ---- Brand green ------------------------------------------------------ */
  --green-900: #0F3C1D;   /* footer, deepest green                            */
  --green-800: #09461E;   /* hero button                                      */
  --green-700: #0B481F;   /* primary button fill                              */
  --green-600: #0E5124;   /* PRIMARY brand green — icon circles, headings     */
  --green-500: #137A33;   /* hover / lighter accent                           */
  --green-400: #2E9750;
  --green-100: #DCEAE0;
  --green-tint: #F0F5F0;  /* alternating section background                   */

  /* ---- Accent gold ------------------------------------------------------ */
  --gold-700: #C8930B;
  --gold-600: #E0A800;    /* gold button hover                                */
  --gold-500: #F8BC0E;    /* ACCENT gold — buttons, underlines, wave          */
  --gold-400: #FBD055;
  --gold-tint: #FDF6E0;

  /* ---- Neutrals --------------------------------------------------------- */
  --ink:        #1E2A22;  /* body copy                                        */
  --ink-strong: #122016;  /* headings on light                                */
  --ink-muted:  #5B6B60;  /* secondary copy                                   */
  --ink-faint:  #8A9990;
  --surface:    #FFFFFF;
  --card:       #FCFCFA;
  --border:     #E6EDE7;
  --border-soft:#F0F4F1;

  /* ---- Semantic --------------------------------------------------------- */
  --primary:        var(--green-600);
  --primary-dark:   var(--green-800);
  --accent:         var(--gold-500);
  --on-primary:     #FFFFFF;
  --on-accent:      #122016;
  --success:        #1E7A3E;
  --error:          #B3261E;
  --error-tint:     #FDECEA;
  --success-tint:   #E9F5ED;

  /* ---- Typography ------------------------------------------------------- */
  --font-head: "Montserrat", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Open Sans", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;

  --fs-hero:   clamp(2.05rem, 1.15rem + 3.1vw, 3.35rem);
  --fs-h1:     clamp(1.85rem, 1.15rem + 2.4vw, 2.85rem);
  --fs-h2:     clamp(1.45rem, 1.05rem + 1.5vw, 2.05rem);
  --fs-h3:     clamp(1.08rem, 0.98rem + 0.4vw, 1.28rem);
  --fs-h4:     1.02rem;
  --fs-body:   1rem;
  --fs-sm:     0.925rem;
  --fs-xs:     0.8rem;
  --fs-eyebrow:0.775rem;

  --lh-tight: 1.14;
  --lh-snug:  1.35;
  --lh-body:  1.72;

  --ls-caps:  0.075em;
  --ls-nav:   0.06em;

  /* ---- Spacing ---------------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.75rem;
  --space-8: 3.5rem;
  --space-9: 4.5rem;

  --section-y:   clamp(3rem, 1.6rem + 4.4vw, 4.75rem);
  --section-y-sm:clamp(2.25rem, 1.4rem + 2.6vw, 3.25rem);

  /* ---- Layout ----------------------------------------------------------- */
  --container:      1180px;
  --container-wide: 1320px;
  --container-header: 1460px;   /* the top bar needs more room than the content */
  --container-text: 780px;
  --gutter: clamp(1.1rem, 0.6rem + 2.2vw, 2.25rem);

  --header-h:        86px;
  --header-h-scroll: 70px;
  --header-h-mobile: 68px;

  /* ---- Shape ------------------------------------------------------------ */
  --radius-sm:  4px;
  --radius:     8px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-pill:999px;

  /* ---- Elevation -------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(16, 40, 24, 0.06);
  --shadow-sm: 0 2px 8px rgba(16, 40, 24, 0.06);
  --shadow:    0 6px 20px rgba(16, 40, 24, 0.08);
  --shadow-md: 0 12px 32px rgba(16, 40, 24, 0.10);
  --shadow-lg: 0 22px 54px rgba(16, 40, 24, 0.16);
  --shadow-header: 0 2px 14px rgba(16, 40, 24, 0.09);

  /* ---- Motion ----------------------------------------------------------- */
  --ease:      cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:  0.16s;
  --dur:       0.26s;
  --dur-slow:  0.5s;

  /* ---- Z-index ---------------------------------------------------------- */
  --z-header:   100;
  --z-drawer:   200;
  --z-overlay:  190;
  --z-lightbox: 300;
  --z-float:     90;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}