:root {
    --background-color-light: #f2f2f2;
    --text-color-light: #333;
    --card-background-light: #fff;
    --header-background-light: #fff;
    --footer-background-light: #fff;

    --background-color-dark: #333;
    --text-color-dark: #f2f2f2;
    --card-background-dark: #444;
    --header-background-dark: #222;
    --footer-background-dark: #222;
}

body {
    font-family: sans-serif;
    margin: 0;
    background-color: var(--background-color-light);
    color: var(--text-color-light);
}

body.dark-mode {
    background-color: var(--background-color-dark);
    color: var(--text-color-dark);
}

header, footer {
    padding: 20px;
    text-align: center;
}

header {
    background-color: var(--header-background-light);
    border-bottom: 1px solid #ccc;
}

body.dark-mode header {
    background-color: var(--header-background-dark);
    border-bottom: 1px solid #555;
}

footer {
    background-color: var(--footer-background-light);
    border-top: 1px solid #ccc;
}

body.dark-mode footer {
    background-color: var(--footer-background-dark);
    border-top: 1px solid #555;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    padding: 20px;
}

.product-card {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 20px;
    background-color: var(--card-background-light);
}

body.dark-mode .product-card {
    border: 1px solid #555;
    background-color: var(--card-background-dark);
}