/*
  Mangezi.xyz light-mode polish
  Upload this file beside index.html and styles.css, then link it AFTER styles.css:

  <link rel="stylesheet" href="light-mode-polish.css" />

  It targets common theme patterns:
  html[data-theme="light"], body[data-theme="light"], body.light, .light, and :root.light
*/

/* ---------- LIGHT THEME TOKENS ---------- */
html[data-theme="light"],
body[data-theme="light"],
body.light,
.light,
:root.light {
  --bg: #f7f4ee;
  --panel: #ffffff;
  --panel-2: #f1ede5;
  --text: #12151c;
  --muted: #526070;
  --line: rgba(20, 25, 35, .14);
  --accent: #087f73;
  --accent-2: #1f5fae;
  --accent-3: #335c7a;
  --success: #087f73;
  --amber: #b66a16;
  color-scheme: light;
}

/* ---------- GLOBAL LIGHT BODY ---------- */
html[data-theme="light"] body,
body[data-theme="light"],
body.light {
  background:
    radial-gradient(circle at 18% 12%, rgba(8, 127, 115, .08), transparent 30%),
    radial-gradient(circle at 88% 18%, rgba(31, 95, 174, .07), transparent 34%),
    #f7f4ee !important;
  color: #12151c !important;
}

/* ---------- HEADER: LIGHT MODE SHOULD FEEL SOLID, NOT WASHED ---------- */
html[data-theme="light"] .site-header,
body[data-theme="light"] .site-header,
body.light .site-header,
.light .site-header {
  background: rgba(247, 244, 238, .88) !important;
  border-bottom: 1px solid rgba(20, 25, 35, .13) !important;
  backdrop-filter: blur(18px);
}

html[data-theme="light"] .brand-name,
body[data-theme="light"] .brand-name,
body.light .brand-name,
.light .brand-name {
  color: #d8b45a !important;
  text-shadow: none !important;
}

html[data-theme="light"] .nav-links a,
body[data-theme="light"] .nav-links a,
body.light .nav-links a,
.light .nav-links a {
  color: #526070 !important;
}

html[data-theme="light"] .nav-links a:hover,
body[data-theme="light"] .nav-links a:hover,
body.light .nav-links a:hover,
.light .nav-links a:hover {
  color: #12151c !important;
}

/* ---------- HERO: FIX THE WASHED-OUT GALACTIC IMAGE ---------- */
html[data-theme="light"] .hero,
body[data-theme="light"] .hero,
body.light .hero,
.light .hero {
  background: #f7f4ee !important;
}

html[data-theme="light"] .hero-bg,
body[data-theme="light"] .hero-bg,
body.light .hero-bg,
.light .hero-bg {
  background:
    linear-gradient(90deg, rgba(247,244,238,.98) 0%, rgba(247,244,238,.84) 34%, rgba(247,244,238,.46) 62%, rgba(247,244,238,.22) 100%),
    radial-gradient(circle at 18% 28%, rgba(8,127,115,.16), transparent 32%),
    radial-gradient(circle at 76% 46%, rgba(31,95,174,.12), transparent 36%),
    #f7f4ee !important;
}

/* If the hero uses an image, keep it visible but make it editorial, not foggy */
html[data-theme="light"] .hero-bg img,
body[data-theme="light"] .hero-bg img,
body.light .hero-bg img,
.light .hero-bg img {
  opacity: .18 !important;
  filter: grayscale(.15) contrast(1.18) saturate(.75) brightness(1.05) !important;
  mix-blend-mode: multiply;
}

/* If the hero uses overlay divs, stop them from bleaching the text */
html[data-theme="light"] .icy-overlay,
body[data-theme="light"] .icy-overlay,
body.light .icy-overlay,
.light .icy-overlay {
  background:
    linear-gradient(90deg, rgba(247,244,238,.96) 0%, rgba(247,244,238,.72) 48%, rgba(247,244,238,.26) 100%) !important;
}

/* ---------- HERO TEXT: FORCE READABILITY ---------- */
html[data-theme="light"] .eyebrow,
body[data-theme="light"] .eyebrow,
body.light .eyebrow,
.light .eyebrow,
html[data-theme="light"] .stitch-eyebrow,
body[data-theme="light"] .stitch-eyebrow,
body.light .stitch-eyebrow,
.light .stitch-eyebrow {
  color: #087f73 !important;
  text-shadow: none !important;
}

html[data-theme="light"] .eyebrow::before,
html[data-theme="light"] .eyebrow::after,
body[data-theme="light"] .eyebrow::before,
body[data-theme="light"] .eyebrow::after,
body.light .eyebrow::before,
body.light .eyebrow::after,
.light .eyebrow::before,
.light .eyebrow::after {
  background: #087f73 !important;
}

html[data-theme="light"] h1,
body[data-theme="light"] h1,
body.light h1,
.light h1,
html[data-theme="light"] .hero h1,
body[data-theme="light"] .hero h1,
body.light .hero h1,
.light .hero h1 {
  color: #12151c !important;
  text-shadow: none !important;
}

html[data-theme="light"] .hero-text,
body[data-theme="light"] .hero-text,
body.light .hero-text,
.light .hero-text {
  color: #263242 !important;
  text-shadow: none !important;
  font-weight: 520;
}

