/* ==========================================================================
   Squarely — Design Tokens
   Extracted from Figma: DESIGN WEBSITE (file ZT6HDX6upiJheuNW7S0KEA)
   ========================================================================== */

:root {
  /* ---- Brand colors ---- */
  --teal-900: #004750;   /* section headings */
  --teal-700: #125e59;   /* primary teal / gradient start */
  --teal-500: #3fa285;   /* gradient end */
  --green-500: #53bc7d;  /* primary buttons / CTA */
  --green-600: #2d8267;  /* eyebrow labels */
  --ink: #0b1e2d;        /* body copy */
  --footer-bg: #1d1f2b;
  --white: #ffffff;
  --hairline: #d6e0e9;

  /* ---- Gradients ---- */
  --grad-hero: linear-gradient(90deg, #125e59 0%, #3fa285 100%);
  --grad-heading: linear-gradient(90deg, #aada91 0%, #cfe2f3 100%);
  --grad-card: linear-gradient(113deg, #aada91 9.72%, #cfe2f3 71.06%, #e4daf5 92.4%, #ffd9c2 100%);
  --grad-mint: linear-gradient(90deg, #125e59 0%, #3fa285 100%);
  --grad-cta: linear-gradient(90deg, #3fa285 0%, #125e59 100%);

  /* ---- Typography ---- */
  --font-primary: "Poppins", system-ui, -apple-system, sans-serif;
  --font-body: "Open Sans", system-ui, sans-serif;
  --font-display: "Urbanist", system-ui, sans-serif;

  /* ---- Layout ---- */
  --container: 1594px;   /* design content width (left form -> right column) */
  --header-h: 78px;
  --radius-pill: 30px;
  --radius-card: 30px;
  --radius-input: 10px;

  /* ---- Shadows ---- */
  --shadow-header: 0 5px 10px rgba(0, 0, 0, 0.1);
  --shadow-card: 0 0 7.5px rgba(0, 0, 0, 0.05);
}