/* =====================================================
   COOLTECH PUBLIC THEME
   LIGHT / DARK MODE
===================================================== */


/* ================= LIGHT MODE ================= */

:root {

    --primary: #087fe5;

    --bg: #ffffff;

    --section-alt: #f4f8fb;

    --card: #ffffff;

    --header-bg: #ffffff;

    --footer-bg: #032238;

    --text: #10283d;

    --muted: #687988;

    --border: #e3ebf1;

}


/* ================= DARK MODE ================= */

body.dark-mode {

    --primary: #19a8ff;

    --bg: #07141f;

    --section-alt: #0a1b29;

    --card: #0d2232;

    --header-bg: #07141f;

    --footer-bg: #030d15;

    --text: #f1f7fb;

    --muted: #9db0bd;

    --border: #1d3547;

}


/* DARK MODE HEADER */

body.dark-mode .header {
    box-shadow: 0 4px 20px rgba(0,0,0,.25);
}


/* DARK MODE CARDS */

body.dark-mode .service-card,
body.dark-mode .testimonial,
body.dark-mode .experience-badge {
    box-shadow: none;
}


/* DARK MODE HOVER */

body.dark-mode .service-card:hover {
    box-shadow: 0 18px 40px rgba(0,0,0,.35);
}


/* DARK MODE THEME BUTTON */

body.dark-mode .theme-toggle i::before {
    content: "\f185";
}


/* Keep icon hidden when replaced */

body.dark-mode .theme-toggle i {
    font-size: 0;
}

body.dark-mode .theme-toggle i::before {
    font-size: 15px;
}


/* ================= TRANSITIONS ================= */

body,
.header,
.mobile-nav,
.trust-bar,
.service-card,
.testimonial,
.experience-badge,
.theme-toggle {
    transition:
        background-color .3s ease,
        color .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}