/* ==========================================================================
   Design tokens
   Values measured from the reference design spec (docs/vbtemplate) and
   recorded here as the single source of truth for the template.
   ========================================================================== */

:root {
  /* ---- Colour ------------------------------------------------------- */
  --c-canvas: #f1f3f5;
  --c-white: #ffffff;
  --c-black: #000000;
  --c-ink: #0f0f0f;
  --c-primary: #1d4561;
  --c-accent: #3279ab;
  --c-muted: #7c8c9c;
  --c-slate: #4c555f;
  --c-slate-soft: #57626d;
  --c-rule: #c9d0d6;
  --c-hairline: rgba(110, 131, 146, 0.12);
  --c-tint: rgba(124, 140, 156, 0.1);
  --c-clear: rgba(255, 255, 255, 0);

  /* ---- Type --------------------------------------------------------- */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;

  --fs-display: 56px;
  --fs-h2: 40px;
  --fs-h3: 20px;
  --fs-lead: 24px;
  --fs-body: 16px;
  --fs-label: 14px;
  --fs-meta: 14px;
  --fs-caption: 12px;
  --fs-micro: 10px;

  --lh-display: 0.9em;
  --lh-heading: 1em;
  --lh-body: 1.2em;
  --lh-caption: 1.3em;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  /* ---- Layout ------------------------------------------------------- */
  --container: 1130px;
  --section-y: 96px;
  --band-y: 30px;
  --nav-y: 24px;
  --gutter-tablet: 40px;
  --gutter-phone: 20px;

  /* ---- Shape -------------------------------------------------------- */
  --radius-card: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --hairline: 1px solid var(--c-hairline);
  --rule: 1px solid var(--c-primary);

  /* ---- Motion ------------------------------------------------------- */
  --ease-appear: cubic-bezier(0.44, 0, 0.56, 1);
  --dur-appear: 600ms;
  --dur-hover: 240ms;
  --lift-appear: 30px;
  --stagger: 90ms;
}

/* Reference breakpoints
   desktop   min-width: 1200px
   tablet    min-width: 810px and max-width: 1199.98px
   phone     max-width: 809.98px                                          */

@media (max-width: 1199.98px) {
  :root {
    --fs-display: 45px;
    --fs-h2: 30px;
    --fs-lead: 19px;
    --fs-meta: 13px;
  }
}

@media (max-width: 809.98px) {
  :root {
    --fs-display: 36px;
    --fs-h2: 24px;
    --fs-lead: 15px;
    --fs-meta: 12px;
    --section-y: 72px;
  }
}