/* Viewer Panel design tokens. Generated from brand/brand.json by scripts/build-brand.mjs.
   Edit the JSON, then run npm run brand. Import this file in any Viewer Panel surface. */
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("/assets/fonts/public-sans.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
:root {
  /* Color */
  --vp-green: #1F5E4E;
  --vp-green-dark: #174739;
  --vp-green-tint: #E6EEEA;
  --vp-cream: #F4F1EA;
  --vp-paper: #FCFBF8;
  --vp-ink: #1B2420;
  --vp-muted: #4C5853;
  --vp-line: #D8D3C6;
  --vp-on-green: #F4F1EA;            /* text on brand green, 7:1 */
  --vp-on-green-muted: rgba(244, 241, 234, 0.82);

  /* Type */
  --vp-font: "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --vp-font-wordmark: "Public Sans", var(--vp-font);
  --vp-text-sm: 14px;                 /* captions, footer, tables */
  --vp-text-base: 17px;               /* body */
  --vp-text-lg: 19px;                 /* intro paragraph */
  --vp-text-h3: 18px;
  --vp-text-h2: clamp(22px, 2vw, 26px);
  --vp-text-h1: clamp(30px, 3.6vw, 48px);  /* max two lines on desktop */
  --vp-leading: 1.5;
  --vp-leading-tight: 1.12;
  --vp-track-h1: -0.025em;
  --vp-track-h2: -0.015em;
  --vp-track-h3: -0.01em;
  --vp-track-body: 0;
  --vp-measure: 680px;                /* text column width */

  /* Space */
  --vp-gutter: 16px;                  /* phone side gutter; 32px from 760px */
  --vp-section: 48px;                 /* phone section padding; 64px from 760px */
  --vp-max: 1160px;

  /* Shape */
  --vp-radius-button: 4px;            /* buttons and inputs */
  --vp-radius: 6px;                   /* boxes, at most */

  /* Glass: the sticky header only */
  --vp-glass-bar: rgba(252, 251, 248, 0.9);
  --vp-glass-blur: saturate(1.4) blur(14px);
  --vp-hairline: rgba(27, 36, 32, 0.09);
}