/* lakilehtonen.fi design tokens — REAL brand values (W2.1, 2026-07-18).
 *
 * Sources, in precedence order (owner rule 2026-07-11: webpage wins over
 * guidebook; owner 2026-07-18 in-chat: use the brand guide folder on this
 * server, skip its fonts):
 *  1. Live site CSS, probed 2026-07-18:
 *     cdn.prod.website-files.com/659bc2bffccf5c14ab7de322/css/
 *     laki-lehtonen.webflow.shared.7abcafded.min.css — site custom
 *     properties: --beige-1 #f5f2f0, --beige-2 #e1dbd4, --green-1 #e2e2dc,
 *     --green-2 #c3c6b9, --green-3 #374740; body color #333;
 *     type scale --header-l 2.625em / --header-m 1.875em / --header-s
 *     1.35em, --paragraph 1.125em, --paragraph-l 1.625em.
 *  2. Brand guidebook ~/brand/Brandi/FILES/LakiLehtonen-Brand_Giudelines.pdf
 *     ch.3 (p.27): Ivory #F5F2F0, Beige #E1DBD4, Warm Gray #E2E2DC, Moss
 *     #C4C6B9, Olive Green #464E46, Charcoal #2C2A29, Sky Blue #C5D5E5 —
 *     with the printed caveat "codes will be updated once the proposal is
 *     approved"; the live site ships the approved revisions (moss #c3c6b9,
 *     green #374740), so site values win where they differ.
 *  3. Logo sample: assets/65a94afe7b522c7b3d29648d-logo.svg fill = #374740
 *     (16 paths) — primary accent for THIS site is the logo green #374740
 *     (not LEO's #464e46, whose logo sample differed).
 * Fonts (owner rule 2026-07-11 + 2026-07-18 "skip the fonts"): open-license
 * only — Inter + Playfair Display, OFL-1.1, @fontsource 5.2.8 (verified
 * npm registry 2026-07-18), self-hosted woff2 in /fonts/. The captured
 * Sentient/Switzer woff2s in assets/ are Fontshare/ITF-licensed evidence,
 * never served.
 */
:root {
  /* D4p2 (2026-07-24, measured 992-2560 on live): Webflow's root scale
     R — every live desktop length/type is an R multiple. R = 1vw in
     992-1439, 14px in 1440-1919, 16px >=1920 (h1 2.625R, text 1.125R,
     body 1R, section pads 10R/2R, nav strip 2.625R, author pads 4R,
     avatar 15R — all verified against live at the 6-width matrix). */
  --ll-r: 0.875rem;             /* 14px (1440-1919 band) */
  /* live navbar = strip 2.625R + bar 80 + underline 1 ->
     107/115/118/118/123/123 measured */
  --ll-header-h: calc(2.625 * var(--ll-r) + 81px);
  /* live 12-col row width regime (90vw | 1350 | 1600), measured
     893/1152/1350/1350/1600/1600 */
  --ll-row: 84.375rem;
  /* live UI line-height (nav links, dropdown items, pills, TOC rows):
     20px fixed at root>=14, 1.2em in the vw band (11.9/15.36 measured) */
  --ll-lh-ui: 20px;

  /* color — brand */
  --ll-bg: #f5f2f0;             /* Ivory / --beige-1 */
  --ll-surface: #ffffff;
  --ll-beige: #e1dbd4;          /* Beige / --beige-2 */
  --ll-gray: #e2e2dc;           /* Warm Gray / --green-1 */
  --ll-moss: #c3c6b9;           /* Moss / --green-2 (site-approved value) */
  --ll-green: #374740;          /* heading+logo green / --green-3 */
  --ll-text: #333333;           /* live body color */
  --ll-text-muted: #5f6560;     /* derived: green-tinted gray on Ivory */
  --ll-accent: #374740;
  --ll-accent-text: #f5f2f0;    /* Ivory on green */
  --ll-charcoal: #2c2a29;       /* guidebook Charcoal (footer block) */
  --ll-focus-ring: #37474066;

  /* type — open-license substitutes for Sentient (headings) / Switzer (text) */
  --ll-font: 'Inter', system-ui, 'Segoe UI', sans-serif;
  --ll-font-heading: 'Playfair Display', Georgia, serif;
  /* W2c r4 2026-07-20: scale RE-MEASURED on live with Playwright
     computed styles @1440x900 across /, /lakimies, person, service and
     static pages (four independent measuring passes agree): body
     .text-block/richtext p 15.75px/22.68 (1.44), h1+h2 36.75px/42.26
     (1.15, weight 300 -> our 400 nearest bundled), h3 26.25px/30.19,
     buttons 15.75px fw400. The former 14.4/33.6/24 pins were a
     uniform 1.094x under-measure (Webflow 0.8em body trick read at
     the wrong node). Small text (nav strip default) = 14px. */
  --ll-fs-base: 0.984375rem;    /* live measured 15.75px */
  --ll-fs-lead: 1.25rem;
  --ll-fs-h1: 2.296875rem;      /* live measured 36.75px */
  --ll-fs-h2: 2.296875rem;      /* live h2 == h1 36.75px */
  --ll-fs-h3: 1.640625rem;      /* live measured 26.25px */
  --ll-fs-pl: 1.421875rem;      /* live --paragraph-l 1.625em: 22.75px
                                   @1440 (FAQ questions, quote leads) */
  --ll-fs-small: 0.875rem;      /* live body default 14px */

  /* r6 (live CSS read 2026-07-22): Webflow section padding utilities
     are vw-based at >=1440 — .padding-3 = 3vw, .padding-5 = 5vw
     (em-fixed below: 42/40px). Fixed px pins only matched at 1440. */
  --ll-pad3: 2.625rem;
  --ll-pad5: 2.5rem;

  /* space & shape */
  --ll-sp-1: 0.25rem;
  --ll-sp-2: 0.5rem;
  --ll-sp-3: 0.75rem;
  --ll-sp-4: 1rem;
  --ll-sp-6: 1.5rem;
  --ll-sp-8: 2rem;
  --ll-sp-12: 3rem;
  --ll-radius: 6px;
  --ll-radius-lg: 10px;
  --ll-maxw: 72rem;
  --ll-maxw-prose: 46rem;
  --ll-shell: 84.375rem;        /* live content container 1350 */
  --ll-shadow: 0 1px 3px rgb(44 42 41 / 0.12);
}

