/* FormsPal design tokens — sampled from the Figma exports in /_design-files.
   ⚠ Confirm exact hex + the heading font in Figma dev-mode before launch. */
:root {
  /* brand */
  --fp-green:        #248567;   /* logo, primary buttons, active tabs/underline, checks, "READY?" band */
  --fp-green-dark:   #1d6c54;
  --fp-green-light:  #e4efe9;   /* light green panels / hover */
  --fp-orange:       #eb7533;   /* primary CTA — "Start free trial" */
  --fp-orange-dark:  #d3622a;
  --fp-ink:          #071f24;   /* headings, dark sections, footer */
  --fp-cream:        #f8f4f2;   /* alternating section background */
  --fp-sage:         #d5ddd9;   /* accent panels (AI Tools, screenshot frames) */
  --fp-white:        #ffffff;

  /* neutrals */
  --fp-text:         #1d2a2c;
  --fp-muted:        #5f6b78;   /* P35: was #6b7785 — 4.17:1 on cream failed AA; now 4.98:1 (5.44 on white) */
  --fp-line:         #e6e9e8;
  --fp-line-dark:    rgba(255,255,255,.12);

  /* type — confirm the exact family in Figma (looks geometric/humanist sans) */
  --fp-font: "Poppins", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fp-h1: clamp(34px, 5vw, 58px);
  --fp-h2: clamp(26px, 3.2vw, 40px);
  --fp-h3: 20px;
  --fp-body: 16px;
  --fp-small: 13.5px;

  /* status colors — the ONE blue + ONE amber chip family and the ONE warning-banner palette
     (P56/P57: these had forked into 3 blues, 3 ambers, and 5 banner palettes across
     dash/sign/tracker). All pairs pass WCAG AA (blue 5.85:1, amber 5.58:1, warn 5.88:1). */
  --fp-chip-blue-bg:  #e8f0fe;
  --fp-chip-blue-ink: #1d4ed8;
  --fp-chip-amber-bg:  #fdf3d7;
  --fp-chip-amber-ink: #7d5c00;
  --fp-warn-bg:     #fff7ed;
  --fp-warn-border: #f3d9ac;
  --fp-warn-ink:    #9a4a12;

  /* shape / depth / rhythm */
  --fp-radius:    12px;
  --fp-radius-sm: 10px;   /* P60: small controls (inputs, pills, small cards) — was a 9/10px drift */
  --fp-radius-lg: 18px;
  --fp-radius-pill: 999px;
  --fp-shadow:    0 2px 14px rgba(7,31,36,.06);
  --fp-shadow-lg: 0 16px 44px rgba(7,31,36,.12);
  --fp-container: 1140px;
  --fp-gutter:    clamp(16px, 4vw, 40px);
  --fp-section-y: clamp(56px, 8vw, 110px);
}