/*
  Design tokens.

  Every value here was measured off the live site during the Phase 0 capture:
  colours from the Elementor stylesheets by frequency, type and spacing from
  computed styles on the rendered pages. Nothing else in the codebase declares a
  raw colour, font size or spacing value.
*/

:root {
  /* ---- Colour ---- */
  --c-blue: #003ca2;          /* primary; footer and CTA band background */
  --c-blue-dark: #002699;     /* hover, and text on white buttons */
  --c-blue-mid: #3991d3;      /* secondary button fill */
  --c-navy: #010e37;          /* headings */
  --c-ink: #404040;           /* body text */
  --c-ink-soft: #343e5f;      /* secondary body text */
  --c-border: #e1e1e1;
  --c-green: #06a322;         /* feature ticks */
  --c-pale-blue: #bbcfff;     /* pricing card gradient foot */
  --c-orange: #fb8b24;        /* "Most popular", inline emphasis links */
  --c-gold: #ffc900;          /* testimonial stars */
  --c-band: #f7f7f9;          /* alternating section background */
  --c-white: #fff;

  --c-hero-from: #0a2a6b;
  --c-hero-to: #00266e;

  /* ---- Type ---- */
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-head: "Cabin", var(--font-body);

  --fs-hero: clamp(2rem, 1.35rem + 2.2vw, 2.5rem);      /* 32 -> 40px */
  --fs-section: clamp(2.125rem, 0.9rem + 4.1vw, 4.25rem); /* 34 -> 68px */
  --fs-h3: clamp(1.5rem, 1.2rem + 1vw, 1.75rem);
  --fs-card: 1.5rem;      /* 24px */
  --fs-lead: 1.125rem;    /* 18px */
  --fs-body: 1.1rem;      /* 17.6px, matches the live body size */
  --fs-small: 1rem;

  --lh-tight: 1.1;
  --lh-head: 1.2;
  --lh-body: 1.6;
  --lh-loose: 1.9;

  /* ---- Space ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;

  /* Vertical rhythm between sections: 120px on the live site, tightened on
     small screens where 120px eats the viewport. */
  --sp-section: clamp(3.5rem, 1.5rem + 6vw, 7.5rem);

  /* ---- Layout ---- */
  --container: 1320px;
  --container-pad: clamp(1rem, 0.5rem + 2vw, 2rem);
  --header-h: 90px;

  /* ---- Shape ---- */
  --radius-pill: 50px;
  --radius-card: 10px;
  --radius-sm: 6px;

  --shadow-card: 0 2px 20px rgb(0 0 0 / 0.06);
  --shadow-card-hover: 0 8px 30px rgb(0 0 0 / 0.1);
  --shadow-header: 0 2px 16px rgb(0 0 0 / 0.08);

  --transition: 160ms ease;
}

/* Someone who has asked their OS to stop animating things means it. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition: 0ms;
  }
}