/* Three lighter directions, all built ONLY from the brand palette:
   Midnight Navy #10243A, Executive Blue #2764B5, Ice #E6ECF4, White #FFFFFF
   (plus those same colours at reduced opacity). No other hues.
   The directions differ in how much navy and blue they use, not in colour.
   The CTA card and footer stay navy in every direction (.dark-scope). */

/* ---------- Shared light token set ---------- */
[data-theme="ice"],
[data-theme="split"],
[data-theme="azure"],
[data-theme="split"] .site-header.is-scrolled,
[data-theme="azure"] .site-header.is-scrolled {
  --bg: var(--white);
  --bg-alt: var(--ice);
  --text: var(--navy);
  --muted: rgba(16, 36, 58, .76);          /* Navy 76%: ≈6.8:1 on white, ≈5.8:1 on Ice */
  --accent-text: var(--blue);              /* 5.6:1 on white */
  --line: rgba(16, 36, 58, .12);
  --surface: var(--white);
  --surface-hover: var(--white);
  --hero-bg: radial-gradient(ellipse at 50% 40%, var(--white) 0%, var(--white) 30%, var(--ice) 100%);
  --header-bg: rgba(255, 255, 255, .92);
  --nav-bg: rgba(255, 255, 255, .75);
  --nav-fg: rgba(16, 36, 58, .8);
  --nav-hover-bg: var(--ice);
  --nav-hover-fg: var(--navy);
  --eyebrow-fg: var(--blue);
  --eyebrow-bg: rgba(39, 100, 181, .07);
  --eyebrow-line: rgba(39, 100, 181, .3);
  --btn-primary-bg: var(--navy);
  --btn-primary-fg: var(--white);
  --btn-outline-line: var(--navy);
  --btn-outline-fg: var(--navy);
  --btn-outline-hover-bg: var(--navy);
  --btn-outline-hover-fg: var(--white);
  --icon-bg: var(--ice);
  --icon-fg: var(--blue);
  --step-line: var(--blue);
  --ph-bg: var(--ice);
  --ph-fg: rgba(16, 36, 58, .7);
  --focus: var(--blue);
  --card-shadow: 0 1px 2px rgba(16, 36, 58, .04), 0 12px 32px rgba(16, 36, 58, .06);
  --hover-glow: 0 0 0 1px rgba(39, 100, 181, .25), 0 24px 48px rgba(16, 36, 58, .12);
  --tile-filter: none;
  --hero-blend: normal;                    /* hero art is a transparent cut-out in every direction */
}
[data-theme] .btn-primary:hover { background: var(--blue); }
[data-theme] .section-alt .service-card,
[data-theme] .section-alt .q-card { border-color: transparent; }

/* Mobile menu panel on the light directions */
@media (max-width: 860px) {
  [data-theme] .nav-pill { background: var(--white); --nav-fg: rgba(16, 36, 58, .8); --nav-hover-bg: var(--ice); --nav-hover-fg: var(--navy); }
}

/* Logo swap for directions whose hero is dark/blue: white logo on the hero, colour logo once scrolled */
[data-theme] .site-header .logo-dark { display: none; }
[data-theme] .site-header.is-scrolled .logo-dark { display: block; }
[data-theme] .site-header.is-scrolled .logo-light { display: none; }

/* ======================================================================
   A · ICE & WHITE: all light. White and Ice ≈75%, navy ≈20%, blue ≈5%:
   exactly the balance in the brand guidelines.
   ====================================================================== */
/* (uses the shared light set as is) */

/* ======================================================================
   B · NAVY & ICE: the dark navy hero you liked, then a light white/Ice body.
   Premium first impression, lighter reading experience.
   The hero and the unscrolled header carry .dark-scope in the markup.
   ====================================================================== */
[data-theme="split"] .hero { --hero-blend: normal; }

/* ======================================================================
   C · EXECUTIVE BLUE: a blue hero (blue fading into navy), then white and Ice.
   ====================================================================== */
[data-theme="azure"] { --btn-primary-bg: var(--blue); }
[data-theme="azure"] .hero {
  --hero-bg: radial-gradient(ellipse at 50% 30%, var(--blue) 0%, var(--blue) 45%, rgba(39, 100, 181, 0) 120%), var(--navy);
  --text: var(--white);
  --muted: var(--white);
  --line: rgba(255, 255, 255, .35);
  --accent-text: var(--white);
  --eyebrow-fg: var(--white);
  --eyebrow-bg: rgba(255, 255, 255, .12);
  --eyebrow-line: rgba(255, 255, 255, .45);
  --btn-primary-bg: var(--white);
  --btn-primary-fg: var(--blue);
  --focus: var(--white);
  --hero-blend: normal;
}
[data-theme="azure"] .hero .btn-primary:hover { background: var(--ice); box-shadow: 0 14px 36px rgba(16, 36, 58, .3); }
[data-theme="azure"] .site-header:not(.is-scrolled) {
  --text: var(--white); --line: rgba(255, 255, 255, .3); --focus: var(--white);
  --nav-bg: rgba(255, 255, 255, .12); --nav-fg: var(--white); --nav-hover-bg: rgba(255, 255, 255, .2); --nav-hover-fg: var(--white);
  --btn-outline-line: var(--white); --btn-outline-fg: var(--white); --btn-outline-hover-bg: var(--white); --btn-outline-hover-fg: var(--blue);
}
[data-theme="azure"] .service-icon { background: var(--blue); color: var(--white); }
[data-theme="azure"] .service-card:hover .service-icon { background: var(--navy); }

/* Light-set photos are bright at the bottom: a deeper navy fade keeps the white card titles readable */
[data-theme] .img-card::before { background: linear-gradient(180deg, rgba(16, 36, 58, 0) 30%, rgba(16, 36, 58, .72) 58%, rgba(16, 36, 58, .94) 100%); }