/**
 * Lead Slugger — design tokens
 * Loaded FIRST in the cascade. Nothing else in the theme hardcodes a hex value.
 * These variable names are the contract (BRAND-GUIDELINES.md §9.2).
 */
:root{
  /* Brand — §2.1 */
  --ls-navy:#1B4A7C; --ls-cream:#F4EBDA; --ls-white:#FFFFFF;
  --ls-gold:#E5A431; --ls-red:#D63031; --ls-black:#000000;

  /* Derived neutrals — §2.2, interface only */
  --ls-ink:#14202B; --ls-slate:#5A6672; --ls-navy-deep:#123253;
  --ls-navy-mid:#4E7CAE; --ls-red-deep:#A62122; --ls-gold-deep:#C4841F;
  --ls-cream-light:#FAF5EC; --ls-cream-deep:#E7DAC2;
  --ls-line-cream:#DDD3C0; --ls-line-white:#E2E6EA;

  /* Type — §3.2, fluid between 375px and 1440px */
  --ls-f-display:"Aleo",Georgia,serif;
  --ls-f-body:"Libre Franklin",system-ui,-apple-system,sans-serif;
  --ls-f-util:"Oswald",Impact,sans-serif;
  --ls-t-h1:clamp(40px, 28.73px + 3.005vw, 72px);
  --ls-t-h2:clamp(32px, 27.07px + 1.315vw, 46px);
  --ls-t-h3:clamp(22px, 19.89px + 0.563vw, 28px);
  --ls-t-h4:clamp(18px, 17.30px + 0.188vw, 20px);
  --ls-t-lede:clamp(18px, 16.94px + 0.282vw, 21px);
  --ls-t-body:clamp(16px, 15.65px + 0.094vw, 17px);
  --ls-t-small:14px;
  --ls-t-eyebrow:clamp(12px, 11.65px + 0.094vw, 13px);
  --ls-t-button:14px;
  --ls-t-stat:clamp(38px, 31.66px + 1.690vw, 56px);
  /* Call-tracking number gets its own role. Oswald is the only one of the three
     families that makes numerals read as data (§3.1). */
  --ls-t-tel:clamp(20px, 18.24px + 0.469vw, 25px);

  /* Spacing — §8.2, 4px base, only these values */
  --ls-1:4px; --ls-2:8px; --ls-3:12px; --ls-4:16px; --ls-5:24px;
  --ls-6:32px; --ls-7:48px; --ls-8:64px; --ls-9:96px; --ls-10:128px;

  /* Layout — §8.1 */
  --ls-container:1160px; --ls-measure:70ch; --ls-gutter:24px; --ls-pad:24px;

  /* Radius — §8.3, near-square deliberately */
  --ls-r-control:2px; --ls-r-surface:4px; --ls-r-slab:0px;

  /* Elevation — §8.3, one only */
  --ls-shadow:0 8px 24px rgba(18,50,83,.14);

  /* Header — §8.4, revised for the stacked lockup */
  --ls-masthead-h:192px; --ls-stickybar-h:72px; --ls-logo-w:200px;

  --ls-ease:cubic-bezier(.16,1,.3,1);
}
@media (min-width:768px){ :root{ --ls-pad:48px; } }
