/* Century Pools Northern NSW: design tokens extracted from Figma
   File hxjWISVZu4udwCsQwxjMQ1, frame "homepage 1920 px" (122:86). Extracted 2026-10-21.
   The file has NO Figma variables. Only 4 paint styles exist (blue, light blue, dark blue, baby blue).
   All other values come from the layer styles. Design width is 1920px, and the px comments are the 1920 values. */
:root {
  /* ---- Colour ---- */
  --c-navy:        #002439; /* headings, body on light */
  --c-blue-700:    #0079C1; /* "vision" word, footer text, dark-blue gradient end */
  --c-blue-600:    #008CDF; /* CTA band base */
  --c-blue-550:    #018BDE; /* pool-card hover base (blue strip under card) */
  --c-blue-500:    #169EEB; /* eyebrows, highlight words, outline buttons */
  --c-blue-450:    #1DA1EE; /* highlight words (near-identical to 500, normalise to 500) */
  --c-sky:         #5BCAF4; /* light cyan, gradient tops, card glow */
  --c-ice:         #E9F7FF; /* light section bg (featured projects, review bubbles, footer) */
  --c-ice-2:       #EBF6FC; /* wave bg + brand rings */
  --c-grey:        #8B8B8B; /* body / lead copy */
  --c-white:       #FFFFFF;
  --c-logo-navy:   #0054A5; /* "NORTHERN NSW" in logo only */
  --c-star:        #FFDB3D; /* review stars (see icons/stars-5.svg) */

  /* ---- Gradients (Figma paint styles) ---- */
  --g-blue:       linear-gradient(180deg, #5BCAF4 1.5%, #028BDE 50.5%, #00639E 98.5%); /* style "blue": gradient text on white CTA buttons */
  --g-light-blue: linear-gradient(180deg, #85DDFF 0%, #30C6FF 50.5%, #00A4E1 100%);     /* style "light blue": primary buttons, step circles */
  --g-dark-blue:  linear-gradient(145deg, #0095EE 5.8%, #0079C1 94.2%);                 /* style "dark blue": feature icon circles, footer headings (gradient text) */
  --g-baby-blue:  linear-gradient(90deg, #EBF6FC 0%, #FFFFFF 100%);                     /* style "baby blue" */
  --g-card-circle: linear-gradient(180deg, #5BCAF4 0%, #1DA1EE 100%);                   /* pool-card arrow circle */
  --g-hero-overlay:
      linear-gradient(180deg, rgba(0,0,0,.20) 1.44%, rgba(102,102,102,0) 9.77%),
      linear-gradient(158deg, rgba(25,94,135,.36) 36%, rgba(3,3,3,.047) 59.2%);

  /* ---- Typography ---- */
  --font-sans: "Host Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; /* Google Font, weights 400/500/600/700/800 + 800 italic */
  --tracking: -0.02em;          /* every text layer uses -2% */
  /* fluid sizes: min @ 375px, max @ 1920px */
  --fs-hero:     clamp(2.5rem,   1.6rem + 3.9vw,  5.4375rem);  /* 87px  hero h1, lh .99 */
  --fs-display:  clamp(2.5rem,   1.6rem + 3.9vw,  5.475rem);   /* 87.6px "Where your vision" */
  --fs-cta:      clamp(2.25rem,  1.5rem + 3.2vw,  4.75rem);    /* 76px  "Let's make it Happen!" */
  --fs-h2:       clamp(2rem,     1.45rem + 2.4vw, 3.75rem);    /* 60px  section titles, lh 1.317 / 1.0 2nd line */
  --fs-stat:     clamp(1.75rem,  1.4rem + 1vw,    2.5rem);     /* 40px  "45+ YEARS" */
  --fs-h3:       clamp(1.375rem, 1.2rem + .7vw,   2rem);       /* 32px  card titles, step titles, "AWARD WINNING" (32.8) */
  --fs-footer-h: clamp(1.375rem, 1.25rem + .45vw, 1.75rem);    /* 28px */
  --fs-lead:     clamp(1.0625rem,.95rem + .55vw,  1.75rem);    /* 28px  hero sub (lh 1.38) / 28.8 intro */
  --fs-body-lg:  clamp(1.0625rem,.98rem + .35vw,  1.5rem);     /* 24px  section intro paragraphs, lh 1.317 */
  --fs-btn:      clamp(1.0625rem,.95rem + .45vw,  1.5438rem);  /* 24.7px (hero 26.9, CTA band 28.7, view-all 27.4) */
  --fs-nav:      clamp(1rem,     .9rem + .25vw,   1.375rem);   /* 22px */
  --fs-eyebrow:  clamp(.875rem,  .8rem + .3vw,    1.3125rem);  /* 21px ExtraBold, uppercase as typed */
  --fs-step-body:clamp(1rem,     .95rem + .25vw,  1.34rem);    /* 21.4px (steps 3-4 are 18.75 in file; normalise) */
  --fs-card-sub: clamp(.9375rem, .9rem + .15vw,   1.25rem);    /* 20px */
  --fs-small:    1rem;      /* 16px review body (16.34, lh 1.69), footer body */
  --fs-xs:       .875rem;   /* 14px legal line */
  --lh-tight: .99; --lh-heading: 1.317; --lh-body: 1.317; --lh-review: 1.69; --lh-hero-sub: 1.38;

  /* ---- Radii ---- */
  --r-hero-card: 62px;   /* award / 45 years cards (inner image 54px) */
  --r-why-photo: 39px;
  --r-card:      38px;   /* pool cards (image inside 27px) */
  --r-featured:  28px;
  --r-card-img:  27px;
  --r-bubble:    24px;   /* review bubble (23.6) */
  --r-pill:      999px;

  /* ---- Shadows ---- */
  --sh-card: 1.18px 1.18px 11.44px rgba(0,0,0,.09), 0 0 31.49px rgba(91,202,244,.20);
  --sh-btn:  1.08px 1.08px 2.15px rgba(0,0,0,.25);   /* used as drop-shadow() filter */
  --ts-hero-h1:  1.08px 1.08px 21.9px rgba(0,0,0,.43);
  --ts-hero-sub: 1.08px 0 13.2px rgba(0,0,0,.30);

  /* ---- Layout ---- */
  --container: 1740px;                         /* content spans x 90 to 1830 @1920 */
  --gutter: clamp(1.25rem, 4.7vw, 5.625rem);   /* 90px @1920 */
  --section-y: clamp(4rem, 7vw, 8.5rem);       /* approx vertical rhythm between sections */

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(.22,1,.36,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --dur-fast: 180ms; --dur: 320ms; --dur-slow: 700ms;
}
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; }
}