/* ─────────────────────────────────────────────────────────────────────────────
   LIGHT THEME — Always Auto dashboards.

   Overrides the CSS custom properties every page already uses, so no page markup
   changes. Two naming schemes exist: most pages use --black/--card/--border/…,
   recon.html uses --bg/--panel/--line/…. Both are redefined here.

   Not an inversion. The bright semantic colours (gold #F5A623, green #27AE60)
   are illegible as text on white — gold reads about 1.9:1, well under the 4.5:1
   needed for body text — so each is darkened for text while the bright original
   is kept for fills and badges where it sits on a tinted chip, not on paper.

   Ground is a warm off-white rather than pure #FFF; cards are white so they lift
   off the page instead of dissolving into it. The brand red is unchanged.
   ───────────────────────────────────────────────────────────────────────────── */

:root[data-theme="light"] {
  /* ── scheme A: cockpit / deals / checkout / index / alegra ── */
  --black:  #F2EFEA;      /* page ground — warm, not paper-white */
  --dark:   #FFFFFF;      /* header + rails */
  --card:   #FFFFFF;
  --card2:  #FAF8F5;
  --border: #E3DED6;
  --border2:#CFC8BE;
  --white:  #16181C;      /* was the text colour; still the text colour */
  --muted:  #6B6862;
  --muted2: #8A867F;

  --accent: #D3341C;      /* brand red, a shade deeper so it holds up on white */
  --gold:   #A86C05;      /* text-safe gold */
  --green:  #157F45;
  --blue:   #1F6FD0;
  --red:    #C4291A;

  /* ── scheme B: recon.html ── */
  --bg:     #F2EFEA;
  --panel:  #FFFFFF;
  --panel2: #FAF8F5;
  --line:   #E3DED6;
  --line2:  #CFC8BE;
  --txt:    #16181C;
  --dim:    #6B6862;
  --dim2:   #8A867F;

  color-scheme: light;
}

/* Surfaces that were hardcoded as white-on-dark washes and go invisible on paper. */
:root[data-theme="light"] .section-header,
:root[data-theme="light"] .ch,
:root[data-theme="light"] thead th        { background: #FAF8F5 !important; }
:root[data-theme="light"] .metric-row:hover,
:root[data-theme="light"] .check-row:hover,
:root[data-theme="light"] tbody tr:hover  { background: rgba(0,0,0,0.028) !important; }

/* Inputs read as sunken on dark; on light they need a visible edge instead. */
:root[data-theme="light"] input,
:root[data-theme="light"] select,
:root[data-theme="light"] textarea {
  background: #FFFFFF !important;
  color: #16181C !important;
  border-color: #D3CEC6 !important;
}
:root[data-theme="light"] input::placeholder,
:root[data-theme="light"] textarea::placeholder { color: #9A958D !important; }

/* Depth came from contrast against black; on white it has to come from shadow. */
:root[data-theme="light"] .section,
:root[data-theme="light"] .card,
:root[data-theme="light"] .onx,
:root[data-theme="light"] .flg {
  box-shadow: 0 1px 2px rgba(20,18,15,0.05), 0 1px 8px rgba(20,18,15,0.04);
}

/* The logo is a white-on-dark PNG — it vanishes on a light ground. */
:root[data-theme="light"] img[src*="logo-white"] {
  filter: invert(1) hue-rotate(180deg) saturate(1.6) contrast(1.05);
}

/* Toggle button, injected by theme.js */
.thm-btn{
  background:var(--gold);border:2px solid var(--gold);color:#1a1400;
  font:800 14px/1 'Barlow',-apple-system,system-ui,sans-serif;letter-spacing:.04em;
  text-transform:uppercase;padding:11px 18px;border-radius:999px;cursor:pointer;white-space:nowrap;
  box-shadow:0 2px 14px rgba(245,166,35,.55);
}
.thm-btn:hover{ filter:brightness(1.09); box-shadow:0 3px 20px rgba(245,166,35,.8); }

/* home-button.js paints its pill from --dark; on light that is white, which needs an edge. */
:root[data-theme="light"] #home-btn, :root[data-theme="light"] .home-btn {
  border: 1px solid #CFC8BE !important;
}