:root {
    /* Light Mode */
    --bg-primary: #f3f4f6;
    --bg-secondary: #ffffff;
    --text-primary: #1f2937;
    --text-secondary: #4b5563;
    
    --accent-blue: #1e40af; /* Blue-800 */
    --accent-blue-hover: #1e3a8a; /* Blue-900 */
    --accent-red: #dc2626; /* Red-600 */
    --accent-red-hover: #b91c1c; /* Red-700 */
    
    --border-color: #e5e7eb;
}

[data-theme="dark"] {
    /* Dark Mode */
    --bg-primary: #111827; /* Gray-900 */
    --bg-secondary: #1f2937; /* Gray-800 */
    --text-primary: #f9fafb; /* Gray-50 */
    --text-secondary: #d1d5db; /* Gray-300 */
    
    --accent-blue: #3b82f6; /* Blue-500 */
    --accent-blue-hover: #2563eb; /* Blue-600 */
    --accent-red: #ef4444; /* Red-500 */
    --accent-red-hover: #dc2626; /* Red-600 */
    
    --border-color: #374151;
}

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.bg-theme-card {
    background-color: var(--bg-secondary);
}

.text-theme-primary {
    color: var(--text-primary);
}

.text-theme-secondary {
    color: var(--text-secondary);
}

.btn-primary {
    background-color: var(--accent-blue);
    color: white;
    transition: background-color 0.2s;
}

.btn-primary:hover {
    background-color: var(--accent-blue-hover);
}

.btn-danger {
    background-color: var(--accent-red);
    color: white;
    transition: background-color 0.2s;
}

.btn-danger:hover {
    background-color: var(--accent-red-hover);
}

.border-theme {
    border-color: var(--border-color);
}