/* =============================================================
   Scaling By AI — light body theme
   Host at: scalingby.ai/light-body.css
   Load LAST in <head> (after Tailwind and /css/style.css).

   The nav, the hero <header> and the <footer> stay dark exactly
   as they are. Everything in between — every top-level <section>,
   plus a <main> that follows the hero <header> — is light.

   The Tailwind Play CDN injects its own <style> into <head> at
   runtime, after this file, so every rule here is scoped under
   the light-zone selector below to win on specificity rather
   than source order.

   Light zone:  :is(body > section, header ~ main)
   ============================================================= */

:root{
  --light-bg-alt:#f6f7fb;
  --light-bg:#ffffff;
  --light-text:#0f1222;
  --light-text-2:#4a5068;
  --light-cyan:#0891b2;      /* small cyan text on white (contrast) */
  --light-cyan-hover:#0e7490;
  --light-purple:var(--brand-secondary,#7000ff);
  --light-green:#059669;
  --light-amber:#b45309;
  --light-border:#e6e8f0;
  --light-line:rgba(15,18,34,.10);
  --light-line-soft:rgba(15,18,34,.06);
  --light-card-shadow:0 1px 2px rgba(15,18,34,.04),0 8px 24px rgba(15,18,34,.06);
}

/* ---------- Section backgrounds: alternate #f6f7fb / #ffffff ---------- */
body > section{color:var(--light-text);}
body > section:nth-of-type(odd){background-color:var(--light-bg-alt);}
body > section:nth-of-type(even){background-color:var(--light-bg);}

/* A <main> that sits between the hero <header> and the footer
   (application forms, thank-you pages, legal pages). Many are
   max-width containers, so the background is bled full-width. */
header ~ main{
  color:var(--light-text);
  background-color:var(--light-bg-alt);
  box-shadow:0 0 0 100vmax var(--light-bg-alt);
  clip-path:inset(0 -100vmax);
}

/* ---------- Text ---------- */
:is(body > section, header ~ main) :is(.text-white, .text-gray-100, .text-gray-200){
  color:var(--light-text);
}
:is(body > section, header ~ main) :is(
  .text-gray-300, .text-gray-400, .text-gray-500, .text-gray-600,
  .text-white-300, .text-white-400, .text-white-500, .text-white-600,
  .text-white\/50, .text-white\/60, .text-white\/70, .text-white\/80
){
  color:var(--light-text-2);
}
:is(body > section, header ~ main) :is(.text-cyan-300, .text-cyan-400, .text-cyan-500, .text-\[\#00f2ff\]){
  color:var(--light-cyan);
}
:is(body > section, header ~ main) .hover\:text-cyan-300:hover{color:var(--light-cyan-hover);}
:is(body > section, header ~ main) :is(.text-purple-400, .text-purple-500){color:var(--light-purple);}
:is(body > section, header ~ main) :is(.text-emerald-400, .text-emerald-500){color:var(--light-green);}
:is(body > section, header ~ main) :is(.text-red-400, .text-\[\#ff8a93\]){color:var(--loss-red,#ff4d5e);}

/* ---------- Hairlines, tints, dividers ---------- */
:is(body > section, header ~ main).border-white\/5,
:is(body > section, header ~ main) .border-white\/5{border-color:var(--light-line-soft);}
:is(body > section, header ~ main) .border-white\/10{border-color:var(--light-line);}
:is(body > section, header ~ main) .bg-white\/5{background-color:rgba(15,18,34,.04);}
:is(body > section, header ~ main) .bg-white\/\[0\.02\]{background-color:rgba(15,18,34,.025);}
:is(body > section, header ~ main) :is(.bg-black\/30, .bg-black\/40){background-color:var(--light-bg-alt);}
:is(body > section, header ~ main) :is(.hover\:bg-white\/5:hover, .btn-secondary:hover){background-color:rgba(15,18,34,.05);}
:is(body > section, header ~ main) .to-purple-900\/10{--tw-gradient-to:rgba(112,0,255,.05) var(--tw-gradient-to-position);}

/* ---------- Cards: dark -> white with soft border + shadow ---------- */
:is(body > section, header ~ main) :is(
  .glass-card, .ledger, .score-card, .cal-card,
  .bg-\[\#16161a\], .bg-\[\#0a0a0c\], .bg-\[\#0d0d10\]
){
  background:var(--light-bg);
  color:var(--light-text);
  box-shadow:var(--light-card-shadow);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
/* Plain cards: soft border all round */
:is(body > section, header ~ main) :is(
  .glass-card, .score-card, .cal-card,
  .bg-\[\#16161a\], .bg-\[\#0a0a0c\], .bg-\[\#0d0d10\]
):not(.border-l-4){
  border:1px solid var(--light-border);
}
/* Accent cards (border-l-4 border-cyan-500 etc.): keep the coloured
   left edge, soften the other three sides */
:is(body > section, header ~ main) :is(
  .glass-card, .score-card, .cal-card,
  .bg-\[\#16161a\], .bg-\[\#0a0a0c\], .bg-\[\#0d0d10\]
).border-l-4{
  border-style:solid;
  border-top-width:1px;border-right-width:1px;border-bottom-width:1px;
  border-top-color:var(--light-border);
  border-right-color:var(--light-border);
  border-bottom-color:var(--light-border);
}
:is(body > section, header ~ main) .glass-card.border-l-4.border-white\/10{border-left-color:var(--light-border);}

/* Ledger keeps its faint "loss" tint on the border */
:is(body > section, header ~ main) .ledger{border:1px solid rgba(255,77,94,.25);}
:is(body > section, header ~ main) .ledger-row{border-bottom-color:var(--light-line);}

/* Score card internals */
:is(body > section, header ~ main) .score-card :is(.score-top, .score-note){border-color:var(--light-line);}
:is(body > section, header ~ main) .score-card .metric{color:var(--light-text-2);border-bottom-color:var(--light-line-soft);}
:is(body > section, header ~ main) .score-card :is(.score-max, .score-note){color:var(--light-text-2);}
:is(body > section, header ~ main) .score-num.is-good,
:is(body > section, header ~ main) .tag.good{color:var(--light-green);}
:is(body > section, header ~ main) .score-num.is-mid,
:is(body > section, header ~ main) .tag.mid{color:var(--light-amber);}

/* ---------- Forms ---------- */
:is(body > section, header ~ main) .form-input,
:is(body > section, header ~ main) select.form-input{
  background:var(--light-bg);
  border-color:rgba(15,18,34,.15);
  color:var(--light-text);
}
:is(body > section, header ~ main) .form-input::placeholder{color:#8a90a6;}
:is(body > section, header ~ main) select.form-input option{background:var(--light-bg);color:var(--light-text);}

/* ---------- Gradient buttons + gradient badges keep white text ---------- */
:is(body > section, header ~ main) .btn-primary,
:is(body > section, header ~ main) .btn-primary[class],
:is(body > section, header ~ main) [class*="bg-gradient-to-"][class*="from-[#00f2ff]"]{
  color:#fff;
}