/* Inspired Custom Pools and Landscape: brand style sheet
   Colours, type, spacing and shape for the whole site, in one file.
   Change a value here and it changes everywhere.
   Generated by John Kaplar (johnkaplar.ai) from the original site and the chosen design. */

/* Theme: Light and Bright. The same brand taken somewhere new.
   - brand accent #269ccf; brand light tone #f3f0e9
   - headlines in Roboto (theirs); body in Roboto (used on the old site)
   - daylight page #fdfcfb; ink #0a2936 drawn from the accent; pale wash #e5f3f9 for bands */

:root {
  --bg: #fbfdfe;
  --surface: #ffffff;
  --surface-2: #eaf6fb;
  --line: #d6e6ee;
  --line-strong: #a9c6d4;

  --text: #0b3558;
  --text-2: #4f6a7d;

  --accent: #0f7fb5;
  --accent-deep: #0b6592;
  --accent-soft: rgba(47, 193, 255, 0.18);
  --on-accent: #ffffff;

  --dark-bg: #0b3558;
  --dark-text: #fbfdfe;
  --dark-text-2: #b5cddd;

  /* Contrast bands: sections that flip to the other side of the palette. */
  --band-bg: #f1ebe0;
  --band-surface: #faf7f1;
  --band-text: #0b3558;
  --band-text-2: #5b6770;
  --band-line: #d8cdb9;
  --band-accent: #0f7fb5;

  --font-display: 'Josefin Sans', system-ui, sans-serif;
  --font-body: 'Figtree', system-ui, sans-serif;
  --font-eyebrow: 'Figtree', system-ui, sans-serif;
  --display-weight: 300;
  --display-tracking: -0.012em;
  --display-transform: none;
  --display-size: 5.6rem;
  --h1-size: 3.7rem;
  --h2-size: 2.8rem;
  --h3-size: 1.5rem;
  --body-size: 1.0625rem;
  --lead-size: 1.2rem;
  --eyebrow-size: 0.9rem;
  --eyebrow-tracking: 0;
  --eyebrow-transform: none;
  --btn-size: 0.95rem;
  --btn-tracking: 0;
  --btn-transform: none;
  --btn-pad: 15px 28px;

  --radius-control: 999px;
  --radius-card: 20px;
  --radius-image: 20px;
  --gutter: 24px;
  --gap: 24px;
  --gap-lg: 64px;
  --section-pad: clamp(80px, 11vw, 148px);
  --content-max: 1180px;
  --content-max-wide: 1440px;

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --reveal-duration: 0ms;

  --hero-scrim: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.1) 60%, rgba(0, 0, 0, 0) 100%);

  --brand-ink: #0d4a7c;
  --font-brand: 'Josefin Sans', system-ui, sans-serif;
  --cyan: #2fc1ff;
  --palm: #4f9a2e;
}

/* Design pass: daylight by the pool. Water cyan fills the buttons with
   navy words; travertine (the paver stone in their photos) is the band. */
body .btn-primary {
  background: var(--cyan);
  color: #06304f;
}
body .btn-primary:hover {
  background: #63d1ff;
}
body .iv.iv {
  background: linear-gradient(160deg, #2fc1ff 0%, #1aa3e0 100%);
  color: #06304f;
}
body .iv.iv .iv-btn.iv-btn {
  background: #0b3558;
  color: #fff;
}
body .hw .hw-place {
  color: var(--palm);
}
body .chip.is-on {
  background: #0b3558;
  border-color: #0b3558;
  color: #fff;
}
/* Josefin sits high in its box; give the big lines room. */
h1,
h2,
.st-lead {
  line-height: 1.1;
}

/* ---- Captured from the original site (reference only) ----
   platform: wordpress
   fonts: Roboto | Jost | Roboto Slab | Roboto Flex
   colours: rgb(76, 82, 83) | rgb(255, 255, 255) | rgb(0, 0, 0) | rgba(255, 255, 255, 0) | rgb(47, 193, 255) | rgb(16, 18, 24) | rgb(250, 250, 250) | rgb(102, 102, 102)
   Use the brand colour above as --accent if the designer has one. */