/* ==========================================================================
   DESIGN TOKENS

   The ONLY file containing raw colour values. Rebranding = edit this file.

   Palette is ours, not the reference's. peplab commits hard to a violet
   gradient; we commit equally hard to a deep teal->cyan one. The point is the
   commitment, not the hue — a half-hearted neutral palette reads as
   unfinished, which is the mistake this file replaces.

   Scale, radii and weight follow the reference's actual rendered design:
   large radii (20-28px), heavy display weights (800-900), tight leading,
   generous section rhythm.
   ========================================================================== */

:root {
  /* --- Surfaces --------------------------------------------------------- */
  --paper:      #ffffff;
  --wash:       #f4faf9;   /* tinted section / image wells */
  --wash-2:     #e8f4f2;   /* deeper tint, pills          */
  --ink-panel:  #0d1b1a;   /* dark panels (score, final CTA) */

  /* --- Ink ramp --------------------------------------------------------- */
  --ink:        #0c1a18;
  --ink-70:     #4a5f5c;
  --ink-45:     #83968f;

  /* --- Lines ------------------------------------------------------------ */
  --line:       #e2eeeb;
  --line-2:     #cbdedb;

  /* --- Brand ------------------------------------------------------------ */
  --brand:      #0e8a7d;
  --brand-d:    #076157;
  --brand-l:    #22b3a0;
  --brand-x:    #38d6b0;   /* gradient terminus */
  --brand-ink:  #ffffff;
  --brand-wash: #e6f5f2;

  /* --- Semantics -------------------------------------------------------- */
  --stock:      #12a06b;
  --rating:     #f5a623;
  --sale:       #0e8a7d;

  /* --- Placeholder marker ------------------------------------------------ */
  --ph-bg:      #fff4d6;
  --ph-bg-2:    #ffe9b0;
  --ph-ink:     #8a5a1f;

  /* --- Gradients -------------------------------------------------------- */
  --grad:       linear-gradient(118deg, #076157 0%, #0e8a7d 48%, #38d6b0 100%);
  --grad-panel: linear-gradient(118deg, #0b6d63 0%, #12988a 52%, #35c9ad 100%);
  --grad-dark:  linear-gradient(120deg, #0a1614 0%, #0d2724 55%, #10403a 100%);
  --grad-soft:  linear-gradient(118deg, #eefaf8, #f6fdfc);

  /* --- Layout ----------------------------------------------------------- */
  /* width:100% + max-width + padding is resilient: even if margin-inline:auto
     is neutralised by an ancestor, content still gets its gutter and never
     touches the viewport edge. A bare `width` has no such fallback. */
  --shell-max:  1240px;
  --shell-pad:  clamp(18px, 4vw, 44px);

  /* --- Radius ------------------------------------------------------------ */
  --r-xl:       32px;      /* big panels             */
  --r:          24px;      /* cards, wells           */
  --r-md:       18px;
  --r-sm:       12px;
  --r-pill:     999px;

  /* --- Elevation --------------------------------------------------------- */
  --sh-sm:      0 2px 10px -4px rgb(12 26 24 / .12);
  --sh:         0 18px 44px -26px rgb(12 26 24 / .30);
  --sh-lg:      0 40px 90px -40px rgb(12 26 24 / .42);
  --sh-brand:   0 16px 34px -16px rgb(14 138 125 / .55);

  /* --- Motion ------------------------------------------------------------ */
  --ease:       cubic-bezier(.22, 1, .36, 1);
  --amp:        26px;
  --dur:        .7s;

  /* --- Typography -------------------------------------------------------- */
  /* Display face is deliberately heavy and geometric — the reference's most
     distinctive move. Falls back through common geometric sans stacks. */
  --font-display: "Outfit", "Poppins", "Plus Jakarta Sans", system-ui,
                  -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;

  --t-2xs:  0.6875rem;  /* 11px  eyebrows, tags   */
  --t-xs:   0.8125rem;  /* 13px                   */
  --t-sm:   0.9375rem;  /* 15px                   */
  --t-base: 1.0625rem;  /* 17px  body             */
  --t-md:   1.25rem;    /* 20px                   */
  --t-lg:   1.75rem;    /* 28px                   */
  --t-xl:   clamp(2rem, 3.9vw, 3.125rem);    /* section headings  */
  --t-2xl:  clamp(2.35rem, 4.4vw, 3.6rem);   /* hero — 58px cap   */

  --lh-tight: 1.04;
  --lh-snug:  1.28;
  --lh-body:  1.62;

  --w-bold:   700;
  --w-heavy:  800;
  --w-black:  900;

  /* --- Spacing ----------------------------------------------------------- */
  --pad-sec:  clamp(64px, 8.5vw, 120px);
  --gap:      clamp(16px, 2vw, 26px);
  --gap-sm:   10px;
  --hdr-h:    76px;
}

/* Breakpoints (documentation — custom properties can't be used in queries):
     > 1080px   full desktop
     <= 1080px  hero + final CTA collapse to one column
     <= 921px   nav collapses to drawer
     <= 782px   trust band + footer to two columns
     <= 760px   step cards lose indent cascade and trailing column
     <= 600px   everything single column
*/