:root {
    /* PRIMARY PALETTE */
    --color-primary: #158729; /* Deep Green */
    --color-dark-green: #27170c; /* Earthy Dark */
    --color-accent: #0089c7; /* Blue Accent */
    --color-brown: #462a16; /* Warm Brown */
    --color-secondary: #255d74; /* Muted Blue */
    --white-background: #FFFFFF;
    /* LIGHT THEME */
    --bg-main: #ffffff;
    --bg-soft: #f8fafc;
    --bg-glass: rgba(255, 255, 255, 0.7);
    --text-main: #111827;
    --text-muted: #6b7280;
    --border-color: rgba(0, 0, 0, 0.06);
    /* EFFECTS */
    --shadow-soft: 0 10px 30px rgba(0,0,0,0.06);
    --shadow-strong: 0 20px 60px rgba(0,0,0,0.12);
}

.dark {
    --bg-main: #0b0f0c;
    --bg-soft: #111827;
    --bg-glass: rgba(17, 24, 39, 0.7);
    --text-main: #e5e7eb;
    --text-muted: #9ca3af;
    --border-color: rgba(255, 255, 255, 0.08);
    /* Adjust brand colors slightly for dark mode */
    --color-primary: #1db954; /* Slightly brighter green */
    --color-accent: #38bdf8; /* Softer blue glow */
    --color-secondary: #4f9fbf;
    --shadow-soft: 0 10px 30px rgba(0,0,0,0.4);
    --shadow-strong: 0 20px 60px rgba(0,0,0,0.6);
}

body {
    background: var(--bg-main);
    color: var(--text-main);
    transition: background 0.3s ease, color 0.3s ease;
    font-family: 'Poppins', sans-serif;
}

.bg-main {
    background: var(--bg-main);
}

.bg-soft {
    background: var(--bg-soft);
}

.text-main {
    color: var(--text-main);
}

.text-muted {
    color: var(--text-muted);
}

.border-soft {
    border-color: var(--border-color);
}

.glass {
    background: var(--bg-glass);
    backdrop-filter: blur(14px);
    border: 1px solid var(--border-color);
}

.shadow-soft {
    box-shadow: var(--shadow-soft);
}

.shadow-strong {
    box-shadow: var(--shadow-strong);
}

.gradient-primary {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary) );
}

.gradient-accent {
    background: linear-gradient(135deg, var(--color-accent), var(--color-secondary) );
}


/*Theme toggle*/
.dark #sunIcon {
    opacity: 0;
    transform: rotate(90deg) scale(0.5);
}

.dark #moonIcon {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

#sunIcon {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

#moonIcon {
    opacity: 0;
    transform: rotate(-90deg) scale(0.5);
}

#sunIcon, #moonIcon {
    transition: all 0.5s ease;
}