/* =========================================================================
   Simply Green Turf, LP-01 tokens.css
   Source of truth for every design decision. Every value here is a
   committed token. Public markup and styles.css read from this file only.
   No raw hex, no arbitrary values in the build.

   Concept: confident dark green ground with lime as singular accent,
   real Jacksonville lawn photography, all-sans discipline, two-column
   hero + form pane.

   Committed 2026-07-16 per creative concept in design-system-spec.md.
   Authority sources per token: see design-system-spec.md authority table.
   ========================================================================= */

:root {

  /* ---- color, brand primitives -------------------------------------- */
  --color-brand-forest: #1A3A2B;     /* dark forest, primary background on dark sections, hero copy on light */
  --color-brand-deep:   #215A3A;     /* deep mid green, hover states and illustrative accent */
  --color-brand-leaf:   #4A9B4A;     /* leaf mid green, stat numerals, gradient midpoint */
  --color-brand-lime:   #8FD14F;     /* lime accent, primary CTA fill, active states */
  --color-brand-lime-hover: #7BC142; /* deeper lime for hover */

  /* ---- color, neutral primitives ------------------------------------ */
  --color-white:      #FFFFFF;
  --color-off-white:  #F5F7F3;
  --color-cream:      #FBFAF6;       /* very light warm, used sparingly */
  --color-neutral-100: #EFF1EC;
  --color-neutral-200: #DDE1D8;
  --color-neutral-300: #B7BFB3;
  --color-neutral-400: #7A8480;
  --color-neutral-500: #5A6B60;
  --color-ink:        #0F1B14;       /* near-black with green undertone */

  /* ---- color, state ------------------------------------------------- */
  --color-error:    #B0342C;
  --color-error-bg: #FCECEA;
  --color-success:  #2E7D32;
  --color-focus-ring: #8FD14F;       /* lime for focus visibility */

  /* ---- color, semantic (what components consume) -------------------- */
  --background-primary:     var(--color-white);
  --background-secondary:   var(--color-off-white);
  --background-alternative: var(--color-brand-forest);    /* dark sections */
  --background-brand:       var(--color-brand-lime);      /* CTA fills */
  --background-form-pane:   var(--color-white);           /* hero form pane surface */

  --text-primary:      var(--color-ink);
  --text-secondary:    var(--color-neutral-500);
  --text-alternative:  var(--color-white);
  --text-on-brand:     var(--color-brand-forest);         /* text on lime */
  --text-accent:       var(--color-brand-lime);           /* the two-tone accent */
  --text-tagline-dark: var(--color-brand-forest);         /* tagline dark half */
  --text-tagline-lime: var(--color-brand-lime);           /* tagline lime half */

  --border-primary:     var(--color-neutral-200);
  --border-alternative: rgba(255, 255, 255, 0.12);        /* on dark sections */
  --border-focus:       var(--color-focus-ring);

  --icon-on-light:      var(--color-brand-forest);
  --icon-on-dark:       var(--color-brand-lime);
  --icon-accent:        var(--color-brand-lime);

  /* ---- typography, family ------------------------------------------- */
  --font-family-display: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-family-body:    'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ---- typography, weight ------------------------------------------- */
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --font-weight-extrabold: 800;

  /* ---- typography, size (desktop first; mobile overrides below) ----- */
  --font-size-display:   4.5rem;   /* 72px, hero H1 */
  --font-size-h1:        3rem;     /* 48px */
  --font-size-h2:        2.25rem;  /* 36px, section headlines */
  --font-size-h3:        1.5rem;   /* 24px */
  --font-size-h4:        1.25rem;  /* 20px */
  --font-size-body-lg:   1.125rem; /* 18px */
  --font-size-body:      1rem;     /* 16px */
  --font-size-body-sm:   0.875rem; /* 14px */
  --font-size-caption:   0.75rem;  /* 12px */
  --font-size-eyebrow:   0.75rem;  /* 12px, letter-spaced */

  /* ---- typography, line height -------------------------------------- */
  --line-height-tight:   1.05;
  --line-height-snug:    1.2;
  --line-height-normal:  1.5;
  --line-height-relaxed: 1.65;

  /* ---- typography, tracking ----------------------------------------- */
  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide:   0.08em;
  --letter-spacing-eyebrow: 0.14em;  /* small caps eyebrows */

  /* ---- spacing, 4px base ------------------------------------------- */
  --space-1:  0.25rem;   /* 4  */
  --space-2:  0.5rem;    /* 8  */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-5:  1.5rem;    /* 24 */
  --space-6:  2rem;      /* 32 */
  --space-7:  3rem;      /* 48 */
  --space-8:  4rem;      /* 64 */
  --space-9:  6rem;      /* 96 */
  --space-10: 8rem;      /* 128 */

  /* ---- radius ------------------------------------------------------- */
  --radius-sm:   4px;
  --radius-md:   8px;    /* buttons */
  --radius-lg:   12px;   /* cards */
  --radius-xl:   16px;   /* hero form pane */
  --radius-pill: 9999px; /* used sparingly, reserved for badges */

  /* ---- shadow ------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(15, 27, 20, 0.06);
  --shadow-md: 0 4px 16px rgba(15, 27, 20, 0.08);
  --shadow-lg: 0 12px 40px rgba(15, 27, 20, 0.12);
  --shadow-focus: 0 0 0 3px rgba(143, 209, 79, 0.35);

  /* ---- layout ------------------------------------------------------- */
  --container-max:  1280px;
  --canvas-max:     1440px;
  --gutter-desktop: 1.5rem;   /* 24 */
  --gutter-tablet:  1.25rem;  /* 20 */
  --gutter-mobile:  1rem;     /* 16 */

  --section-pad-desktop: 6rem;  /* 96 */
  --section-pad-tablet:  4rem;  /* 64 */
  --section-pad-mobile:  3rem;  /* 48 */

  /* ---- motion ------------------------------------------------------- */
  --duration-fast:   150ms;
  --duration-normal: 250ms;
  --duration-slow:   400ms;
  --ease-standard:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --ease-out-back:   cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---- interactive states ------------------------------------------- */
  --button-primary-bg:       var(--background-brand);
  --button-primary-text:     var(--text-on-brand);
  --button-primary-hover-bg: var(--color-brand-lime-hover);
  --button-primary-focus-ring: var(--shadow-focus);

  --button-secondary-bg:      transparent;
  --button-secondary-text:    var(--text-primary);
  --button-secondary-border:  var(--color-brand-forest);
  --button-secondary-hover-bg: var(--color-brand-forest);
  --button-secondary-hover-text: var(--color-white);

  --input-bg:            var(--color-white);
  --input-border:        var(--color-neutral-200);
  --input-border-focus:  var(--color-brand-forest);
  --input-text:          var(--color-ink);
  --input-placeholder:   var(--color-neutral-400);

  /* ---- z-index ------------------------------------------------------ */
  --z-utility-bar: 40;
  --z-form-pane:   30;
  --z-sticky:      50;
  --z-modal:       80;
  --z-playground:  90;
}

/* ---- mobile size overrides (small viewport tightens the scale) ----- */
@media (max-width: 767px) {
  :root {
    --font-size-display:  2.75rem;  /* 44 */
    --font-size-h1:       2rem;     /* 32 */
    --font-size-h2:       1.75rem;  /* 28 */
    --font-size-h3:       1.25rem;  /* 20 */
    --font-size-body-lg:  1rem;     /* 16 */
  }
}

/* ---- reduced motion honoring --------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast:   0ms;
    --duration-normal: 0ms;
    --duration-slow:   0ms;
  }
}