/* D4p2: live 992-1439 band scales EVERYTHING by root = 1vw (measured
   on live at 992/1280: h1 26.04/33.6 = 2.625vw, text 11.16/14.4 =
   1.125vw, body 9.92/12.8 = 1vw, padding-3/5 = 3vw/5vw computed). The
   former fixed defaults in this band were the 1440 values — the same
   pin class the FAQ/gutter fix removed. */
@media (min-width: 62rem) and (max-width: 89.9375rem) {
  :root {
    --ll-r: 1vw;
    --ll-row: 90vw;
    --ll-lh-ui: 1.2vw;
    --ll-fs-base: 1.125vw;
    --ll-fs-h1: 2.625vw;
    --ll-fs-h2: 2.625vw;
    --ll-fs-h3: 1.875vw;
    --ll-fs-pl: 1.625vw;
    --ll-fs-small: 1vw;
  }
}

/* section padding utilities are vw-based on ALL desktop widths (live
   computed 29.76/49.6 @992, 43.2/72 @1440, 57.6/96 @1920 = 3vw/5vw;
   the r6 ">=1440 only" note under-scoped it — D4p2 re-measured) */
@media (min-width: 62rem) {
  :root {
    --ll-pad3: 3vw;
    --ll-pad5: 5vw;
  }
}

/* live 1920 breakpoint: body font 14 -> 16, so every em-based size
   scales x8/7 (r6 correction: live's type vars are em of body —
   header-m/h3 26.25 -> 30 and paragraph-l 22.75 -> 26 DO scale; the
   r5 "h3 does not scale" note was measured on a px-pinned element). */
@media (min-width: 120rem) {
  :root {
    --ll-r: 1rem;
    --ll-row: 100rem;
    --ll-fs-base: 1.125rem;
    --ll-fs-h1: 2.625rem;
    --ll-fs-h2: 2.625rem;
    --ll-fs-h3: 1.875rem;       /* 26.25 -> 30 */
    --ll-fs-pl: 1.625rem;       /* 22.75 -> 26 */
    --ll-fs-small: 1rem;
    --ll-shell: 100rem;         /* live container 1350 -> 1600 */
  }
}

/* live tablet 768-991: Webflow max-991 sets body 16px — the SAME em
   scale as >=1920 (r6; the 768 width had never been reviewed) */
@media (min-width: 48rem) and (max-width: 61.9375rem) {
  :root {
    --ll-r: 1rem;               /* live tablet root = 16 */
    --ll-fs-base: 1.125rem;     /* text-block 18 */
    --ll-fs-h1: 2.625rem;       /* 42 (live person h1 @768 measured) */
    --ll-fs-h2: 2.625rem;
    --ll-fs-h3: 1.875rem;       /* 30 */
    --ll-fs-pl: 1.625rem;
    --ll-fs-small: 1rem;        /* body default 16 */
  }
}

/* live mobile (s9-mob3 @390 + r6 census): body default 12px
   (max-479 Webflow block), text-block 1.125em = 13.5px */
@media (max-width: 47.9rem) {
  :root {
    --ll-r: 0.75rem;            /* live mobile root = 12 */
    --ll-fs-base: 0.84375rem;
    --ll-fs-small: 0.75rem;     /* r6: li/a/footer/faq-answer = 12 */
    --ll-fs-pl: 1.21875rem;     /* 19.5 (FAQ questions @390) */
  }
}