/* Logeco Labs — LIGHT theme overrides.
   Loaded only when ?theme=light. Scoped under body.theme-light so the dark
   theme stays the default. The <footer> is left dark on purpose (dark footer
   on a light site). Brand teal #006767 replaces the bright accent for text on
   light surfaces; bright accent (#14b8a6) is kept for filled buttons. */

body.theme-light {
    background: #f4faf9;
    color: rgba(6, 40, 36, 0.9);
    --line: rgba(0, 103, 103, 0.08);
    --glow: #0d9488;
}

/* ---- Hero ---- */
.theme-light .hero {
    background:
        radial-gradient(ellipse 90% 60% at 50% -10%, rgba(0, 103, 103, 0.10), transparent 60%),
        linear-gradient(180deg, #eef7f5 0%, #f4faf9 70%);
}
.theme-light .hero-scan {
    background-image:
        linear-gradient(to right, rgba(0, 103, 103, 0.22) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 103, 103, 0.22) 1px, transparent 1px);
}

/* gradient headline word — darker teal for light backgrounds */
.theme-light .lab-gradient-text {
    background-image: linear-gradient(100deg, #0d9488 0%, #006767 50%, #14b8a6 100%);
}

/* ---- Cards ---- */
.theme-light .lab-card {
    background: #ffffff;
    border-color: rgba(0, 103, 103, 0.14);
}
.theme-light .lab-card:hover {
    background: #f0faf7;
    border-color: rgba(0, 103, 103, 0.40);
}

/* ---- Terminal (light code card) ---- */
.theme-light .lab-terminal {
    background: linear-gradient(180deg, #ffffff, #f3faf8);
    border-color: rgba(0, 103, 103, 0.18);
    box-shadow: 0 20px 40px -28px rgba(0, 40, 40, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.theme-light .lab-terminal:hover {
    border-color: rgba(0, 103, 103, 0.40);
    box-shadow: 0 30px 50px -28px rgba(0, 40, 40, 0.35);
}
.theme-light .lab-terminal-bar { border-bottom-color: rgba(0, 103, 103, 0.12); }

/* ---- Navbar (sits outside <main>) ---- */
.theme-light #navbar.scrolled {
    background-color: rgba(244, 250, 249, 0.82);
    box-shadow: 0 1px 0 rgba(0, 103, 103, 0.10), 0 10px 30px -16px rgba(0, 40, 40, 0.22);
}
.theme-light #navbar img { filter: brightness(0); }                 /* dark logo on light */
.theme-light #navbar .text-white\/70 { color: rgba(6, 40, 36, 0.70); }
.theme-light #navbar .text-white\/80 { color: rgba(6, 40, 36, 0.80); }
.theme-light #navbar .text-white { color: #04201d; }
.theme-light #navbar .text-accent-300 { color: #006767; }
.theme-light #navbar .border-white\/15 { border-color: rgba(0, 103, 103, 0.22); }
.theme-light #navbar .border-accent\/40 { border-color: rgba(0, 103, 103, 0.40); }

.theme-light #mobileMenu {
    background-color: rgba(255, 255, 255, 0.97);
    border-top-color: rgba(0, 103, 103, 0.12);
}
.theme-light #mobileMenu .text-white\/80 { color: rgba(6, 40, 36, 0.80); }
.theme-light #mobileMenu .text-accent-300 { color: #006767; }
.theme-light #mobileMenu .border-white\/15 { border-color: rgba(0, 103, 103, 0.22); }

/* ---- Main content: flip dark utilities to light equivalents ---- */
.theme-light main .text-white       { color: #04201d; }
.theme-light main .text-white\/90   { color: rgba(6, 40, 36, 0.90); }
.theme-light main .text-white\/80   { color: rgba(6, 40, 36, 0.80); }
.theme-light main .text-white\/70   { color: rgba(6, 40, 36, 0.72); }
.theme-light main .text-white\/65   { color: rgba(6, 40, 36, 0.68); }
.theme-light main .text-white\/60   { color: rgba(6, 40, 36, 0.62); }
.theme-light main .text-white\/55   { color: rgba(6, 40, 36, 0.58); }
.theme-light main .text-white\/50   { color: rgba(6, 40, 36, 0.52); }
.theme-light main .text-white\/40   { color: rgba(6, 40, 36, 0.45); }
.theme-light main .text-white\/35   { color: rgba(6, 40, 36, 0.42); }
.theme-light main .text-white\/25   { color: rgba(6, 40, 36, 0.32); }
.theme-light main .text-accent-300  { color: #006767; }
.theme-light main .text-accent      { color: #0d9488; }

/* keep the dark CTA primary button readable (dark bg stays, text stays white) */
.theme-light main .bg-brand-900.text-white { color: #ffffff; }

/* subtle fills + hairlines */
.theme-light main .bg-white\/5      { background-color: rgba(0, 103, 103, 0.05); }
.theme-light main .bg-white\/10     { background-color: rgba(0, 103, 103, 0.08); }
.theme-light main .border-white\/10 { border-color: rgba(0, 103, 103, 0.12); }
.theme-light main .border-white\/15 { border-color: rgba(0, 103, 103, 0.16); }
.theme-light main .border-white\/30 { border-color: rgba(0, 103, 103, 0.25); }
.theme-light main .ring-white\/10   { --tw-ring-color: rgba(0, 103, 103, 0.12); }
.theme-light main .ring-white\/15   { --tw-ring-color: rgba(0, 103, 103, 0.16); }