/* css/theme-dark.css - CORRECTED STRUCTURE */

/* Apply dark theme variables when data-theme="dark" is present on the html tag */
:root[data-theme="dark"] {
    /* Page and Surface Colors */
    --clr-paper: #121212;
    --clr-surface: #1B1D2B; 

    /* Text and Ink Colors */
    --clr-ink: #E0E0E0;
    --clr-ink-light: #B0B0B0;

    /* Brand and Accent Colors (ensure good contrast on dark) */
    --clr-indigo: #7986CB;      
    --clr-indigo-dark: #9FA8DA; 
    --clr-indigo-alpha006: rgba(121, 134, 203, 0.15);

    --clr-mint: #66D9C3;        
    --clr-mint-dark: #80CBC4;   
    --clr-mint-alpha01: rgba(102, 217, 195, 0.15);

    --clr-lavender: #3A3D52; /* For subtle backgrounds or accents on dark */

    --clr-highlight: #FFE583;   

    /* Border and Divider Colors */
    --clr-border: #3A3D52;      
    --clr-border-dark: #4F536A; 

    /* Shadow Colors - Adjust opacity for dark backgrounds */
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.25);
    --shadow-md: 0 4px 8px rgba(0,0,0,0.35), 0 2px 4px rgba(0,0,0,0.3);
    --shadow-lg: 0 8px 16px rgba(0,0,0,0.4), 0 4px 8px rgba(0,0,0,0.35);
    --shadow-focus: 0 0 0 3px rgba(255, 229, 131, 0.7);
    --shadow-indigo: 0 4px 10px rgba(121, 134, 203, 0.25);
    --shadow-mint: 0 4px 10px rgba(102, 217, 195, 0.25);

    /* Add other dark theme variable overrides as needed */
}

/* Optional: Fallback for initial OS-based dark mode detection.
   theme-toggle.js also attempts this for the very first load if no user preference is stored.
   This ensures that if the OS is dark AND data-theme is NOT 'light', dark mode styles apply.
*/
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        /* Re-declare all variables from :root[data-theme="dark"] here */
        --clr-paper: #121212;
        --clr-surface: #1B1D2B;
        --clr-ink: #E0E0E0;
        --clr-ink-light: #B0B0B0;
        --clr-indigo: #7986CB;
        --clr-indigo-dark: #9FA8DA;
        --clr-indigo-alpha006: rgba(121, 134, 203, 0.15);
        --clr-mint: #66D9C3;
        --clr-mint-dark: #80CBC4;
        --clr-mint-alpha01: rgba(102, 217, 195, 0.15);
        --clr-lavender: #3A3D52;
        --clr-highlight: #FFE583;
        --clr-border: #3A3D52;
        --clr-border-dark: #4F536A;
        /* ... include shadows etc. ... */
    }
}