/* ============================================================
   SudoCyber — light-mode overrides
   Loads LAST (after merge.css and sudo-sections.css) so it wins
   the cascade. Only adds rules scoped to [data-theme="light-mode"],
   so dark mode is untouched. Uses html[data-theme="light-mode"]
   (specificity 0,1,1) to override the :root sudo tokens.
   ============================================================ */

/* --- a. Re-map the sudo design tokens for light mode ---------
   Most .sudo-* rules reference these variables, so flipping the
   tokens fixes the bulk of the page in one place: text → dark,
   panels/borders → light. Brand red is left as-is (reads on light). */
html[data-theme="light-mode"]{
  --sudo-white:#141416;   /* headings / strong text */
  --sudo-grey:#616670;    /* body paragraphs (matches legacy light body colour) */
  --sudo-greyl:#3A3A40;   /* sub / accent text, checks, trust line */
  --sudo-mut:#6E6E76;     /* muted: placeholders, eyebrow tags, spot numbers */
  --sudo-panel:#F5F4FA;   /* hero / trust / form-input backgrounds */
  --sudo-panel2:#EEEDF4;  /* feature "spot" tiles */
  --sudo-black:#FFFFFF;   /* base background */
  --sudo-line:#E3E3E3;    /* borders */
}

/* --- b. Literal #fff text the tokens can't reach -------------
   Re-point them at --sudo-white, which is now dark in light mode. */
html[data-theme="light-mode"] .sudo-spot__kw,
html[data-theme="light-mode"] .sudo-outcomes strong,
html[data-theme="light-mode"] .sudo-field input,
html[data-theme="light-mode"] .sudo-field textarea{
  color:var(--sudo-white);
}

/* --- c. Hero overlay gradients -------------------------------
   The dark scrims exist to make white text readable over a photo.
   In light mode the text is dark, so the scrim must be light. */
html[data-theme="light-mode"] .sudo-hero__bg:after{
  background:linear-gradient(90deg,
    rgba(255,255,255,.90) 0%,
    rgba(255,255,255,.62) 60%,
    rgba(255,255,255,.40) 100%);
}
html[data-theme="light-mode"] .sudo-hero--noimg{
  background:radial-gradient(120% 120% at 100% 0%, #FBECEB 0%, #F5F4FA 55%);
}

/* --- d. Ghost button ----------------------------------------- */
html[data-theme="light-mode"] .sudo-btn--ghost{
  border-color:rgba(0,0,0,.25);
  color:var(--sudo-white);
}
html[data-theme="light-mode"] .sudo-btn--ghost:hover{
  border-color:#141416;
  background:rgba(0,0,0,.05);
  color:var(--sudo-white);
}

/* --- e. Decorative tweaks ------------------------------------ */
/* Soften the feature-spot red glow for a light backdrop. */
html[data-theme="light-mode"] .sudo-spot:before{
  background:radial-gradient(circle, #F6DCD9 0%, rgba(246,220,217,0) 70%);
}
/* Logo well stays dark (partner logos are often white/transparent);
   give it a hairline so it sits cleanly on a light page. */
html[data-theme="light-mode"] .sudo-trust__logos .chip{
  border:1px solid var(--sudo-line);
}

/* --- f. Home flying-image hero (light mode) ------------------
   The hero ships dark; in light mode flip the background, text, cards,
   captions and the network colours to read on a light page. */
html[data-theme="light-mode"] .homepage-flying-grid{
  background:linear-gradient(180deg,#eef1f6 0%,#ffffff 100%);
  --net-line:96, 116, 146;
  --net-dot:64, 84, 116;
}
html[data-theme="light-mode"] .homepage-flying-grid__content h1{ color:#141416; }
html[data-theme="light-mode"] .homepage-flying-grid__eyebrow{ color:#6a6f7a; }
html[data-theme="light-mode"] .homepage-flying-grid__lead{ color:#4a4f59; }
html[data-theme="light-mode"] .homepage-flying-grid__secondary{ border-color:rgba(0,0,0,.18); color:#141416; }
html[data-theme="light-mode"] .homepage-flying-grid__secondary:hover,
html[data-theme="light-mode"] .homepage-flying-grid__secondary:focus-visible{
  background:rgba(0,0,0,.05); border-color:rgba(0,0,0,.3); color:#141416;
}
html[data-theme="light-mode"] .homepage-flying-grid__card-inner{
  background:rgba(0,0,0,.03); border-color:rgba(0,0,0,.10); box-shadow:0 14px 34px rgba(20,30,50,.16);
}
html[data-theme="light-mode"] .homepage-flying-grid__title{
  color:#141416; text-shadow:0 1px 5px rgba(255,255,255,.65);
}
html[data-theme="light-mode"] .homepage-flying-grid__caption{
  color:#3a3f49; text-shadow:0 1px 5px rgba(255,255,255,.65);
}

/* Eyebrows are a red brand accent in both themes (a legacy `body p` rule greys
   them in light mode). */
html[data-theme="light-mode"] .sudo-eyebrow{
  color:var(--sudo-red2);
}

/* --- g. Alternating bands in light mode ----
   In dark mode the alternate sections are black with light text (sudo-sections.css).
   In light mode that's too heavy, so make them a soft grey (slightly darker than
   the white page) and reset the colour tokens back to their light-mode values so
   the text stays dark. */
html[data-theme="light-mode"] .sudo-challenge,
html[data-theme="light-mode"] .sudo-contact,
html[data-theme="light-mode"] .sudo-events,
html[data-theme="light-mode"] .sudo-payoff{
  background:#ECECEF;
  --sudo-white:#141416;
  --sudo-grey:#616670;
  --sudo-greyl:#3A3A40;
  --sudo-mut:#6E6E76;
  --sudo-panel:#F5F4FA;
  --sudo-panel2:#EEEDF4;
  --sudo-line:#E3E3E3;
  --sudo-black:#FFFFFF;
}

/* --- h. Legacy-component gaps found during the audit --------- */
/* (added below as targeted html[data-theme="light-mode"] rules) */