/* =========================================================================
   ARC144 — LIGHT MODE THEME
   -------------------------------------------------------------------------
   Premium light theme built entirely on the existing design-token system.
   Nothing here touches the structure, layout, spacing, typography or the
   animation logic of the site. It only re-maps color/decorative tokens when
   <html data-theme="light"> is set. The dark theme (default / data-theme
   absent or "dark") is left 100% intact.

   Strategy
   --------
   1. Re-declare the primitive + semantic color tokens under a
      `html[data-theme="light"]` scope (higher specificity than :root and the
      injected body <style>, so it always wins regardless of source order).
   2. Convert the "white-on-dark" alpha decoration tokens into the equivalent
      "blue-on-light" alphas so grids, rulers, graduations, lines and frames
      stay visible — just extremely subtle, on a light surface.
   3. Re-map the decorative gradient / shadow tokens (--gr-*, --sh-*) that the
      Webflow markup drives through [data-bg] / [data-sh] attributes.
   4. A small set of surgical selector overrides for the handful of places
      that hardcode white/dark values instead of going through a token.

   Palette
   -------
   bg              #FFFFFF     surface-2       #F7FAFF     surface-blue #F0F6FF
   title           #111827     text            #667085     muted        #98A2B3
   accent          #1677FF     accent-2        #54A6FF
   border          #DCE9F9     border-faint    rgba(22,119,255,.12)
   grid            rgba(22,119,255,.05)         line     rgba(22,119,255,.10)
   graduation      rgba(22,119,255,.35)
   glow            0 8px 30px rgba(22,119,255,.25)   glow-soft 0 4px 20px rgba(22,119,255,.12)
   ========================================================================= */

