/* Design tokens: the only place colours, type, radii, spacing and motion are defined.
   Colour rule: one green family. Buttons are ink and turn lime on hover; green marks links and focus;
   leaf is the logo; forest is the dark brand surface; lime is the single bright moment (one or two
   per page, never text on paper); mint is the soft surface. Alert is reserved for warnings/errors. */
:root{
  /* neutrals */
  --lpd-paper:#F1F2EE;
  --lpd-paper-2:#E7E9E3;
  --lpd-white:#FFFFFF;
  --lpd-ink:#101114;
  --lpd-ink-2:#3C3F47;
  --lpd-ink-3:#52545A;
  --lpd-rule:#D3D6CE;
  --lpd-on-ink-2:#B9BCC4;

  /* brand */
  --lpd-green:#0B7A43;
  --lpd-green-2:#086236;
  --lpd-forest:#0A4D2E;
  --lpd-leaf:#11A75C;

  /* surfaces */
  --lpd-lime:#D7FF3C;
  --lpd-mint:#DDF3E6;
  /* hero phrase highlights only: each rotating phrase gets its own soft colour */
  --lpd-sky:#A9D6FF;
  --lpd-peach:#FFD6B5;
  --lpd-lavender:#D9C8FF;
  /* page accent: a product page sets it to its signature colour (see lp_sections); text on it is always ink */
  --accent:var(--lpd-mint);
  --accent-fg:var(--lpd-forest);

  /* status (not part of the palette: warnings and errors only) */
  --lpd-alert:#E5531A;

  /* type */
  --lpd-font-display:'Bricolage Grotesque','Hanken Grotesk',system-ui,sans-serif;
  --lpd-font-body:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --lpd-text-hero:clamp(44px,5.7vw,94px);
  --lpd-text-h2:clamp(40px,6vw,92px);
  --lpd-text-h3:clamp(28px,2.5vw,38px);
  --lpd-text-lede:19px;
  --lpd-text-body:17px;
  --lpd-text-small:15px;

  /* shape: buttons are pills, surfaces use --lpd-r, large blocks --lpd-r-lg */
  --lpd-r-sm:14px;
  --lpd-r:22px;
  --lpd-r-lg:28px;
  --lpd-r-xl:40px;
  --lpd-pill:999px;

  /* layout */
  --lpd-max:1360px;
  --lpd-gutter:32px;
  --lpd-section:150px;
  --lpd-nav-h:72px;

  /* motion */
  --lpd-ease:cubic-bezier(.16,1,.3,1);
  --lpd-shadow-card:0 2px 4px rgba(13,14,18,.06),0 30px 60px -24px rgba(13,14,18,.35);
}
@media (max-width:767px){
  :root{--lpd-gutter:16px;--lpd-section:96px;--lpd-r-xl:28px}
}

/* Tones: put .lpd-tone-* on any section or card to set its surface and text colour. */
.lpd-tone-paper{--card-bg:var(--lpd-white);--tone-bg:var(--lpd-paper);--tone-fg:var(--lpd-ink);--tone-soft:var(--lpd-ink-2);--tone-line:var(--lpd-rule)}
.lpd-tone-white{--card-bg:var(--lpd-paper);--tone-bg:var(--lpd-white);--tone-fg:var(--lpd-ink);--tone-soft:var(--lpd-ink-2);--tone-line:var(--lpd-rule)}
.lpd-tone-ink{--card-bg:rgba(255,255,255,.07);--tone-bg:var(--lpd-ink);--tone-fg:var(--lpd-paper);--tone-soft:var(--lpd-on-ink-2);--tone-line:rgba(241,242,238,.18)}
.lpd-tone-forest{--card-bg:rgba(255,255,255,.08);--tone-bg:var(--lpd-forest);--tone-fg:#fff;--tone-soft:#CFE3D8;--tone-line:rgba(255,255,255,.22)}
.lpd-tone-lime{--card-bg:rgba(255,255,255,.5);--tone-bg:var(--lpd-lime);--tone-fg:var(--lpd-ink);--tone-soft:#2B2F12;--tone-line:rgba(13,14,18,.18)}
.lpd-tone-mint{--card-bg:rgba(255,255,255,.62);--tone-bg:var(--lpd-mint);--tone-fg:var(--lpd-ink);--tone-soft:#2C4A3A;--tone-line:rgba(13,14,18,.14)}
.lpd-tone-peach{--card-bg:rgba(255,255,255,.55);--tone-bg:var(--lpd-peach);--tone-fg:var(--lpd-ink);--tone-soft:#4A3424;--tone-line:rgba(13,14,18,.14)}
.lpd-tone-sky{--card-bg:rgba(255,255,255,.55);--tone-bg:var(--lpd-sky);--tone-fg:var(--lpd-ink);--tone-soft:#1F3850;--tone-line:rgba(13,14,18,.14)}
.lpd-tone-lavender{--card-bg:rgba(255,255,255,.55);--tone-bg:var(--lpd-lavender);--tone-fg:var(--lpd-ink);--tone-soft:#372B55;--tone-line:rgba(13,14,18,.14)}
[class*="lpd-tone-"]{background:var(--tone-bg);color:var(--tone-fg)}