/* =============================================================================
   Remi — light ground (cream).
   -----------------------------------------------------------------------------
   Loaded AFTER each page's inline <style>, so plain-specificity rules here win
   on source order. Nothing in the base sheet is edited; remove the <link> and
   the page is exactly as it was.

   TWO ENTRY POINTS
     html.light      full page goes cream          (vertical / long-read pages)
     .band-light     one section goes cream        (rhythm on the dark homepage)

   THE ACCENT SPLITS IN TWO. #f0a830 measures 9.75:1 on the dark ground and only
   1.88:1 on cream — it cannot carry text here. So on a light ground --accent
   becomes the INK value (#8a5a10, 5.49:1) which fixes every `color: var(--accent)`
   at once, and the amber is restored explicitly on the handful of selectors that
   FILL with it. Those all pair with `color:#1a1206`, which stays 9.13:1. Buttons
   are therefore pixel-identical to the dark pages; only text changes.

   The cream is not stock parchment: it is Remi's own amber hue held at very low
   saturation, so ground and accent stay in one family.
   ========================================================================== */

html.light,
.band-light {
  --bg: #faf6ef;
  --surface: #fffdf9;
  --border: #e8dfd1;
  --text: #1a1613;          /* 16.7:1 on cream */
  --muted: #6b6157;         /*  5.6:1 on cream */
  --accent: #8a5a10;        /* INK — text, icons, rules                    */
  --accent-fill: #f0a830;   /* the brand amber, fills only                 */
  --accent-deep: #6b430a;
  --purple: #8a5a10;        /* used for link text across these pages       */
  --teal: #7d4f0c;          /* used for eyebrows                           */
  --gold: #8a5a10;
  --green: #2f6b3f;         /* ticks: #5fd08a is 1.9:1 on cream            */
}

/* ---- full-page light ----------------------------------------------------- */
html.light body {
  background: var(--bg);
  background-image: radial-gradient(120% 70% at 80% 0%, rgba(240, 168, 48, 0.10) 0%, transparent 58%);
  color: var(--text);
}

/* Nav: same frosted treatment, cream instead of ink. */
html.light nav {
  background: rgba(250, 246, 239, 0.86);
  border-bottom-color: var(--border);
}
html.light nav.scrolled {
  background: rgba(250, 246, 239, 0.94);
  box-shadow: 0 10px 30px -18px rgba(90, 62, 20, 0.35);
}
html.light .nav-login { border-color: rgba(26, 22, 19, 0.18); }

/* ---- a PHOTO hero stays DARK ----------------------------------------------
   These heroes are a photograph under a heavy scrim. Lightening it washes the
   photo out and throws away the one cinematic moment on the page. Keeping it
   dark turns it into a deliberate cap: dark hero, then cream to read in.

   Scoped to `.hero-photo`, which the photo pages carry on <section class="hero">.
   A PLAIN hero (office, physio, receptionist, paidup) has no photo — it sits on
   the cream ground and takes the normal light tokens. Before this scoping the
   pale hero ink was applied to every hero, so a plain page opened on a headline
   measuring 1.13:1 against cream.                                              */
