:root {
    --bg: #fff;
    --bg-panel: #fff;
    --color-headings: #161c2d;
    --color-text-opacity: rgba(22, 28, 45, 0.7);
    --color-text: #161c2d;
    --color-text-base: #161c2d;
    --border: #383f53;
    
}

[data-theme="light"] .hero-bg {
    background-image: url("/assets/week 8 image assets/hero-pattern.webp");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

[data-theme="dark"] {
    --bg: #171a23;
    --bg-panel: #f1f1f1;
    --color-headings: #fff;
    --color-text-opacity: rgba(255, 255, 255, 0.7);
    --color-text: #fff;
    --color-text-base: #161c2d;
    --border: #ced4da;
    
}