/**
 * Global Dark Theme Variables Overwrite Layer
 * Target: assets/css/theme-dark.css
 * Engine: Native HTML Attribute Dynamic Selector [data-theme="dark"]
 */

html[data-theme="dark"] {
    --bg-primary: #0f172a;        /* Slate 900 (Deep dark canvas) */
    --bg-surface: #1e293b;        /* Slate 800 (Card/Navbar canvas) */
    --text-main: #f8fafc;         /* Slate 50 (Crisp high-contrast white text) */
    --text-muted: #94a3b8;        /* Slate 400 (Soft readable grey text) */
    --border-color: #334155;      /* Slate 700 (Subtle dark borders) */
    
    /* Branding Accent Yellow Adjustment for Dark Canvas Visibility */
    --brand-yellow-dark: #fde047; /* Slightly brighter yellow for high dark contrast */
    
    --bg-ad-placeholder: #1e293b;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.5);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.3), 0 2px 4px -1px rgba(0,0,0,0.2);
}

/* Toggle the SVGs inside the button when dark mode is active */
html[data-theme="dark"] .theme-icon-moon-svg {
    display: none;
}

html[data-theme="dark"] .theme-icon-sun-svg {
    display: block;
    color: var(--brand-yellow-dark);
}