/* =============================================================
   THE IMPACT ADVANTAGE — DESIGN TOKENS
   The single source of truth for the brand system.
   Every page must consume these variables. Never hardcode a
   brand color or font anywhere else.
   ============================================================= */

:root {
  /* ---- PRIMARY: DEEP FOREST GREEN ---- */
  --green-900: #071B16;   /* deepest — primary dark backgrounds */
  --green-800: #0B241E;   /* dark section backgrounds */
  --green-700: #102E26;   /* elevated dark surfaces / cards */
  --green-600: #16382E;   /* hover state on dark surfaces (derived) */

  /* ---- ACCENT: OLIVE / MOSS ---- */
  --olive-700: #7A8F38;   /* deepest accent — text on light */
  --olive-600: #93A847;   /* primary accent — buttons, keywords */
  --olive-500: #A6BA55;   /* light accent — highlights, icons on dark */

  /* ---- NEUTRALS: WARM OFF-WHITE / SAND ---- */
  --sand-100: #F5F3EE;    /* lightest — primary light background */
  --sand-200: #EFECE4;    /* light surface / alternating section */
  --sand-300: #E8E4D8;    /* contrast section / borders on light */
  --white:    #FFFFFF;

  /* ---- SEMANTIC ROLES ---- */
  --bg-dark:        var(--green-900);
  --bg-dark-alt:    var(--green-800);
  --surface-dark:   var(--green-700);
  --bg-light:       var(--sand-100);
  --bg-light-alt:   var(--sand-200);
  --surface-light:  var(--white);

  --text-on-dark:        var(--sand-100);
  --text-on-dark-muted:  rgba(245, 243, 238, 0.62);
  --text-on-light:       var(--green-900);
  --text-on-light-muted: rgba(7, 27, 22, 0.58);

  --accent:        var(--olive-600);
  --accent-bright: var(--olive-500);
  --accent-deep:   var(--olive-700);

  --hairline-dark:  rgba(166, 186, 85, 0.28);
  --hairline-light: rgba(7, 27, 22, 0.14);

  /* ---- TYPOGRAPHY ---- */
  --font-display: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Inter", "Helvetica Neue", Arial, sans-serif;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;
  --fw-extrabold: 800;

  /* Fluid type scale — clamps so the editorial hierarchy holds
     from mobile to large desktop without media queries. */
  --fs-display:  clamp(2.75rem, 6.5vw, 6rem);
  --fs-h1:       clamp(2.25rem, 4.8vw, 4rem);
  --fs-h2:       clamp(1.75rem, 3.2vw, 2.75rem);
  --fs-h3:       clamp(1.25rem, 1.8vw, 1.6rem);
  --fs-lead:     clamp(1.05rem, 1.5vw, 1.35rem);
  --fs-body:     clamp(1rem, 1.1vw, 1.0625rem);
  --fs-small:    0.875rem;
  --fs-eyebrow:  0.78rem;

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.65;

  --tracking-eyebrow: 0.22em;
  --tracking-display: -0.01em;
  --tracking-wide:    0.04em;

  /* ---- SPACING (8pt rhythm) ---- */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --space-8: 8rem;
  --space-9: 11rem;

  --section-pad-y: clamp(4.5rem, 11vh, 9rem);
  --container-max: 1240px;
  --container-pad: clamp(1.25rem, 5vw, 4rem);

  /* ---- FORM & DEPTH ---- */
  --radius-sm:  6px;
  --radius-md:  14px;
  --radius-lg:  22px;
  --radius-pill: 999px;

  --shadow-soft:   0 18px 40px -24px rgba(7, 27, 22, 0.45);
  --shadow-lift:   0 30px 60px -30px rgba(7, 27, 22, 0.55);

  /* ---- MOTION ---- (slow, elegant, premium — per brand doc) */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft:  cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   320ms;
  --dur-base:   620ms;
  --dur-slow:   1100ms;
}

@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;
  }
}