/* ============================================================================
   Boundless LP Design System — TOKENS
   ----------------------------------------------------------------------------
   The canonical tokens for Boundless landing pages. Every value traces to the
   live site's own styles (measured 2026-08-24) or to a decision documented
   beside it. Do not introduce a raw hex or px value in components.css or
   lp-wp.css where a token fits — add one here instead.

   Posture: "evolve for conversion" — brand DNA is preserved (Brandon Grotesque
   at its real weights, square corners, red/charcoal palette, photo-led), and
   LP-specific elements diverge where a campaign page has different work to do
   than a browse page. Divergences are marked ⚡ with a reason.

   CANON (Ryan, 2026-09-05): the LIVE SITE is canonical for the web — its
   fonts, weights, and base palette. The print catalogs are inspiration to
   push the design (color, devices, voice), NOT canonical: no print typeface
   is adopted, and heritage colors never replace the site's red/charcoal for
   chrome or actions.
   ========================================================================== */

:root{

  /* --- Type family ------------------------------------------------------
     Brandon Grotesque via Boundless's Typekit kit (kep3vjd). The kit is
     domain-locked: it loads on boundlessjourneys.com and silently fails
     everywhere else, so the fallback matters.
     ⚡ The theme authors this as `"brandon-grotesque", serif` — a sans falling
     back to a SERIF, which renders as Times off-domain. Montserrat is the
     closest free geometric sans and is the stand-in here. */
  --font: "brandon-grotesque", "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* --- Type weights -----------------------------------------------------
     ⚠️ HARD CONSTRAINT. The kit loads exactly four faces:
        300 normal · 300 italic · 500 normal · 700 normal
     There is no 400, no 600, no 900. Anything else is synthesized by the
     browser (faux-bold) and smears the letterforms. The live theme violates
     this with h1/h2 at 600. Use only the three variables below. */
  --w-light: 300;   /* body copy, large display text */
  --w-med:   500;   /* labels, buttons, subheads, small text needing presence */
  --w-bold:  700;   /* headings, emphasis — the ceiling */

  /* --- Type scale -------------------------------------------------------
     ⚡ Their site has NO h1/h2 hierarchy — both compute to 32px, separated
     only by margin. An LP needs a clear focal point, so this scale opens the
     top end up and keeps a real step between every level.
     Floors respect the audience standards (50–70 cohort): body ≥17px,
     microcopy ≥14px. */
  --fs-hero:  clamp(34px, 5.2vw, 56px);   /* h1 — hero only, one per page */
  --fs-h2:    clamp(27px, 3.2vw, 38px);   /* section titles */
  --fs-h3:    clamp(21px, 2vw, 25px);     /* card + subsection titles */
  --fs-h4:    19px;
  --fs-lead:  clamp(19px, 1.6vw, 22px);   /* deck / standfirst under a heading */
  --fs-body:  19px;                       /* base — brand runs 20px/300 desktop */
  --fs-small: 16px;
  --fs-micro: 14px;                       /* labels, kickers — FLOOR, never lower */

  --lh-tight: 1.15;   /* display */
  --lh-head:  1.25;   /* headings */
  --lh-body:  1.55;   /* running text */

  /* Uppercase headings are core brand — every heading level on the live site
     is uppercase. These letterspacing values keep caps legible at size. */
  --ls-display: .02em;
  --ls-head:    .04em;
  --ls-kicker:  .22em;   /* the spaced-caps eyebrow, used heavily on-brand */
  --ls-button:  .12em;

  /* --- Color: brand -----------------------------------------------------
     ⚡ RESOLVED INCONSISTENCY. The live theme carries two disagreeing red
     buttons: `.button.red` is #cc2823 hovering LIGHTER to #d13e39, while the
     hero `.cta-button` is the deeper #af2824 with no hover at all. Both are
     real brand reds. Decision: #cc2823 is the resting state, #af2824 is the
     hover/pressed state — darkening on press is the conventional affordance
     and it keeps both established colors. #d13e39 is dropped. */
  --red:        #cc2823;
  --red-deep:   #af2824;
  --red-tint:   rgba(204, 40, 35, .08);

  --charcoal:      #2e3038;
  --charcoal-lift: #393b42;   /* theme's own .button.gray hover */
  --charcoal-deep: #23252b;

  /* Night — used for full-bleed dark sections and closing CTAs. Not in the
     theme; a dark ground for the photo-led hero and closing bands. */
  --night:   #0d1120;
  --night-2: #161c33;

  /* --- Color: print heritage ---------------------------------------------
     Two print eras, both with exact ink values pulled from the PDFs' content
     streams. Print is warm and editorial; the website is
     the cold outlier. Use these for editorial + testimonial moments and
     campaign color-coding; red stays the action color (never a heritage CTA).

     Era A — 2024 catalog (CURRENT print voice; exact RGB fills). The catalog
     color-codes sections/trips with these — an LP campaign may adopt ONE as
     its trip accent (Japan=olive, trekking=maroon, etc.):
       [T] = safe for text on white/cream · [D] = display/decoration only */
  --olive:      #96a153;   /* [D] dominant 2024 accent (146 fills) */
  --terracotta: #d67928;   /* [D] warm band color (143) — large text only */
  --petrol:     #005478;   /* [T] deep teal-blue headers (83) */
  --marigold:   #faa61a;   /* [D] bright amber accents (83) */
  --maroon:     #70090a;   /* [T] bookish deep red display serif (78) */
  --rust:       #a4412e;   /* [T-large] running-head band (41) */

  /* Era B — 2013 brand book (naive CMYK→sRGB): */
  --espresso:    #4a2820;   /* C46 M71 Y77 K46 — the book's dominant display ink */
  --gold:        #cf8a00;   /* C10 M40 Y100 K10 — headline accent word */
  --gold-bright: #efc500;   /* C6 M23 Y100 — dash accents, underline ticks */
  --gold-text:   #b17300;   /* gold deepened for TEXT on light grounds — pure
                               --gold is ~2.4:1 on cream, below the 3:1
                               large-text floor; this clears it (≥3.4:1).
                               Decorative devices keep --gold. */
  --russet:      #825310;   /* C35 M58 Y92 K22 — serif quotes, warm links */
  --taupe:       #bab094;   /* C18 M22 Y35 K11 — muted display words */
  --cream:       #f4f0e9;   /* paper ground */

  /* Quote / emotional register: print sets quotes in a serif italic, but no
     print face is web-canonical. The kit ships a Brandon Grotesque 300 ITALIC
     face the site barely uses — that is the LP's quote voice. (Montserrat
     italic 300 is requested as the off-domain stand-in.) */
  --font-quote: var(--font);

  /* --- Color: neutrals --------------------------------------------------- */
  --white:      #fff;
  --page:       #ebebeb;   /* their actual body background */
  --stone:      #f5f5f4;   /* tint surface */
  --line:       #e5e5e5;   /* rules and borders */
  --line-input: #d5d5d5;   /* their form-control border */

  --ink:        #333;      /* body copy — theirs, not #2e3038 */
  --ink-strong: #000;      /* headings — theirs are pure black */
  --ink-soft:   #5a5e66;   /* ⚡ secondary text. Theme uses #666 (4.5:1 on white,
                              only just passing). Darkened to clear AA with margin
                              for a 50–70 audience. */
  --ink-invert:      #fff;
  --ink-invert-soft: #c2c7d6;

  /* --- Semantic ---------------------------------------------------------- */
  --error:      var(--red);
  --error-bg:   #fdf2f1;
  --success-bg: #eef6ee;
  --success-fg: #2e5c1c;
  --success-br: #cfe5cf;

  /* --- Shape -------------------------------------------------------------
     Square corners are brand DNA — radius:0 on every button, input and card
     across the live theme. Keep this at 0. */
  --radius: 0;

  /* --- Space (4px base) -------------------------------------------------- */
  --sp-xs:  6px;
  --sp-sm:  12px;
  --sp-md:  20px;
  --sp-lg:  32px;
  --sp-xl:  48px;
  --sp-2xl: 72px;
  --sp-3xl: 104px;

  /* --- Layout ------------------------------------------------------------ */
  --wrap:        1060px;   /* standard content column */
  --wrap-narrow: 760px;    /* long-form reading measure */
  --wrap-wide:   1520px;   /* theme's own max — full-bleed bands */
  --gutter:      24px;
  --gutter-sm:   18px;

  /* --- Controls ----------------------------------------------------------
     ⚡ Their base .button computes to 42px tall and their form inputs to 40px —
     both under the 44px tap-target standard, and 15px input text is small for
     the target cohort. These are deliberately larger. */
  --control-h:      52px;
  --control-h-sm:   44px;   /* absolute floor — never go below */
  --control-pad-x:  28px;
  --input-pad:      14px;
  --input-fs:       17px;   /* theirs: 15px */
  --tap-min:        44px;

  /* --- Elevation & motion ------------------------------------------------ */
  --shadow-card: 0 2px 14px rgba(46, 48, 56, .06);
  --shadow-lift: 0 8px 40px rgba(46, 48, 56, .10);
  --shadow-bar:  0 2px 10px rgba(0, 0, 0, .25);

  --ease:        cubic-bezier(.4, 0, .35, 1);
  --dur-fast:    .15s;
  --dur:         .25s;
  --dur-reveal:  .6s;
}