/* css/themes/light.css */

html[data-theme="light"]:root,
html[data-theme="light"] {
    /* Core Palette */
    --primary: #3e1e04;          
    --primary-light: #6a3005;   
    --secondary: #965015;         
    --accent: #c4923e; 

    /* Backgrounds */
    --bg-primary: #e0cfb9;       
    --bg-secondary: #cbac85;      
    --bg-panel: #f9f6f0;     
    
    /* Text */
    --text-primary: #3e1e04;    
    --text-secondary: #6a3005;  
    
    /* Borders */
    --border-primary: #e6d5c0;    
    
    /* Status Colors */
    --success: #965015;     
    --error: #c4441a;       
    --warning: #c4923e;     
    --info: #6a3005;        
    
    /* Shadows */
    --shadow: rgba(62, 30, 4, 0.12);
    
    /* Button Variables */
    --btn-bg: #3e1e04;           
    --btn-text: #f9f6f0;          
    
    /* Input Variables */
    --input-bg: #f9f6f0;
    --input-text: #3e1e04;
    
    /* Miscellaneous */
    --tooltip-bg: rgba(62, 30, 4, 0.9);

    --benefits: #098200;
}

html[data-theme="light"] body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

html[data-theme="light"] .panel {
    background-color: var(--bg-panel);
    border-color: var(--border-primary);
    color: var(--text-primary);
    box-shadow: 0 2px 8px var(--shadow), 0 1px 3px var(--shadow);
}

html[data-theme="light"] .panel-header {
    background-color: var(--bg-secondary);
    border-color: var(--border-primary);
    color: var(--text-primary);
}

html[data-theme="light"] .main-header {
    background-color: var(--bg-panel);
    border-color: var(--border-primary);
    color: var(--text-primary);
    box-shadow: 0 1px 3px var(--shadow);
}

html[data-theme="light"] .left-menu {
    background-color: var(--bg-secondary);
    border-color: var(--border-primary);
    box-shadow: 2px 0 4px var(--shadow);
}

/* Content areas with proper background hierarchy */
html[data-theme="light"] .content-container {
    background-color: var(--bg-primary);
}

html[data-theme="light"] .dashboard-content,
html[data-theme="light"] .tasks-content,
html[data-theme="light"] .settings-content,
html[data-theme="light"] .shop-content,
html[data-theme="light"] .habitus-content,
html[data-theme="light"] .subscription-content {
    background-color: var(--bg-primary);
}

/* Enhanced visual separation */
html[data-theme="light"] .task-item {
    background-color: var(--bg-panel);
    border-color: var(--border-primary);
    box-shadow: 0 1px 3px var(--shadow);
}

html[data-theme="light"] .task-item:hover {
    box-shadow: 0 2px 6px var(--shadow);
    border-color: var(--accent);
}

html[data-theme="light"] .task-item.completed {
    background-color: var(--bg-secondary);
    border-color: var(--success);
}

/* Form elements */
html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] select {
    background-color: var(--input-bg);
    color: var(--input-text);
    border-color: var(--border-primary);
}

html[data-theme="light"] input:focus,
html[data-theme="light"] textarea:focus,
html[data-theme="light"] select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(150, 80, 21, 0.2);
}

html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder {
    color: var(--text-secondary);
    opacity: 0.7;
}

/* Buttons */
html[data-theme="light"] .btn-primary {
    background-color: var(--btn-bg);
    color: var(--btn-text);
    border-color: var(--btn-bg);
}

html[data-theme="light"] .btn-primary:hover {
    background-color: var(--primary-light);
    border-color: var(--primary-light);
}

html[data-theme="light"] .btn-secondary {
    background-color: var(--bg-panel);
    color: var(--text-primary);
    border-color: var(--border-primary);
}

html[data-theme="light"] .btn-secondary:hover {
    background-color: var(--bg-secondary);
}

html[data-theme="light"] .btn-success {
    background-color: var(--success);
    color: var(--btn-text);
    border-color: var(--success);
}

html[data-theme="light"] .btn-success:hover {
    background-color: var(--secondary);
    border-color: var(--secondary);
}

/* Links */
html[data-theme="light"] a {
    color: var(--accent);
}

html[data-theme="light"] a:hover {
    color: var(--secondary);
}

/* Modals */
html[data-theme="light"] .modal {
    background-color: color-mix(in srgb, var(--secondary) 70%, transparent);
    box-shadow: 0 10px 25px var(--shadow);
}

html[data-theme="light"] .modal-overlay {
    background-color: var(--shadow);
}

/* Notifications */
html[data-theme="light"] .notification {
    background-color: var(--bg-panel);
    box-shadow: 0 4px 12px var(--shadow);
    border-color: var(--border-primary);
}

html[data-theme="light"] .notification.success {
    background-color: var(--bg-panel);
    color: var(--success);
    border-color: var(--success);
}

html[data-theme="light"] .notification.error {
    background-color: var(--bg-panel);
    color: var(--error);
    border-color: var(--error);
}

html[data-theme="light"] .notification.warning {
    background-color: var(--bg-panel);
    color: var(--warning);
    border-color: var(--warning);
}

/* Scrollbars */
html[data-theme="light"] ::-webkit-scrollbar-track {
    background-color: var(--bg-secondary);
}

html[data-theme="light"] ::-webkit-scrollbar-thumb {
    background-color: var(--accent);
}

html[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
    background-color: var(--secondary);
}

/* Table elements */
html[data-theme="light"] table {
    background-color: var(--bg-panel);
    border-color: var(--border-primary);
}

html[data-theme="light"] th {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--border-primary);
}

html[data-theme="light"] td {
    border-color: var(--border-primary);
    color: var(--text-primary);
}

html[data-theme="light"] tr:hover {
    background-color: var(--bg-secondary);
}

/* Cards and containers */
html[data-theme="light"] .card {
    background-color: var(--bg-panel);
    border-color: var(--border-primary);
    box-shadow: 0 2px 4px var(--shadow);
}

html[data-theme="light"] .card:hover {
    box-shadow: 0 4px 8px var(--shadow);
}