:root {
    /* Base HSL values for theming */
    --base-hue: 200; /* Light blue base */
    --base-saturation: 80%;
    --base-lightness: 50%;

    /* Derived colors using CSS calculations */
    --primary-color: hsl(var(--base-hue), var(--base-saturation), var(--base-lightness));
    --primary-light: hsl(var(--base-hue), var(--base-saturation), calc(var(--base-lightness) + 20%));
    --primary-dark: hsl(var(--base-hue), var(--base-saturation), calc(var(--base-lightness) - 20%));
    --primary-darker: hsl(var(--base-hue), var(--base-saturation), calc(var(--base-lightness) - 30%));

    --text-color: hsl(calc(var(--base-hue) + 180), 10%, 15%); /* Contrasting text */
    --text-color-light: hsl(calc(var(--base-hue) + 180), 5%, 90%); /* Light text for dark backgrounds */

    --background-color: hsl(var(--base-hue), 10%, 95%);
    --background-dark: hsl(var(--base-hue), 15%, 85%);
    --background-darker: hsl(var(--base-hue), 20%, 75%);

    --border-color: var(--primary-dark);
    --shadow-color: hsla(var(--base-hue), var(--base-saturation), calc(var(--base-lightness) - 30%), 0.3);

    /* Spacing and border radius */
    --spacing-unit: 8px;
    --border-radius: 5px;

    /* NEW: Default Success/Error Colors (can be overridden by themes) */
    --success-bg: hsl(120, 60%, 90%); /* Light green */
    --success-text: hsl(120, 80%, 30%); /* Dark green */
    --error-bg: hsl(0, 80%, 90%); /* Light red */
    --error-text: hsl(0, 80%, 40%); /* Dark red */
}

/* Default Theme (Optional, but good for clarity if you override :root defaults) */
/* css/themes.css */

/* Default Theme */
html.default { /* Changed from .default-theme */
    --base-hue: 200; /* Light blue base */
    --base-saturation: 80%;
    --base-lightness: 50%;
}

/* Tropical Sunset Theme */
html.tropical { /* Changed from .tropical-theme */
    --base-hue: 30; /* Orange/Yellow for sunset */
    --base-saturation: 90%;
    --base-lightness: 55%;

    --primary-color: hsl(var(--base-hue), var(--base-saturation), var(--base-lightness));
    --primary-light: hsl(calc(var(--base-hue) + 10), 80%, 65%);
    --primary-dark: hsl(calc(var(--base-hue) - 10), 95%, 45%);
    --primary-darker: hsl(calc(var(--base-hue) - 20), 100%, 35%);

    --text-color: hsl(calc(var(--base-hue) + 180), 30%, 10%);
    --text-color-light: hsl(calc(var(--base-hue) + 180), 10%, 95%);

    --background-color: hsl(calc(var(--base-hue) + 20), 40%, 98%);
    --background-dark: hsl(calc(var(--base-hue) + 10), 50%, 90%);
    --background-darker: hsl(var(--base-hue), 60%, 80%);

    --border-color: var(--primary-darker);
    --shadow-color: hsla(var(--base-hue), var(--base-saturation), calc(var(--base-lightness) - 30%), 0.4);

    /* NEW: Default Success/Error Colors (can be overridden by themes) */
    --success-bg: hsl(120, 60%, 90%); /* Light green */
    --success-text: hsl(120, 80%, 30%); /* Dark green */
    --error-bg: hsl(0, 80%, 90%); /* Light red */
    --error-text: hsl(0, 80%, 40%); /* Dark red */
}

/* Clashing Colors Theme */
html.clashing { /* Changed from .clashing-theme */
    --base-hue: 100; /* A vibrant, almost neon green */
    --base-saturation: 80%;
    --base-lightness: 50%;

    /* Primary and its shades - Green family */
    --primary-color: hsl(var(--base-hue), var(--base-saturation), var(--base-lightness)); /* Vibrant Green */
    --primary-light: hsl(var(--base-hue), calc(var(--base-saturation) - 10%), calc(var(--base-lightness) + 15%)); /* Lighter Green */
    --primary-dark: hsl(var(--base-hue), calc(var(--base-saturation) + 10%), calc(var(--base-lightness) - 15%)); /* Darker Green */
    --primary-darker: hsl(var(--base-hue), calc(var(--base-saturation) + 15%), calc(var(--base-lightness) - 25%)); /* Deep Green */

    /* Text colors - Contrasting Purple & Yellow */
    --text-color: hsl(280, 70%, 30%); /* Deep Purple/Magenta for main text */
    --text-color-light: hsl(50, 90%, 70%); /* Bright Yellow for text on dark backgrounds (like banner) */

    /* Backgrounds - Slightly warm, light grey */
    --background-color: hsl(20, 30%, 95%); /* Very light peach/grey */
    --background-dark: hsl(20, 25%, 85%);
    --background-darker: hsl(20, 20%, 75%);

    --border-color: var(--primary-darker);
    --shadow-color: hsla(var(--base-hue), var(--base-saturation), calc(var(--base-lightness) - 30%), 0.4);

    /* NEW: Default Success/Error Colors (can be overridden by themes) */
    --success-bg: hsl(120, 60%, 90%); /* Light green */
    --success-text: hsl(120, 80%, 30%); /* Dark green */
    --error-bg: hsl(0, 80%, 90%); /* Light red */
    --error-text: hsl(0, 80%, 40%); /* Dark red */
}

/* Dark Mode Theme */
html.dark { /* Changed from .dark-theme */
    --base-hue: 220; /* A cool blue/purple hue for a dark theme accent */
    --base-saturation: 70%;
    --base-lightness: 60%;

    /* Primary colors will be brighter accents */
    --primary-color: hsl(var(--base-hue), var(--base-saturation), var(--base-lightness)); /* A comfortable blue */
    --primary-light: hsl(var(--base-hue), calc(var(--base-saturation) - 10%), calc(var(--base-lightness) + 10%)); /* Lighter accent */
    --primary-dark: hsl(var(--base-hue), calc(var(--base-saturation) + 10%), calc(var(--base-lightness) - 10%)); /* Deeper accent */
    --primary-darker: hsl(var(--base-hue), calc(var(--base-saturation) + 15%), calc(var(--base-lightness) - 20%)); /* Very deep accent */

    /* Backgrounds will be dark */
    --background-color: hsl(210, 15%, 15%); /* Very dark desaturated blue-grey */
    --background-dark: hsl(210, 15%, 20%); /* Slightly lighter dark background */
    --background-darker: hsl(210, 15%, 25%); /* Even lighter dark background */

    /* Text colors will be light */
    --text-color: hsl(210, 10%, 85%); /* Light grey text */
    --text-color-light: hsl(210, 10%, 95%); /* Brighter white for highlights */

    --border-color: hsl(210, 15%, 30%); /* Slightly lighter border on dark */
    --shadow-color: hsla(210, 15%, 5%, 0.5); /* Darker, subtle shadow */

    /* NEW: Dark Mode Specific Success/Error Colors */
    --success-bg: hsl(120, 50%, 25%); /* Darker green */
    --success-text: hsl(120, 70%, 75%); /* Lighter green */
    --error-bg: hsl(0, 50%, 25%); /* Darker red */
    --error-text: hsl(0, 70%, 75%); /* Lighter red */
}