/* LoopLine Lab — design tokens for the public site.
   Copied from builds/sales-proposal-generator/templates/tokens.css so this build
   stays self-contained. If the palette changes, change it in both places.
   White page, black headings, #414141 body, two cream surfaces. The rule colour
   is one step darker than surface-2: a 1px line in #F2F0E8 is invisible on white. */
:root {
  --bg: #ffffff;
  --ink: #000000;
  --body: #414141;
  --surface-1: #faf9f6;
  --surface-2: #f2f0e8;
  --rule: #eae7dc;
  --glass-deep: #d8d1bf; /* deepest valley of the hero glass; below --rule, same warm family */

  --font-sans: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* The marketing site runs wider than the offer documents: 1440px column,
     fluid gutter. Text blocks cap their own measure (see .lede, h1). */
  --head-h: 88px;      /* sticky header height; the hero pulls up underneath it */
  --measure: 1440px;
  --gutter: clamp(24px, 5vw, 64px);

  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 20px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-2xl: 72px;
  --space-section: clamp(56px, 8vw, 96px);

  --radius: 32px;       /* boxes, cards, panels, photo */
  --radius-btn: 999px;  /* buttons: fully rounded pill */

  --size-eyebrow: 0.75rem;
  --size-small: 0.8125rem;
  --size-body: 1rem;
  --size-lede: clamp(1.0625rem, 1.6vw, 1.1875rem);
  --size-h3: 1.125rem;
  --size-h2: clamp(1.5rem, 3vw, 2rem);
  --size-h1: clamp(2.25rem, 5.5vw, 4.5rem);
}