/* ══════════════════════════════════════════════════════════════════════════════════
   MESAscale · light theme · SHARED LAYER
   Everything here is scoped to html[data-theme="light"] (or is the toggle itself), so the dark pages are untouched until a visitor opts in.
   Page-specific rules live in theme/light-<page>.css.

   Design logic (taken from Darkroom's services and case-studies pages, then fitted to this brand):
   · ink on white, no tint: colour comes from photography and a single orange accent
   · hairlines (not boxes) do most of the separating; cards are white with a 1px line
   · type keeps the brand's faces; light-on-dark weights are nudged heavier on white so the page doesn't look thin
   · ONE dark island per page (the offer / the closing band) so the eye still has somewhere to land, and the footer stays dark as the page's anchor
   · text colours are fixed to the contrast ratios below on #fff:  ink #0e0e0e 19.3 · body #3f3f46 10.4 · meta #6b6b72 5.3 · accent text #C8461A 4.8
   ══════════════════════════════════════════════════════════════════════════════════ */

html[data-theme="light"] {
  color-scheme: light;
  --lt-bg: #ffffff;
  --lt-soft: #f7f7f8;
  --lt-sunk: #efeff1;
  --lt-ink: #0e0e0e;
  --lt-body: #3f3f46;
  --lt-meta: #6b6b72;
  --lt-line: rgba(14, 14, 14, .10);
  --lt-line-2: rgba(14, 14, 14, .18);
  --lt-accent: #F05A28;
  --lt-accent-ink: #C8461A;
  /* the conversion colour on light is a deep ember: white text on it is 4.9:1 and the button itself is 4.9:1 against the white page (bright #F05A28 was 3.4:1 on both counts and read as neon on white).
     Hue stays the brand's; the dark theme keeps its bright orange. Chosen over 12 treatments (flat/gradient/ring/tint/halo/ink pill) rendered on the real nav and offer card. */
  --lt-cta: #CC400D;
  --lt-cta-hover: #B8370A;
  --lt-cta-active: #A53008;
  --lt-cta-fg: #fff;
  --lt-cta-sh: inset 0 1px 0 rgba(255, 255, 255, .18), 0 8px 20px -8px rgba(204, 64, 13, .6);
  --lt-cta-sh-h: inset 0 1px 0 rgba(255, 255, 255, .14), 0 12px 26px -8px rgba(204, 64, 13, .65);
  /* the tokens most pages already read from :root, flipped */
  --bg: #fff; --surface: #fff; --ink: #0e0e0e; --body-text: #3f3f46; --line: rgba(14, 14, 14, .10);
}

html[data-theme="light"] body { background: var(--lt-bg); color: var(--lt-body); }
html[data-theme="light"] ::selection { background: rgba(240, 90, 40, .22); color: var(--lt-ink); }

/* a soft cross-fade while the theme is switching (set by theme.js for ~400ms, skipped under reduced motion) */
html.theme-switching *, html.theme-switching *::before, html.theme-switching *::after {
  transition: background-color .32s ease, color .32s ease, border-color .32s ease, fill .32s ease, stroke .32s ease, box-shadow .32s ease, opacity .32s ease !important;
}

