/**
 * MhSys OS - Componente Theme Toggle & Dark/Light Mode Engine
 * public/css/components/theme-toggle.css
 */

:root {
    /* ========================================================
       TEMA ESCURO (PADRÃO / DEFAULT)
       ======================================================== */
    --accent-hsl: var(--primary-color, 243, 75%, 59%);
    --accent: hsl(var(--accent-hsl));
    --accent-glow: hsla(var(--accent-hsl), 0.25);
    
    --bg-page: hsl(222, 47%, 7%);
    --bg-gradient: linear-gradient(135deg, hsl(222, 47%, 7%) 0%, hsl(224, 64%, 4%) 100%);
    --navbar-bg: rgba(10, 15, 30, 0.75);
    --card-bg: rgba(15, 23, 42, 0.6);
    --card-hover-bg: rgba(15, 23, 42, 0.85);
    --card-border: rgba(255, 255, 255, 0.08);
    --card-border-hover: hsla(var(--accent-hsl), 0.45);
    
    --text-main: #f8fafc;
    --text-title: #ffffff;
    --text-muted: #94a3b8;
    
    --mockup-header-bg: rgba(2, 6, 23, 0.85);
    --mockup-body-bg: rgba(15, 23, 42, 0.88);
    --mockup-item-bg: rgba(255, 255, 255, 0.035);
    --mockup-item-border: rgba(255, 255, 255, 0.06);
    --mockup-text-highlight: #ffffff;
    
    --glow-opacity-1: 0.22;
    --glow-opacity-2: 0.14;
    --shadow-card: 0 20px 40px -15px rgba(0, 0, 0, 0.7);
    --footer-bg: rgba(10, 15, 30, 0.95);
    --mobile-cta-bg: rgba(10, 15, 30, 0.92);
    
    --modal-bg: rgba(15, 23, 42, 0.92);
    --modal-border: rgba(255, 255, 255, 0.12);
    --modal-shadow: 0 30px 70px rgba(0, 0, 0, 0.8);
    
    --switcher-bg: rgba(255, 255, 255, 0.035);
    --switcher-border: rgba(255, 255, 255, 0.08);
    --switcher-btn-color: rgba(255, 255, 255, 0.7);
    
    --transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ========================================================
   MODO CLARO (LIGHT MODE OVERRIDES)
   ======================================================== */
body.light-mode,
html.light-mode {
    --bg-page: #f8fafc;
    --bg-gradient: linear-gradient(135deg, #f8fafc 0%, #edf2f7 100%);
    --navbar-bg: rgba(255, 255, 255, 0.88);
    --card-bg: rgba(255, 255, 255, 0.78);
    --card-hover-bg: rgba(255, 255, 255, 0.98);
    --card-border: rgba(15, 23, 42, 0.08);
    --card-border-hover: hsla(var(--accent-hsl), 0.5);
    
    --text-main: #334155;
    --text-title: #0f172a;
    --text-muted: #64748b;
    
    --mockup-header-bg: #f1f5f9;
    --mockup-body-bg: #ffffff;
    --mockup-item-bg: #f8fafc;
    --mockup-item-border: #e2e8f0;
    --mockup-text-highlight: #0f172a;
    
    --glow-opacity-1: 0.08;
    --glow-opacity-2: 0.05;
    --shadow-card: 0 15px 35px -10px rgba(15, 23, 42, 0.08);
    --footer-bg: #f1f5f9;
    --mobile-cta-bg: rgba(255, 255, 255, 0.96);
    
    --modal-bg: rgba(255, 255, 255, 0.98);
    --modal-border: rgba(15, 23, 42, 0.08);
    --modal-shadow: 0 25px 60px rgba(15, 23, 42, 0.15);
    
    --switcher-bg: rgba(15, 23, 42, 0.04);
    --switcher-border: rgba(15, 23, 42, 0.08);
    --switcher-btn-color: #64748b;
}

/* ========================================================
   ESTILOS DO BOTÃO DE ALTERNÂNCIA DE TEMA (#theme-toggle)
   ======================================================== */
.btn-theme-toggle {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--card-border);
    color: var(--text-main);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    transition: var(--transition);
    outline: none;
    flex-shrink: 0;
}

.btn-theme-toggle:hover {
    border-color: var(--accent);
    color: var(--accent);
    transform: scale(1.08);
    box-shadow: 0 0 12px hsla(var(--accent-hsl), 0.3);
}

.btn-theme-toggle:active {
    transform: scale(0.95);
}

body.light-mode .btn-theme-toggle {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(15, 23, 42, 0.1);
    color: #334155;
}

body.light-mode .btn-theme-toggle:hover {
    background: rgba(0, 0, 0, 0.07);
    color: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 0 12px hsla(var(--accent-hsl), 0.2);
}