:root {
    --primary-color: #2e7d32;
    --accent-color: #ffd700;
    --success-color: #4caf50;
    --error-color: #e53935;
    --bg-color: #f4f7f6;
    --text-color: #333;
    --card-bg: #ffffff;
    --border-color: #eee;
    --transition: all 0.3s ease;
}

.dark {
    --bg-color: #0f1710;
    --text-color: #e0e0e0;
    --card-bg: #1a231a;
    --border-color: #2a352a;
}

/* Base Styles */
* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Inter', sans-serif; }
body { background-color: var(--bg-color); color: var(--text-color); transition: var(--transition); line-height: 1.6; }
h1, h2, h3 { font-family: 'Outfit', sans-serif; }

/* Micro-animations */
.fade-in { animation: fadeIn 0.5s ease-out forwards; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Toast Notifications */
#toast-container { position: fixed; bottom: 85px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.toast { background: var(--card-bg); color: var(--text-color); padding: 1rem 1.5rem; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.15); border-left: 5px solid var(--primary-color); display: flex; align-items: center; gap: 0.8rem; animation: toastSlideIn 0.3s ease forwards; pointer-events: auto; min-width: 250px; }
.toast.success { border-left-color: var(--success-color); }
.toast.error { border-left-color: var(--error-color); }
.toast.fade-out { animation: toastFadeOut 0.3s ease forwards; }

@keyframes toastSlideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes toastFadeOut { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100%); opacity: 0; } }

@media (max-width: 768px) { #toast-container { bottom: 90px; left: 20px; right: 20px; } .toast { min-width: auto; } }

/* Premium Theme Toggle Sun/Moon Animations */
.theme-toggle-btn svg {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.theme-toggle-btn .sun-icon { color: #f39c12; transform: translateY(0) rotate(0); opacity: 1; }
.theme-toggle-btn .moon-icon { color: #f1c40f; transform: translateY(100%) rotate(45deg); opacity: 0; }
.dark .theme-toggle-btn .sun-icon { transform: translateY(-100%) rotate(-45deg); opacity: 0; }
.dark .theme-toggle-btn .moon-icon { transform: translateY(0) rotate(0); opacity: 1; }