/* === Light Mode (default) === */
:root {
    /* === Base Backgrounds === */
    --bg-main: #fafbfd; /* Cool light gray */
    --bg-light: #ffffff; /* Clean container base */
    --white: #ffffff;
    /* === Typography === */
    --text-main: #1c1e21; /* Deep neutral, excellent contrast */
    --muted-text: #607d8b; /* Soft gray-blue for subtext */
    --border: #d0d5dc; /* Clean subtle border tone */
    /* === Primary Colors (Indigo) === */
    --primary: #1a237e; /* Bold, trust-building deep indigo */
    --primary-light: #5c6bc0; /* For hover states or backgrounds */
    --primary-dark: #121858; /* For emphasis or dark borders */
    /* === Secondary Colors (Royal Blue) === */
    --secondary: #3949ab; /* Harmonious companion to primary */
    --secondary-light: #7986cb; /* For softer elements */
    --secondary-dark: #283593; /* Deep variation for depth */
    /* === Accent / CTA (Amber) === */
    --accent: #ffb300; /* Warm, attention-grabbing */
    --accent-light: #ffe082; /* Subtle background for accent */
    --accent-dark: #ff8f00; /* On-hover or press feedback */
    /* === Status Colors === */
    --success: #2e7d32;
    --success-light: #a5d6a7;
    --warning: #f9a825;
    --warning-light: #fff59d;
    --error: #d32f2f;
    --error-light: #ef9a9a;
    --info: #0288d1;
    --info-light: #b3e5fc;
    /* === Links === */
    --link: #0288d1;
    --link-hover: #039be5;
    --link-visited: #1a237e;
    --link-active: #ffb300;
}

/* === Dark Mode === */
/*body.dark-mode {
    --bg-main: #121212;*/ /* Deep dark background */

    /*--primary: #0096c7;*/ /* bright blue with more pop on dark*/ 
    /*--secondary: #0077b6;*/  /*lighter navy-blue for contrast */
    /*--accent: #ff6b6b;*/  /*coral red - remains for highlights */

    /*--text-main: #E0E0E0;*/ /* Light neutral gray for text */

    /*--success: #81C784;*/ /* Light green with visibility */
    /*--success-light: #2E7D32;*/ /* Deep green as background or border */

    /*--warning: #FFD54F;*/ /* Brighter yellow for visibility */
    /*--warning-light: #F9A825;*/ /* Darker amber for backgrounds */

    /*--error: #EF5350;*/ /* Softer red, better for dark mode */
    /*--error-light: #C62828;*/ /* Deep red for background contrast */

    /*--info: #4FC3F7;*/ /* Softer info blue */
    /*--info-light: #0288D1;*/ /* Stronger info blue for background */

    /*--muted-text: #B0BEC5;*/ /* Softer muted text */
    /*--border: #2A2A2A;*/ /* Subtle dark border */

    /*--bg-light: #1E1E1E;*/ /* Dark containers */
    /*--white: #FFFFFF;*/ /* Text or icon highlights */

    /*--link: #4FC3F7;*/ /* Soft cyan for default links (matches info) */
    /*--link-hover: #81D4FA;*/ /* Lighter cyan for hover */
    /*--link-visited: #29B6F6;*/ /* Muted but distinct for visited links */
    /*--link-active: #FF6B6B;*/ /* Accent coral red for active link */
/*}*/


/* === Dark Mode === */

body.dark-mode {
    --bg-main: #0e0f11; /* App background */

    --bg-light: #1a1c1f; /* Sidebar, panels */

    --surface: #23262b; /* Cards, modals, etc. */
    /* === Typography & Borders === */

    --text-main: #f1f3f5;
    --muted-text: #9da4b0;
    --border: #2f333a;
    /* === Primary Colors === */

    --primary: #7289da;
    --primary-light: #aab6f7;
    --primary-dark: #475bbf;
    /* === Secondary Colors (Blue Gray) === */

    --secondary: #8e99ab;
    --secondary-light: #b0b7c9;
    --secondary-dark: #636c7a;
    /* === Accent / CTA === */

    --accent: #ffb300;
    --accent-light: #fff176;
    --accent-dark: #fbc02d;
    /* === Status Colors === */

    --success: #4caf50;
    --success-light: #81c784;
    --warning: #ffb74d;
    --warning-light: #ffe082;
    --error: #f44336;
    --error-light: #ef9a9a;
    --info: #29b6f6;
    --info-light: #81d4fa;
    /* === Links === */

    --link: #82b1ff;
    --link-hover: #aab6f7;
    --link-active: #ffb300;
}