html[data-theme='light'] {
  /* ---- Palette anchors (local, for readability of the rules below) ---- */
  --lm-bg: #ffffff;
  --lm-surface: #f7faff;
  --lm-surface-blue: #f0f6ff;
  --lm-title: #111827;
  --lm-text: #667085;
  --lm-muted: #98a2b3;
  --lm-accent: #1677ff;
  --lm-accent-2: #54a6ff;
  --lm-border: #dce9f9;
  --lm-border-faint: rgba(22, 119, 255, 0.12);
  --lm-grid: rgba(22, 119, 255, 0.05);
  --lm-line: rgba(22, 119, 255, 0.1);
  --lm-graduation: rgba(22, 119, 255, 0.35);
  --lm-gradient: linear-gradient(135deg, #2b83ff 0%, #0a3d91 100%);
  --lm-glow: 0 8px 30px rgba(22, 119, 255, 0.25);
  --lm-glow-soft: 0 4px 20px rgba(22, 119, 255, 0.12);

  /* ================= Semantic theme layer ================= */
  --_theme---background: var(--lm-bg);
  --_theme---text: var(--lm-title);
  --_theme---text-fade: var(--lm-text);
  --_theme---border: var(--lm-border);

  /* ================= Primitive neutrals =================
     --neutral--dark is used as a *dark surface* in the dark theme (panels,
     cards, loading screen). Its two "dark text" consumers (.u-bg-white /
     .text-dark) are unused in the markup, so re-pointing it to the light
     secondary surface is safe and flips every dark panel in one move.
     --neutral--white stays white (it is a genuine white surface for cards). */
  --neutral--dark: var(--lm-surface);

  /* ================= Brand accents =================
     Turquoise / green accents -> electric blue. Light cyan -> secondary blue. */
  --brand--blue: var(--lm-accent);
  --brand--bluesky: var(--lm-accent-2);

  /* ================= Alpha decoration (white -> blue) =================
     These drive borders, grids, rulers, graduations and faint fills that were
     white-at-opacity on a dark canvas. Re-cast as blue-at-opacity so every
     technical detail survives the switch to a light canvas. */
  --alpha--white-1: rgba(22, 119, 255, 0.02);
  --alpha--white-3: var(--lm-grid);
  --alpha--white-6: rgba(22, 119, 255, 0.08);
  --alpha--white-12: var(--lm-border-faint);
  --alpha--white-20: rgba(22, 119, 255, 0.18);
  --alpha--white-25: rgba(22, 119, 255, 0.22);
  --alpha--white-35: var(--lm-graduation);
  --alpha--white-50: rgba(17, 24, 39, 0.42); /* muted text / faint fills */
  --alpha--white-73: rgba(17, 24, 39, 0.62); /* faded text */

  /* Teal-alpha family -> blue-alpha */
  --alpha--blue-1: rgba(22, 119, 255, 0.02);
  --alpha--blue-3: rgba(22, 119, 255, 0.05);
  --alpha--blue-10: rgba(22, 119, 255, 0.1);
  --alpha--blue-15: rgba(22, 119, 255, 0.14);
  --alpha--blue-20: rgba(22, 119, 255, 0.2);

  color-scheme: light;
}

/* =========================================================================
   Decorative token layer injected by the Webflow markup (body <style>).
   Re-mapped here so [data-bg] / [data-sh] / gradient text keep working.
   ========================================================================= */
html[data-theme='light'] {
  /* Solid accent gradient (buttons, dots, dividers) — bleu -> navy du logo */
  --gr-blue: linear-gradient(135deg, #2b83ff 0%, #0a3d91 100%);

  /* Glass cards: white, faintly blue-tinted */
  --gr-glass: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.9) 0%,
      rgba(247, 250, 255, 0.75) 100%
    ),
    rgba(255, 255, 255, 0.85);

  /* Button surface: light with a faint blue wash */
  --gr-btn: linear-gradient(
      90deg,
      rgba(22, 119, 255, 0.05) 0%,
      rgba(22, 119, 255, 0) 100%
    ),
    linear-gradient(0deg, rgba(22, 119, 255, 0.04) 0%, rgba(22, 119, 255, 0.04) 100%),
    #ffffff;

  /* Section-label / eyebrow tint */
  --gr-headline: linear-gradient(
      90deg,
      rgba(22, 119, 255, 0.06) 0%,
      rgba(22, 119, 255, 0) 100%
    ),
    rgba(22, 119, 255, 0.05);

  /* "Dark" panels become the light secondary surface */
  --gr-dark: linear-gradient(0deg, rgba(22, 119, 255, 0.02) 0%, rgba(22, 119, 255, 0.02) 100%),
    #f7faff;

  /* ---- Shadows / glows (white -> blue, per spec) ---- */
  --sh-white-md: 0 1px 2px rgba(22, 119, 255, 0.12), 0 3px 6px rgba(22, 119, 255, 0.06);
  --sh-white-lt: 0 4px 20px rgba(22, 119, 255, 0.12);
  --sh-light: 0 1px 2px rgba(22, 119, 255, 0.12), 0 3px 6px rgba(22, 119, 255, 0.06);

  --sh-blue-dk: 0 8px 30px rgba(22, 119, 255, 0.25), 0 0 16px rgba(22, 119, 255, 0.18);
  --sh-blue-lt: 0 4px 20px rgba(22, 119, 255, 0.12), 0 0 8px rgba(22, 119, 255, 0.1);
  --sh-blue-md: 0 0 16px rgba(22, 119, 255, 0.22), 0 0 8px rgba(22, 119, 255, 0.18);

  --sh-glass: 0 8px 30px rgba(22, 119, 255, 0.08), 0 1px 2px rgba(22, 119, 255, 0.06);
  --sh-glass-btn: 0 8px 30px rgba(22, 119, 255, 0.08), inset 0 0 12px rgba(22, 119, 255, 0.05);
  --sh-glass-blue: 0 8px 30px rgba(22, 119, 255, 0.1), inset 0 0 12px rgba(22, 119, 255, 0.06);

  --sh-text-blue: 0 1px 8px rgba(22, 119, 255, 0.18);
  --sh-text-white: none;

  --border-color: var(--_theme---border);
}

/* =========================================================================
   Base surface — main page background gets the premium light gradient wash.
   ========================================================================= */
html[data-theme='light'],
html[data-theme='light'] body.u-mode-base {
  background-color: var(--lm-bg);
}

