:root {
    color-scheme: light;
    /* Primary / Secondary colors - Mustard Yellow Theme */
    --primary-color-hsl: 39, 77%, 57%;
    --primary-color: hsl(var(--primary-color-hsl));
    --primary-light: #fffdf3;
    --primary-dark: hsl(39, 77%, 38%);
    
    --secondary-color-hsl: 39, 77%, 57%;
    --secondary-color: hsl(var(--secondary-color-hsl));
    
    /* Background & Surfaces (Light Theme - White background) */
    --bg-color: #ffffff;
    --surface-color: #ffffff;
    --surface-hover: rgba(0, 0, 0, 0.05);
    --border-color: rgba(0, 0, 0, 0.15);
    
    /* Text Color (Light Theme - Black text) */
    --text-main: #000000;
    --text-muted: rgba(0, 0, 0, 0.65);
    --text-light: rgba(0, 0, 0, 0.45);
    --text-on-primary: #000000;
    
    /* System Colors strictly mapped to White/Black/Mustard Yellow */
    --success: var(--primary-color);
    --warning: var(--primary-color);
    --danger: #000000;
    --star-color: var(--primary-color);
    
    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -1px rgba(0,0,0,0.03);
    --shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
    --shadow-hover: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    
    /* Card design tokens */
    --card-bg: var(--surface-color);
    --card-shadow: var(--shadow-md);
    --card-border: 1px solid var(--border-color);
    
    /* Layout */
    --header-height: 85px;
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 30px;
    --radius-round: 9999px;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Backdrop details */
    --backdrop-blur: blur(12px);
    --modal-overlay-bg: rgba(0, 0, 0, 0.6);
    
    /* Legacy Variable Mappings for Compatibility */
    --white: var(--surface-color);
    --black: var(--text-main);
    --text-color: var(--text-muted);
    --light-text: var(--text-light);
    --background: var(--bg-color);
    --border: var(--border-color);
    --hover: var(--surface-hover);
    --shadow: var(--shadow-md);
    --font-family: 'Poppins', sans-serif;
}

.dark-theme {
    color-scheme: dark;
    /* Background & Surfaces (Dark Theme - Black background) */
    --bg-color: #000000;
    --surface-color: #000000;
    --surface-hover: rgba(255, 255, 255, 0.1);
    --border-color: rgba(255, 255, 255, 0.2);
    
    /* Text Color (Dark Theme - White text) */
    --text-main: #ffffff;
    --text-muted: rgba(255, 255, 255, 0.7);
    --text-light: rgba(255, 255, 255, 0.5);
    
    /* Shadows (Dark Theme) */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.4);
    --shadow-lg: 0 10px 25px -5px rgba(0,0,0,0.5);
    --shadow-hover: 0 20px 25px -5px rgba(0,0,0,0.6);
    
    --primary-light: rgba(229, 169, 59, 0.15);
    --primary-dark: hsl(39, 77%, 38%);
    
    /* Backdrop details */
    --modal-overlay-bg: rgba(0, 0, 0, 0.8);

    /* Redefine mappings in dark theme context for correct dynamic evaluation */
    --white: var(--surface-color);
    --black: var(--text-main);
    --text-color: var(--text-muted);
    --light-text: var(--text-light);
    --background: var(--bg-color);
    --border: var(--border-color);
    --hover: var(--surface-hover);
    --shadow: var(--shadow-md);
}