@media (max-width: 1199px) {
    /**
     * Mobile-specific theme overrides
     * These values tweak the CSS variables defined in style.css so the UI
     * feels lighter and more breathable on smaller screens.
     */

     body[data-theme="light"] {
        --sidebar-bg: #FFFFFF;
    /* Crisp white sidebar */
    --main-bg: #FFFFFF;
    /* Slightly off-white for better separation */

    /* Text colors */
    --text-primary: #111111;
    /* Deep neutral black for strong contrast */
    --text-secondary: #333333;
    /* Softer dark gray for subtitles */
    --text-faded: #555555;
    /* Dimmed gray for placeholder or muted text */
    --text-tertiary: #999999;
    /* Tertiary text color for less important text */

    /* Borders & dividers */
    --border-color: #D9D9D9;
    /* Light neutral gray for soft boundaries */
    --nav-active-bg: #F2F2F2;
    /* Gentle highlight for active areas */
    --bg-active: #E8E8E8;
    /* Background for active items */
    --bg-tertiary: #E0E0E0;
    /* Tertiary background for scrollbars */

    /* Inputs */
    --input-main-bg: #FFFFFF;
    --input-bg: #F7F7F7;
    /* Keep inputs clean and white */
    --input-border: #CCCCCC;
    /* Subtle but visible border */
    --tool-bg: #F5F5F5;
    /* Slightly darker grey for tool section */
    --dropdown-bg: #FFFFFF;
    /* Dedicated dropdown surface */

    /* Accent color (use same family as dark mode for consistency) */
    --accent: #FFC400;
    /* Muted blue for links/buttons */
    --accent-hover: #6C90FF;
    /* Slightly lighter hover tone */
    }
    
    
    /* Dark Theme (Default) */
    body[data-theme="dark"] {
        --sidebar-bg: #121212;
    --main-bg: #121212;

    /* Text colors with higher contrast */
    --text-primary: #F5F5F5;
    /* Brighter white, but still soft */
    --text-secondary: #B5B5B5;
    /* More distinct gray */
    --text-faded: #7A7A7A;
    /* Slightly brighter for legibility */
    --text-tertiary: #8A8A8A;
    /* Tertiary text color for less important text */

    /* UI elements */
    --border-color: #1E1E1E;
    --nav-active-bg: #3A3A3A;
    --bg-active: #4A4A4A;
    /* Background for active items */
    --bg-tertiary: #2D2D2D;
    /* Tertiary background for scrollbars */
    --input-main-bg: #303030;
    --input-bg: #2A2A2A;
    --input-border: #3C3C3C;
    --tool-bg: #1F1F1F;
    /* Darker charcoal grey for tool section */
    --dropdown-bg: #1F1F1F;

    /* Accent */
    --accent: #FFC400;
    --accent-hover: #7DA3FF;
    }
    
    /* Dark Charcoal Theme */
    body[data-theme="dark"][data-dark-variant="charcoal"] {
        --sidebar-bg: #1E1E1E;
    --main-bg: #212121;

    /* Text colors */
    --text-primary: #E5E5E5;
    --text-secondary: #B0B0B0;
    --text-faded: #808080;
    --text-tertiary: #909090;
    /* Tertiary text color for less important text */

    /* UI elements */
    --border-color: #2D2D2D;
    --nav-active-bg: #2D2D2D;
    --bg-active: #3D3D3D;
    /* Background for active items */
    --bg-tertiary: #353535;
    /* Tertiary background for scrollbars */
    --input-main-bg: #303030;
    --input-bg: #2D2D2D;
    --input-border: #3A3A3A;
    --tool-bg: #252525;
    /* Darker charcoal grey for tool section */
    --dropdown-bg: #1F1F1F;

    /* Accent */
    --accent: #FFC400;
    --accent-hover: #7DA3FF;
    }
}