html[data-theme='light'] body.u-mode-base {
  background-image: linear-gradient(135deg, #ffffff 0%, #f5f9ff 50%, #eaf4ff 100%);
  background-attachment: fixed;
  color: var(--lm-title);
}

/* =========================================================================
   Text utilities — the markup uses .text-white / .text-white-50 heavily for
   content sitting on the (formerly dark) canvas. Flip them to the light-mode
   ink, then re-assert white only where the surface stays a solid accent.
   ========================================================================= */
html[data-theme='light'] .text-white,
html[data-theme='light'] .text-white-2 {
  color: var(--lm-title);
}

html[data-theme='light'] .text-white-50,
html[data-theme='light'] .text-white-50-2 {
  color: var(--lm-text);
}

/* Dim-text utilities (terminal prompt, "ARC_FILE_xxx" prefixes, etc.) were
   white at 20-25% — barely visible as blue-at-low-opacity on a light canvas.
   Map them to the readable "discreet" tone so hierarchy stays but text shows. */
html[data-theme='light'] .text-white-20,
html[data-theme='light'] .text-white-25 {
  color: var(--lm-muted);
}

html[data-theme='light'] .text-dark {
  color: var(--lm-title);
}

/* Keep legible white text on solid-blue accent surfaces */
html[data-theme='light'] [data-bg='blue'] .text-white,
html[data-theme='light'] [data-bg='blue'] .text-white-50,
html[data-theme='light'] .btn_wrap .text-white,
html[data-theme='light'] .btn_wrap.u-bg-blue .text-white {
  color: #ffffff;
}

/* =========================================================================
   Surgical fixes for hardcoded (non-token) colors.
   ========================================================================= */

/* Dark utility background -> light secondary surface */
html[data-theme='light'] .u-bg-dark {
  background-color: var(--lm-surface);
  color: var(--lm-title);
}

/* White "graduation" indicator bars were white-on-dark -> make them read on
   light by switching to the accent/graduation blue. */
html[data-theme='light'] .home_hero_number_bar,
html[data-theme='light'] .benefit_audio_bar {
  background-color: var(--lm-accent);
}

/* Header / nav: translucent light glass instead of translucent dark.
   The scroll-triggered frost is a separate element (.header_bg) that animates
   from height 0 -> 100% and was painted with #080a0b80 (dark). Re-cast both
   the header and that scroll glass as light so no dark veil appears on scroll. */
html[data-theme='light'] .header {
  background-color: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
}
html[data-theme='light'] .header_bg {
  background-color: rgba(255, 255, 255, 0.72);
}
html[data-theme='light'] .menu_bg {
  background-color: rgba(17, 24, 39, 0.12);
}

/* =========================================================================
   Module selector (terminal) — the button labels use mix-blend-mode:difference
   so white text stays legible on the dark canvas. On the light canvas that
   blend turns them into faint ghosts, so switch it off and set explicit ink.
   ========================================================================= */
html[data-theme='light'] .module_nav_inner {
  mix-blend-mode: normal;
  color: var(--lm-title);
}
html[data-theme='light'] .module_nav_btn:not(.active) .module_nav_inner {
  color: var(--lm-text);
}
html[data-theme='light'] .module_nav_btn {
  outline-color: var(--lm-border);
}
html[data-theme='light'] .module_nav_btn.active {
  outline-color: var(--lm-accent);
}
/* Active-tab fill: subtle blue surface instead of pure white (white-on-white) */
html[data-theme='light'] .module_nav_bg {
  background-color: var(--lm-surface-blue);
  box-shadow: var(--lm-glow-soft);
}

/* =========================================================================
   Grid / margin decoration images were baked as white lines on transparent.
   Invert to render as subtle dark-blue lines on the light canvas, and tint.
   ========================================================================= */
html[data-theme='light'] .loading_bg {
  filter: invert(1) hue-rotate(190deg) saturate(1.4) opacity(0.5);
}

html[data-theme='light'] .styleguide_utility_wrap.cc-margin {
  filter: hue-rotate(-15deg) saturate(1.3) brightness(0.85);
}

/* =========================================================================
   Large dark decorative imagery (hero, cta, map, build, benefit tabs) was
   authored dark. Soften + lighten it so it blends into the light canvas
   without deleting the graphic. Tuned to stay subtle & premium.
   ========================================================================= */
html[data-theme='light'] .hero_bg_visual,
html[data-theme='light'] .cta_bg,
html[data-theme='light'] .cta_visual,
html[data-theme='light'] .build_visual_wrap img,
html[data-theme='light'] .case_map_wrap img {
  filter: invert(0.94) hue-rotate(180deg) saturate(1.05) brightness(1.02);
  opacity: 0.9;
}

/* Loading screen surface */
html[data-theme='light'] .loading_screen {
  background-color: var(--lm-bg);
}

/* =========================================================================
   Buttons — the markup drives these with the [data-wf--interactive-button--
   variant] attribute (main / outline / small). Re-map each variant to the
   light spec:
     • main  -> solid blue gradient + white text + blue glow
     • outline/small -> white surface, #DCE9F9 border, #1677FF text
   Structure, sizing, corner-bracket animation, dot animation all preserved.
   ========================================================================= */

/* Primary CTA */
html[data-theme='light'] .btn_wrap[data-wf--interactive-button--variant='main'] {
  color: #ffffff;
  text-shadow: none;
}
html[data-theme='light']
  .btn_wrap[data-wf--interactive-button--variant='main']
  .btn_bg {
  background: var(--lm-gradient);
  border: 1px solid rgba(22, 119, 255, 0.35);
  box-shadow: var(--lm-glow);
}
/* Corner brackets on the solid-blue CTA fill.
   Dark theme keeps its cyan brackets on the dark button; in light the button
   is a blue fill, so the inherited blue/faint-white brackets vanished. A deep
   navy stays in the blue family and reads on BOTH grounds — the blue fill and
   the light page it slightly overflows onto (like the cyan did in dark). */
html[data-theme='light']
  .btn_wrap[data-wf--interactive-button--variant='main']
  .btn_corner_wrap {
  --color: #0a3d91;
}
html[data-theme='light']
  .btn_wrap[data-wf--interactive-button--variant='main']
  .btn_corner_group {
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.4));
}
/* Arrow dots -> white on the blue fill */
html[data-theme='light']
  .btn_wrap[data-wf--interactive-button--variant='main']
  .btn_dot::before {
  background-color: #ffffff;
}

