/* /assets/css/dark-mode.css */
/* ==========================================================================
   FLAWLESS DARK MODE SYSTEM
   ========================================================================== */

html.dark {
    /* Deep Space & Elevated Surfaces */
    --bg-main: #0b0f19;        
    --bg-surface: #111827;     
    --bg-mesh: radial-gradient(at 0% 0%, hsla(253, 100%, 14%, 0.15) 0, transparent 50%), 
               radial-gradient(at 50% 0%, hsla(225, 100%, 14%, 0.15) 0, transparent 50%), 
               radial-gradient(at 100% 0%, hsla(339, 100%, 14%, 0.15) 0, transparent 50%);
    
    /* High Contrast Text */
    --text-strong: #f8fafc;
    --text-base: #cbd5e1;
    --text-muted: #94a3b8;
    
    /* Subtle Borders */
    --border-light: #1e293b;
    --border-focus: #3730a3;
    
    /* Deep, Rich Shadows instead of flat drop-shadows */
    --shadow-float: 0 4px 20px -2px rgba(0, 0, 0, 0.4);
    --shadow-hover: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 0 15px 0 rgba(79, 70, 229, 0.15);
}

/* Specific Component Overrides for Dark Mode */
html.dark .hero-section {
    background: linear-gradient(180deg, #111827 0%, #0b0f19 100%);
}

html.dark .tool-icon {
    background: #0b0f19;
    border-color: #1e293b;
}

/* Custom Select Dropdown Arrow - Swaps to white in dark mode */
html.dark .custom-select {
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
}

/* Input highlights */
html.dark .input-field input:focus, 
html.dark .custom-select:focus {
    background-color: #0b0f19;
}