/* ==========================================================================
   TOKENS — the only file you need to touch to re-skin the whole site.
   Current values are PLACEHOLDERS matching the reference video's olive
   scheme. Swap them for the client palette when it arrives.
   ========================================================================== */

:root {
  /* --- Brand palette ---------------------------------------------------
     Built around the logo's SKY BLUE #7bbfea, which is the dominant surface
     across the site. --c-deep is a deeper tone of the same blue (not navy)
     for contrast sections; --c-ink is the dark blue used for text.

     IMPORTANT: --c-mid is a LIGHT colour. White text on it fails contrast
     (~1.9:1), so anything sitting on --c-mid must use --c-ink.             */
  --c-deep: #1c5f8c;        /* deep sky — contrast sections, white text     */
  --c-mid: #7bbfea;         /* logo sky blue — dominant surface, dark text  */
  --c-soft: #c8e2f6;        /* pale sky — ghost type, accents               */
  --c-bone: #ffffff;        /* white text + light surfaces                  */
  --c-white: #ffffff;       /* pure white breakout section                  */
  --c-ink: #0d3550;         /* dark blue for text on light surfaces         */

  /* --- Semantic ------------------------------------------------------- */
  --bg: var(--c-mid);
  --fg: var(--c-ink);
  --bg-invert: var(--c-deep);
  --fg-invert: var(--c-bone);
  --rule: rgba(13, 53, 80, 0.25);

  /* --- Type ----------------------------------------------------------- */
  --font-display: "Playfair Display", "Bodoni Moda", Georgia, serif;
  --font-body: "EB Garamond", Georgia, "Times New Roman", serif;

  /* Fluid display scale — clamps keep the giant type from breaking small
     screens while still going edge-to-edge on a wide monitor. */
  --fs-mega: clamp(3.5rem, 13vw, 13rem);   /* footer wordmark, marquee     */
  --fs-hero: clamp(2.6rem, 7.4vw, 7.5rem); /* hero headline                */
  --fs-h2: clamp(1.9rem, 3.6vw, 3.6rem);   /* section headings             */
  --fs-h3: clamp(1.1rem, 1.5vw, 1.5rem);   /* card headings                */
  --fs-body: clamp(0.95rem, 1.02vw, 1.05rem);
  --fs-label: 0.68rem;                     /* tracked uppercase labels     */

  --track-label: 0.18em;
  --leading-display: 0.9;

  /* --- Layout --------------------------------------------------------- */
  --pad-x: clamp(1.25rem, 4vw, 4rem);
  --section-y: clamp(4rem, 10vw, 9rem);
  --radius: 4px;
  --radius-pill: 999px;

  /* --- Motion --------------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.35s;
  --dur: 0.7s;
  --dur-slow: 1.2s;

  --z-cursor: 9999;
  --z-preloader: 9000;
  --z-header: 100;
}

/* Sections that flip to the white surface opt in with this class. */
.is-light {
  --bg: var(--c-white);
  --fg: var(--c-ink);
  --rule: rgba(13, 53, 80, 0.18);
}

/* Deep surface — the only place white text is used. */
.is-deep {
  --bg: var(--c-deep);
  --fg: var(--c-bone);
  --rule: rgba(255, 255, 255, 0.3);
}