/* ---- ALL corner brackets (encoches) -> navy in light mode ----
   Beyond the buttons, the same corner-bracket component frames cards, bento
   tiles, section labels and the hero headline. In dark those brackets are a
   bright cyan/bluesky that pops on the dark canvas; in light they inherited
   --brand--blue (#1677FF) = blue on white = invisible. Navy #0a3d91 reads on
   the white/blue-tint surfaces AND stays visible on the solid-blue CTA fill.
   The [data-corner-color] variants (bluesky/white/white-12) are re-pointed
   explicitly so their own rules don't keep the invisible colors. */
html[data-theme='light'] .btn_corner_wrap,
html[data-theme='light'] .btn_corner_wrap[data-corner-color='bluesky'],
html[data-theme='light'] .btn_corner_wrap[data-corner-color='white'],
html[data-theme='light'] .btn_corner_wrap[data-corner-color='white-12'] {
  --color: #0a3d91;
}
/* Replace the leftover dark-theme teal glow with a subtle navy halo. */
html[data-theme='light'] .btn_corner_wrap .btn_corner_group {
  filter: drop-shadow(0 0 2px rgba(10, 55, 145, 0.25));
}

/* =========================================================================
   SVG & raster accents authored in turquoise (#269DAE) / cyan (#BBECF3).
   Presentation attributes on SVG are overridable by CSS, so re-point the
   scan lines, decorative arcs, corner accents and gradient stops to blue.
   ========================================================================= */
html[data-theme='light'] [stroke='#269DAE'],
html[data-theme='light'] [stroke='#269dae'] {
  stroke: var(--lm-accent);
}
html[data-theme='light'] [fill='#269DAE'],
html[data-theme='light'] [fill='#269dae'] {
  fill: var(--lm-accent);
}
html[data-theme='light'] stop[stop-color='#269DAE'],
html[data-theme='light'] stop[stop-color='#269dae'] {
  stop-color: var(--lm-accent);
}
html[data-theme='light'] [stroke='#BBECF3'],
html[data-theme='light'] stop[stop-color='#BBECF3'] {
  stroke: var(--lm-accent-2);
  stop-color: var(--lm-accent-2);
}

/* Teal raster accents (review stars etc.) — hue-shifted turquoise -> blue */
html[data-theme='light'] .case_content_star_img,
html[data-theme='light'] .review_stars img,
html[data-theme='light'] img[src*='star'] {
  filter: hue-rotate(26deg) saturate(1.35);
}

/* Secondary buttons (outline + small) */
html[data-theme='light'] .btn_wrap[data-wf--interactive-button--variant='outline'],
html[data-theme='light'] .btn_wrap[data-wf--interactive-button--variant='small'] {
  color: var(--lm-accent);
  text-shadow: none;
}
html[data-theme='light']
  .btn_wrap[data-wf--interactive-button--variant='outline']
  .btn_bg,
html[data-theme='light']
  .btn_wrap[data-wf--interactive-button--variant='small']
  .btn_bg {
  background: #ffffff;
  border: 1px solid var(--lm-border);
  box-shadow: var(--lm-glow-soft);
}