/* ─── announcement bar ─── */
html[data-theme="light"] .ann-bar { background: #f4f4f6; border-bottom: 1px solid var(--lt-line); }
html[data-theme="light"] .ann-bar-inner { color: var(--lt-body); }
html[data-theme="light"] .ann-icon { color: var(--lt-ink); }
html[data-theme="light"] .ann-val { color: #8a5a12; }
html[data-theme="light"] .ann-sep { color: var(--lt-line-2); }
html[data-theme="light"] .ann-close { color: var(--lt-meta); }
html[data-theme="light"] .ann-close:hover { color: var(--lt-ink); }

/* ─── nav ─── */
html[data-theme="light"] .nav { background: rgba(255, 255, 255, .86); border-bottom: 1px solid var(--lt-line); }
html[data-theme="light"] .nav-logo img { filter: invert(1); }   /* the wordmark SVGs are white; invert gives ink */
html[data-theme="light"] .nav-links a { color: #26262b; }
html[data-theme="light"] .nav-links a:hover,
html[data-theme="light"] .nav-links a.active { background: rgba(14, 14, 14, .05); color: var(--lt-ink); border-color: var(--lt-line); }
html[data-theme="light"] .nav-hamburger span { background: var(--lt-ink); }
html[data-theme="light"] .btn { background: var(--lt-cta); color: var(--lt-cta-fg); box-shadow: var(--lt-cta-sh); }
html[data-theme="light"] .btn:hover { background: var(--lt-cta-hover); box-shadow: var(--lt-cta-sh-h); }
html[data-theme="light"] .btn:active { background: var(--lt-cta-active); }
html[data-theme="light"] .btn:focus-visible { outline: 2px solid var(--lt-ink); outline-offset: 3px; }

/* ─── mobile menu ─── */
html[data-theme="light"] .nav-mobile { background: #f4f4f6; }
html[data-theme="light"] .nm-panel { background: #fff; box-shadow: 0 0 0 1px var(--lt-line), 0 18px 60px rgba(14, 14, 14, .08); }
html[data-theme="light"] .nm-logo img { filter: invert(1); }
html[data-theme="light"] .nav-mobile .nav-mobile-close { background: rgba(14, 14, 14, .06); }
html[data-theme="light"] .nav-mobile .nav-mobile-close:hover { background: rgba(14, 14, 14, .1); }
html[data-theme="light"] .nav-mobile .nav-mobile-close span { background: var(--lt-ink); }
html[data-theme="light"] .nm-list li a { border-bottom-color: var(--lt-line); }
html[data-theme="light"] .nm-list li a b { color: var(--lt-ink); }
html[data-theme="light"] .nm-list li a i { color: var(--lt-meta); }
html[data-theme="light"] .nm-list li a:active b { color: var(--lt-meta); }
html[data-theme="light"] .nm-cta { background: var(--lt-ink); color: #fff; }
html[data-theme="light"] .nm-cta:active { background: #2a2a2a; }
html[data-theme="light"] .nm-cap { color: var(--lt-meta); }

/* the closing band and the footer live in theme/light-close.css */

/* ─── early-platform-access dialog: a white card on the dimmed page ─── */
html[data-theme="light"] .epa-backdrop { background: rgba(14, 14, 14, .46); }
html[data-theme="light"] .epa-modal { background: #fff; border-color: var(--lt-line); box-shadow: 0 28px 90px rgba(14, 14, 14, .22), 0 4px 20px rgba(14, 14, 14, .08); }
html[data-theme="light"] .epa-close { background: rgba(14, 14, 14, .06); color: var(--lt-ink); }
html[data-theme="light"] .epa-close:hover { background: rgba(14, 14, 14, .11); }
html[data-theme="light"] .epa-modal-ey-txt { color: var(--lt-meta); }
html[data-theme="light"] .epa-modal-h { color: var(--lt-ink); }
html[data-theme="light"] .epa-modal-h em { color: var(--lt-accent-ink); }
html[data-theme="light"] .epa-modal-body p { color: var(--lt-body); }
html[data-theme="light"] .epa-callout { background: rgba(240, 90, 40, .06); border-color: rgba(200, 70, 26, .28); border-left-color: var(--lt-accent-ink); }
html[data-theme="light"] .epa-callout-ey { color: var(--lt-accent-ink); }
html[data-theme="light"] .epa-callout p { color: var(--lt-ink); }
html[data-theme="light"] .epa-callout strong { color: var(--lt-ink); }
html[data-theme="light"] .epa-strategic { color: var(--lt-body); border-top-color: var(--lt-line); }
html[data-theme="light"] .epa-qual { color: var(--lt-meta) !important; }

/* ══════════ the toggle ══════════
   A sun while the page is dark and a moon while it is light: the icon is the action. A filled 17px glyph (a 1.5px outline sun was too faint on the dark nav),
   a 38px round hit area that is invisible at rest and shows a soft surface on hover, a 2px ring on keyboard focus, and a 180ms swap between the two glyphs
   (no spin). Chosen from five candidates rendered in the real nav in both themes: A outline only (too faint, weak states), B filled only (no hover surface),
   C outline + rounded-square hover (thin at rest), D permanent hairline circle (a second container competing with the nav), E this one (weighted 8.8 / 10). */
.theme-toggle {
  --tt-sz: 38px; --tt-rest: rgba(255, 255, 255, .78); --tt-hi: #fff; --tt-surf: rgba(255, 255, 255, .09);
  flex: 0 0 auto; position: relative; width: var(--tt-sz); height: var(--tt-sz); min-width: var(--tt-sz); padding: 0; margin: 0 4px 0 8px;
  border: 0; border-radius: 999px; background: transparent; color: var(--tt-rest); box-shadow: none; font-size: 0;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
html[data-theme="light"] .theme-toggle { --tt-rest: rgba(14, 14, 14, .78); --tt-hi: #0e0e0e; --tt-surf: rgba(14, 14, 14, .06); }
.theme-toggle:hover { background: var(--tt-surf); color: var(--tt-hi); }
.theme-toggle:active { transform: scale(.95); }
.theme-toggle:focus-visible { outline: 2px solid var(--tt-hi); outline-offset: 2px; }
.theme-toggle .tt-ico { position: absolute; inset: 0; display: grid; place-items: center; transition: opacity .18s ease, transform .22s cubic-bezier(.2, .7, .2, 1); }
.theme-toggle .tt-ico svg { width: 17px; height: 17px; display: block; }
/* dark shows the sun (switch to light), light shows the moon (switch to dark) */
html[data-theme="dark"] .theme-toggle .tt-moon { opacity: 0; transform: rotate(-40deg) scale(.7); }
html[data-theme="light"] .theme-toggle .tt-sun { opacity: 0; transform: rotate(40deg) scale(.7); }
@media (max-width: 960px) { .theme-toggle.tt-nav { margin-left: auto; } .nav-inner > .theme-toggle.tt-nav ~ .btn { margin-left: 0 !important; } }
@media (max-width: 560px) { .theme-toggle.tt-nav:not(.tt-keep) { display: none; } .nav-inner > .theme-toggle.tt-nav ~ .btn { margin-left: auto !important; } }
/* pages with no mobile menu (apply, confirmation, thank-you) keep the icon on phones at a full 44px touch target; the wide wordmark steps down a size to make the room */
@media (max-width: 560px) {
  .theme-toggle.tt-nav.tt-keep { --tt-sz: 44px; margin: 0 -6px 0 6px; }
  .tt-fit .logo img { height: 20px !important; width: auto !important; }
}
@media (prefers-reduced-motion: reduce) { .theme-toggle, .theme-toggle .tt-ico { transition: none; } }

/* funnel pages with no nav */
.theme-toggle.tt-corner { --tt-sz: 40px; position: fixed; top: 14px; right: 14px; z-index: 60; margin: 0; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
html[data-theme="light"] .theme-toggle.tt-corner { background: rgba(255, 255, 255, .82); box-shadow: inset 0 0 0 1px rgba(14, 14, 14, .12); }

/* two-way switch inside the mobile menu */
.theme-seg {
  --tg-line: rgba(255, 255, 255, .14); --tg-ink: rgba(255, 255, 255, .62); --tg-on-bg: #f4f4f4; --tg-on-ink: #0e0e0e;
  display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid var(--tg-line); align-self: center;
}
html[data-theme="light"] .theme-seg { --tg-line: rgba(14, 14, 14, .14); --tg-ink: #6b6b72; --tg-on-bg: #0e0e0e; --tg-on-ink: #fff; }
.theme-seg button {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; border: 0; border-radius: 999px; background: transparent; color: var(--tg-ink); cursor: pointer;
  font-family: 'DM Mono', 'Roboto Mono', monospace; font-size: 11.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; line-height: 1;
  transition: background-color .22s ease, color .22s ease;
}
.theme-seg button[aria-pressed="true"] { background: var(--tg-on-bg); color: var(--tg-on-ink); }
.theme-seg button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.theme-seg .ts-ico { display: inline-grid; place-items: center; }
.theme-seg .ts-ico svg { width: 13px; height: 13px; display: block; }

/* the switch when it sits in a plain mobile panel (older navs) */
.theme-seg.theme-seg-plain { margin: 22px auto 0; }