html.light .hero.hero-photo {
  --text: #ece8e1;
  --muted: #b3aa9c;
  --accent: #f0a830;
  --purple: #f0a830;
  --green: #5fd08a;
  color: var(--text);
}
html.light .hero.hero-photo .badge { color: #f3c879; }
html.light .hero.hero-photo .btn-secondary { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.22); color: #ece8e1; }
html.light .hero:not(.hero-photo) .btn-secondary { border-color: rgba(26, 22, 19, 0.22); color: var(--text); }

/* ---- surfaces ------------------------------------------------------------ */
html.light .alt,
.band-light.alt { background: var(--surface); border-color: var(--border); }

html.light .stats,
html.light .industries { background: var(--surface); border-color: var(--border); }

/* Shadows: the dark sheet uses near-black at high opacity, which reads as dirt
   on cream. Warm, shallower, tinted to the ground. */
html.light .card,
html.light .offer,
html.light .plan,
html.light .price-card,
html.light .lead-form,
html.light .trust-card,
.band-light .card,
.band-light .offer,
.band-light .plan,
.band-light .feature,
.band-light .employee,
.band-light .vertical {
  box-shadow: 0 12px 32px -22px rgba(90, 62, 20, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
html.light .offer.featured,
html.light .plan.featured,
.band-light .offer.featured,
.band-light .plan.featured {
  box-shadow: 0 20px 46px -24px rgba(90, 62, 20, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

/* ---- amber FILLS restored (buttons keep their dark label) ----------------- */
html.light .nav-cta,
html.light .btn-primary,
html.light .offer-btn.primary,
html.light .plan-btn.primary,
html.light .offer-tag,
html.light .plan-tag,
html.light .m-btn,
.band-light .nav-cta,
.band-light .btn-primary,
.band-light .offer-btn.primary,
.band-light .plan-btn.primary,
.band-light .offer-tag,
.band-light .plan-tag {
  background: var(--accent-fill);
  color: #1a1206;
}
html.light .btn-primary:hover,
.band-light .btn-primary:hover { background: #e39a1f; }

/* Tinted chips/pills: the amber wash is fine on cream, the pale text is not. */
html.light .badge,
html.light .lang-pill,
html.light .offer-deeplink,
html.light .emp-plan b,
.band-light .badge,
.band-light .lang-pill,
.band-light .offer-deeplink,
.band-light .emp-plan b {
  color: var(--accent);
}
html.light .badge,
html.light .lang-pill,
html.light .offer-deeplink,
.band-light .badge,
.band-light .lang-pill,
.band-light .offer-deeplink {
  background: rgba(240, 168, 48, 0.14);
  border-color: rgba(138, 90, 16, 0.28);
}

/* Icon tiles */
html.light .feature-icon,
html.light .card-ico,
html.light .v-icon,
html.light .step-num,
.band-light .feature-icon,
.band-light .card-ico,
.band-light .v-icon,
.band-light .step-num {
  background: linear-gradient(160deg, rgba(240, 168, 48, 0.22), rgba(240, 168, 48, 0.07));
  border-color: rgba(138, 90, 16, 0.24);
}
html.light .feature-icon i,
html.light .card-ico i,
html.light .v-icon i,
.band-light .feature-icon i,
.band-light .card-ico i,
.band-light .v-icon i { color: var(--accent); }
html.light .step-num,
.band-light .step-num { color: var(--accent); }

/* Forms */
html.light .lead-form input {
  background: #fffdf9;
  border-color: var(--border);
  color: var(--text);
}
html.light .lead-form input:focus { border-color: var(--accent); }
html.light .lead-err { color: #a3341f; }

/* Scroll-progress + section rules */
html.light .scroll-progress { background: linear-gradient(90deg, var(--accent-fill), #e0b25a); }
html.light section { border-color: var(--border); }
html.light footer { border-top-color: var(--border); }

/* ---- blog posts ----------------------------------------------------------
   The generated blog CSS hardcodes `.post-body { color:#cdc8bf }` — a pale grey
   tuned for the dark ground that measures ~1.4:1 on cream and reads as blank.
   Long-read prose is exactly where the light ground earns its keep, so give it a
   proper reading ink (#2b2520, 14:1) and warm the furniture. */
html.light .post-body { color: #2b2520; }
html.light .post-body h2,
html.light .post-body h3,
html.light .post-body strong { color: var(--text); }
html.light .post-body a { color: var(--accent); }
html.light .post-body th { color: var(--muted); }
html.light .post-body code {
  background: rgba(240, 168, 48, 0.10);
  border-color: rgba(138, 90, 16, 0.28);
  color: #6b430a;
}
html.light .post-body blockquote { border-left-color: var(--accent); color: var(--muted); }
html.light .post-meta,
html.light .post-byline,
html.light .post-author-bio,
html.light .post-cta p,
html.light .faq-a { color: var(--muted); }
html.light .post-byline strong,
html.light .post-author-name,
html.light .post-cta h3 { color: var(--text); }
html.light .post-author-title { color: var(--accent); }
html.light .post-author,
html.light .post-cta,
html.light .faq-item { border-color: var(--border); }
html.light .post-cta,
html.light .faq-item { background: var(--surface); }
html.light .faq-item summary,
html.light .faq-item summary::after { color: var(--accent); }
html.light .faq-item summary { color: var(--text); }

/* ---- legal pages (terms / privacy) --------------------------------------
   These pages are token-driven, so the ground and body ink come free from the
   overrides above. Two specifics: the gradient <h1 span> maps both its stops to
   near-identical dark inks on cream (muddy), so give it a real amber-into-brown
   gradient; and the .note panel + section rules take the warm border. */
html.light h1 span {
  background: linear-gradient(135deg, #b9791a, #6b430a);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* ...but NOT the hero headline. The vertical pages colour their <h1 span> with a
   plain `color: var(--accent)`, and the legal gradient above was catching them
   too — brown ink smeared over a dark photograph. Put the hero span back on the
   token: amber on a photo hero, accent ink on a plain one.                    */
html.light .hero h1 span {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--accent);
}
html.light .note { background: var(--surface); border-color: var(--border); color: var(--muted); }
html.light .updated { color: var(--muted); }

/* Photo-backed panels keep their dark treatment (they carry white text). */
html.light .vertical.has-photo { color: #ece8e1; }
html.light .vertical.has-photo h3 { color: #fff; }
html.light .vertical.has-photo p { color: #cfc7b8; }
html.light .vertical.has-photo .v-more { color: #f3c879; }

/* ---- dark glass tuned for the dark ground ----------------------------------
   Two page-local rules paint a card in near-black glass (rgba(16,15,18,…)) so
   it reads over the dark page. On cream the glass goes mid-grey and the light
   theme's ink text lands on it at ~1.1:1. Both use an ID selector, so the
   override needs the same ID to win.
   - office.html  `#team .card`  — the staff back-office cards over the room photo
   - receptionist / paidup  `#how .tl-msg` — the call-timeline bubbles          */
html.light #team .card,
html.light #how .tl-msg {
  background: rgba(255, 253, 249, 0.84);
  border-color: var(--border);
}
/* The room photo behind #team is filtered to brightness(.4) for a dark page;
   on cream it shows as a grey fog. Lift it to a warm wash instead. */
html.light #team::before {
  filter: grayscale(.3) brightness(1.15) contrast(.95) sepia(.4) saturate(1.2);
  opacity: .22;
}

/* =============================================================================
   .band-light — one cream section inside a dark page
   ========================================================================== */
.band-light {
  background: var(--bg);
  color: var(--text);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  position: relative;
}
.band-light h1, .band-light h2, .band-light h3 { color: var(--text); }
.band-light p { color: var(--muted); }
.band-light .section-label { color: var(--accent); }
.band-light .section-sub { color: var(--muted); }
.band-light .card,
.band-light .step,
.band-light .feature,
.band-light .employee,
.band-light .plan,
.band-light .offer,
.band-light .trust-card {
  background: var(--surface);
  border-color: var(--border);
}
.band-light .plan-features li { border-bottom-color: var(--border); }
.band-light .check { color: var(--green); }
.band-light .emp-duties li { color: var(--muted); }
.band-light .emp-duties li strong { color: var(--text); }
.band-light .emp-plan { border-top-color: var(--border); color: var(--muted); }
.band-light .plan-name, .band-light .plan-desc, .band-light .plan-price span { color: var(--muted); }
.band-light .offers-more { color: var(--muted); }
.band-light .offers-more a { color: var(--accent); }
.band-light a { color: var(--accent); }
.band-light .btn-primary, .band-light .plan-btn.primary, .band-light .offer-btn.primary { color: #1a1206; }
.band-light .plan-btn.outline, .band-light .offer-btn.outline { border-color: var(--border); color: var(--text); }

/* A band sitting directly on the dark ground needs its own atmosphere, not the
   dark page's glow bleeding through. */
.band-light::before { display: none !important; }

/* SPECIFICITY: the base sheet styles these cards as `#how .step` — an ID
   selector (1,0,1) that beats `.band-light .step` (0,2,0). Without matching the
   ID the cards keep their dark glass on a cream ground and the text vanishes.
   `#how.band-light` is (1,1,0) + `.step` = (1,1,1), which wins on both. */
#how.band-light .step {
  background: var(--surface);
  border-color: var(--border);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 12px 32px -22px rgba(90, 62, 20, 0.32);
}
#how.band-light .step h3 { color: var(--text); }
#how.band-light .step p { color: var(--muted); }
#how.band-light .step::before { background: linear-gradient(90deg, var(--accent-fill), #e6c384); }
#how.band-light .step-num { color: var(--accent); }

/* Same trap on the pricing band: `.plan.featured` carries a dark-tuned radial. */
#pricing.band-light .plan.featured {
  background: radial-gradient(120% 70% at 50% 0%, rgba(240, 168, 48, 0.16), transparent 58%), var(--surface);
  border-color: rgba(138, 90, 16, 0.45);
}
#pricing.band-light .plan-price { color: var(--text); }
#pricing.band-light .plan-roi { color: var(--green); }

/* Cursor-spotlight overlays are tuned for a dark ground; soften on cream. */
.band-light .card::after,
.band-light .feature::after,
.band-light .employee::after,
.band-light .plan::after,
.band-light .offer::after {
  background: radial-gradient(220px circle at var(--mx) var(--my), rgba(240, 168, 48, 0.16), transparent 60%);
}

@media (prefers-reduced-motion: reduce) {
  html.light *, .band-light * { transition-duration: .001ms !important; }
}