/* === BASE LIGHT MODE === */
body {
    background: #ffffff;
    color: #000000;
    font-family: 'Segoe UI', sans-serif;
    margin: 0;
}

nav {
    background: #e8fbe5;
    border-bottom: 2px solid #7fdb6a;
    padding: 10px 20px;
}

nav a {
    color: #004400;
    text-decoration: none;
    margin-right: 16px;
}

nav a:hover {
    text-decoration: underline;
}

/* === DARK MODE === */
body.dark-mode {
    background: #0b1a0f;           /* Deep greenish black */
    color: #cdeac0;                /* Soft mint text */
}

body.dark-mode nav {
    background: #133e1e;
    border-bottom: 2px solid #7fdb6a;
}

body.dark-mode nav a {
    color: #8bf599;
}

body.dark-mode nav a:hover {
    color: #b7ffcc;
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3 {
    color: #a7ffb5;
}

body.dark-mode .content-box,
body.dark-mode .product-card,
body.dark-mode .cart-box,
body.dark-mode .login-container,
body.dark-mode .welcome-msg {
    background-color: #122a18;
    border: 1px solid #356f4f;
    box-shadow: 0 0 10px rgba(139, 245, 153, 0.15);
    padding: 1.5em;
    border-radius: 12px;
    color: #e2ffe2;
}

body.dark-mode footer {
    background: #112c1c;
    color: #85d993;
    border-top: 1px solid #1c4c30;
    padding: 1em;
    text-align: center;
}

footer {
    background: #f8f8f8;
    color: #444;
    border-top: 1px solid #ddd;
    padding: 1em;
    text-align: center;
}