html[data-theme="light"] .hero-meta,
body[data-theme="light"] .hero-meta,
body.light .hero-meta,
.light .hero-meta {
  color: #526070 !important;
  border-top-color: rgba(20,25,35,.16) !important;
}

html[data-theme="light"] .dot,
body[data-theme="light"] .dot,
body.light .dot,
.light .dot {
  background: rgba(20,25,35,.42) !important;
}

html[data-theme="light"] .dot.active,
body[data-theme="light"] .dot.active,
body.light .dot.active,
.light .dot.active {
  background: #087f73 !important;
  box-shadow: 0 0 0 4px rgba(8,127,115,.12) !important;
}

/* ---------- BUTTONS ---------- */
html[data-theme="light"] .button,
html[data-theme="light"] .btn,
body[data-theme="light"] .button,
body[data-theme="light"] .btn,
body.light .button,
body.light .btn,
.light .button,
.light .btn {
  background: #12151c !important;
  color: #fff !important;
  border-color: #12151c !important;
}

html[data-theme="light"] .button.ghost,
html[data-theme="light"] .hero-actions .button,
html[data-theme="light"] .btn-ghost,
html[data-theme="light"] .stitch-secondary,
body[data-theme="light"] .button.ghost,
body[data-theme="light"] .hero-actions .button,
body[data-theme="light"] .btn-ghost,
body[data-theme="light"] .stitch-secondary,
body.light .button.ghost,
body.light .hero-actions .button,
body.light .btn-ghost,
body.light .stitch-secondary,
.light .button.ghost,
.light .hero-actions .button,
.light .btn-ghost,
.light .stitch-secondary {
  background: rgba(255,255,255,.58) !important;
  color: #12151c !important;
  border-color: rgba(20,25,35,.18) !important;
}

/* ---------- STATS / CARDS / SECTIONS ---------- */
html[data-theme="light"] .stat-pill,
html[data-theme="light"] .project-card,
html[data-theme="light"] .lab-card,
html[data-theme="light"] .contact-panel,
html[data-theme="light"] .roadmap-item,
html[data-theme="light"] .deploy-panel,
html[data-theme="light"] .truth-note,
body[data-theme="light"] .stat-pill,
body[data-theme="light"] .project-card,
body[data-theme="light"] .lab-card,
body[data-theme="light"] .contact-panel,
body[data-theme="light"] .roadmap-item,
body[data-theme="light"] .deploy-panel,
body[data-theme="light"] .truth-note,
body.light .stat-pill,
body.light .project-card,
body.light .lab-card,
body.light .contact-panel,
body.light .roadmap-item,
body.light .deploy-panel,
body.light .truth-note,
.light .stat-pill,
.light .project-card,
.light .lab-card,
.light .contact-panel,
.light .roadmap-item,
.light .deploy-panel,
.light .truth-note {
  background: rgba(255,255,255,.78) !important;
  border-color: rgba(20,25,35,.12) !important;
  color: #12151c !important;
  box-shadow: 0 22px 60px -42px rgba(18,21,28,.45);
}

html[data-theme="light"] .section-sub,
html[data-theme="light"] .desc,
html[data-theme="light"] .small-note,
html[data-theme="light"] .footer,
body[data-theme="light"] .section-sub,
body[data-theme="light"] .desc,
body[data-theme="light"] .small-note,
body[data-theme="light"] .footer,
body.light .section-sub,
body.light .desc,
body.light .small-note,
body.light .footer,
.light .section-sub,
.light .desc,
.light .small-note,
.light .footer {
  color: #526070 !important;
}

html[data-theme="light"] .tag,
html[data-theme="light"] .pill,
body[data-theme="light"] .tag,
body[data-theme="light"] .pill,
body.light .tag,
body.light .pill,
.light .tag,
.light .pill {
  background: #edf3f1 !important;
  color: #34505c !important;
  border-color: rgba(20,25,35,.10) !important;
}

/* ---------- MOBILE ---------- */
@media (max-width: 860px) {
  html[data-theme="light"] .nav-links,
  body[data-theme="light"] .nav-links,
  body.light .nav-links,
  .light .nav-links {
    background: rgba(247,244,238,.96) !important;
    border-color: rgba(20,25,35,.14) !important;
  }

  html[data-theme="light"] .hero-bg,
  body[data-theme="light"] .hero-bg,
  body.light .hero-bg,
  .light .hero-bg {
    background:
      linear-gradient(180deg, rgba(247,244,238,.98) 0%, rgba(247,244,238,.88) 56%, rgba(247,244,238,.76) 100%),
      radial-gradient(circle at 20% 10%, rgba(8,127,115,.12), transparent 34%),
      #f7f4ee !important;
  }
}

/* ---------- FOOTER LINK HOVER: stay readable in light, don't fade to white ---------- */
html[data-theme="light"] .footer a:hover,
body[data-theme="light"] .footer a:hover,
body.light .footer a:hover,
.light .footer a:hover {
  color: #12151c !important;
}

/* ---------- STATUS BADGE: restore a visible pill in light mode ---------- */
html[data-theme="light"] .status,
body[data-theme="light"] .status,
body.light .status,
.light .status {
  background: #edf3f1 !important;
  border: 1px solid rgba(20, 25, 35, .10);
}