/* Base variables (Dark Theme) */
:root {
    --color-bg-primary: #0f172a; /* slate-900 */
    --color-bg-secondary: #1e293b; /* slate-800 */
    --color-bg-tertiary: #334155; /* slate-700 */
    --color-text-primary: #e2e8f0; /* slate-200 */
    --color-text-secondary: #94a3b8; /* slate-400 */
    --color-accent: #38bdf8; /* sky-500 */
    --color-accent-light: #0ea5e9; /* sky-600 */
    --color-accent-shadow: rgba(56, 189, 248, 0.8);
    --color-border: #475569; /* slate-600 */
    --color-success: #10b981; /* emerald-500 */
    --color-warning: #f59e0b; /* amber-500 */
    --color-error: #ef4444; /* red-500 */
}

/* Light Theme */
.theme-light {
    --color-bg-primary: #f8fafc; /* slate-50 */
    --color-bg-secondary: #ffffff; /* white */
    --color-bg-tertiary: #f1f5f9; /* slate-100 */
    --color-text-primary: #1e293b; /* slate-900 */
    --color-text-secondary: #64748b; /* slate-500 */
    --color-accent: #0ea5e9; /* sky-600 */
    --color-accent-light: #38bdf8; /* sky-500 */
    --color-accent-shadow: rgba(0, 165, 229, 0.5); /* Adjusted for light theme */
    --color-border: #e2e8f0; /* slate-200 */
    --color-success: #059669; /* emerald-600 */
    --color-warning: #d97706; /* amber-600 */
    --color-error: #dc2626; /* red-600 */
}

/* Rose Theme */
.theme-rose {
    --color-bg-primary: #2d0a1a; /* custom dark rose */
    --color-bg-secondary: #4a102a; /* custom medium rose */
    --color-bg-tertiary: #6b214a; /* custom light rose */
    --color-text-primary: #fbcfe8; /* rose-200 */
    --color-text-secondary: #fda4af; /* rose-300 */
    --color-accent: #ec4899; /* rose-500 */
    --color-accent-light: #db2777; /* rose-600 */
    --color-accent-shadow: rgba(236, 72, 153, 0.8); /* Adjusted for rose theme */
    --color-border: #be185d; /* rose-700 */
    --color-success: #10b981; /* emerald-500 */
    --color-warning: #f59e0b; /* amber-500 */
    --color-error: #ef4444; /* red-500 */
}

/* Green Theme */
.theme-green {
    --color-bg-primary: #062e20; /* custom dark green */
    --color-bg-secondary: #0a4732; /* custom medium green */
    --color-bg-tertiary: #14532d; /* custom light green */
    --color-text-primary: #d1fae5; /* emerald-100 */
    --color-text-secondary: #6ee7b7; /* emerald-300 */
    --color-accent: #34d399; /* emerald-400 */
    --color-accent-light: #10b981; /* emerald-500 */
    --color-accent-shadow: rgba(52, 211, 153, 0.8); /* Adjusted for green theme */
    --color-border: #065f46; /* emerald-700 */
    --color-success: #10b981; /* emerald-500 */
    --color-warning: #f59e0b; /* amber-500 */
    --color-error: #ef4444; /* red-500 */
}

/* Orange Theme */
.theme-orange {
    --color-bg-primary: #431407; /* custom dark orange */
    --color-bg-secondary: #7c2d12; /* custom medium orange */
    --color-bg-tertiary: #9a3412; /* custom light orange */
    --color-text-primary: #fed7aa; /* orange-200 */
    --color-text-secondary: #fbbf24; /* amber-400 */
    --color-accent: #f97316; /* orange-500 */
    --color-accent-light: #ea580c; /* orange-600 */
    --color-accent-shadow: rgba(249, 115, 22, 0.8); /* Adjusted for orange theme */
    --color-border: #c2410c; /* orange-700 */
    --color-success: #10b981; /* emerald-500 */
    --color-warning: #f59e0b; /* amber-500 */
    --color-error: #ef4444; /* red-500 */
}

/* Blue Theme */
.theme-blue {
    --color-bg-primary: #071443; /* custom dark blue */
    --color-bg-secondary: #122d7c; /* custom medium blue */
    --color-bg-tertiary: #12349a; /* custom light blue */
    --color-text-primary: #aad7fe; /* blue-200 */
    --color-text-secondary: #bfdbfe; /* blue-300 */
    --color-accent: #3b82f6; /* blue-500 */
    --color-accent-light: #2563eb; /* blue-600 */
    --color-accent-shadow: rgba(59, 130, 246, 0.8); /* Adjusted for blue theme */
    --color-border: #1d4ed8; /* blue-700 */
    --color-success: #10b981; /* emerald-500 */
    --color-warning: #f59e0b; /* amber-500 */
    --color-error: #ef4444; /* red-500 */
}

/* Yellow Theme */
.theme-yellow {
    --color-bg-primary: #433007; /* custom dark yellow */
    --color-bg-secondary: #7c5a12; /* custom medium yellow */
    --color-bg-tertiary: #9a7412; /* custom light yellow */
    --color-text-primary: #fefce8; /* yellow-100 */
    --color-text-secondary: #fde047; /* yellow-400 */
    --color-accent: #facc15; /* yellow-500 */
    --color-accent-light: #eab308; /* yellow-600 */
    --color-accent-shadow: rgba(250, 204, 21, 0.8); /* Adjusted for yellow theme */
    --color-border: #ca8a04; /* yellow-700 */
    --color-success: #10b981; /* emerald-500 */
    --color-warning: #f59e0b; /* amber-500 */
    --color-error: #ef4444; /* red-500 */
}

/* Brown Theme */
.theme-brown {
    --color-bg-primary: #2e1a0a; /* custom dark brown */
    --color-bg-secondary: #472d12; /* custom medium brown */
    --color-bg-tertiary: #5a3e2a; /* custom light brown */
    --color-text-primary: #f5e7d1; /* brown-100 */
    --color-text-secondary: #d4b89a; /* brown-300 */
    --color-accent: #a0522d; /* sienna */
    --color-accent-light: #8b4513; /* saddlebrown */
    --color-accent-shadow: rgba(160, 82, 45, 0.8); /* Adjusted for brown theme */
    --color-border: #6b3e26; /* brown-700 */
    --color-success: #10b981; /* emerald-500 */
    --color-warning: #f59e0b; /* amber-500 */
    --color-error: #ef4444; /* red-500 */
}

/* Gold Theme */
.theme-gold {
    --color-bg-primary: #2E240A;
    --color-bg-secondary: #473C12;
    --color-bg-tertiary: #5A522A;
    --color-text-primary: #F5F2D1;
    --color-text-secondary: #D4C99A;
    --color-accent: #A08D2D;
    --color-accent-light: #8B7A13;
    --color-accent-shadow: rgba(160, 141, 45, 0.8);
    --color-border: #6B6026;
    --color-success: #10b981; /* emerald-500 */
    --color-warning: #f59e0b; /* amber-500 */
    --color-error: #ef4444; /* red-500 */
}

/* Cherry Theme */
.theme-cherry {
    --color-bg-primary: #450a0a;
    --color-bg-secondary: #7f1d1d;
    --color-bg-tertiary: #b91c1c;
    --color-text-primary: #fecaca;
    --color-text-secondary: #ef4444;
    --color-accent: #dc2626;
    --color-accent-light: #b91c1c;
    --color-accent-shadow: rgba(220, 38, 38, 0.8);
    --color-border: #991b1b;
    --color-success: #10b981;
    --color-warning: #f59e0b;
    --color-error: #ef4444;
}

/* Purple Theme */
.theme-purple {
    --color-bg-primary: #2e104e;
    --color-bg-secondary: #4a1d7c;
    --color-bg-tertiary: #5b21b6;
    --color-text-primary: #e9d5ff;
    --color-text-secondary: #c084fc;
    --color-accent: #9333ea;
    --color-accent-light: #7e22ce;
    --color-accent-shadow: rgba(147, 51, 234, 0.8);
    --color-border: #6b21a8;
    --color-success: #10b981;
    --color-warning: #f59e0b;
    --color-error: #ef4444;
}

/* Turquoise Theme */
.theme-turquoise {
    --color-bg-primary: #164e63;
    --color-bg-secondary: #0e7490;
    --color-bg-tertiary: #0891b2;
    --color-text-primary: #a5f3fc;
    --color-text-secondary: #67e8f9;
    --color-accent: #22d3ee;
    --color-accent-light: #06b6d4;
    --color-accent-shadow: rgba(34, 211, 238, 0.8);
    --color-border: #0e7490;
    --color-success: #10b981;
    --color-warning: #f59e0b;
    --color-error: #ef4444;
}

/* Slateblue Theme */
.theme-slateblue {
    --color-bg-primary: #1e293b;
    --color-bg-secondary: #334155;
    --color-bg-tertiary: #475569;
    --color-text-primary: #cbd5e1;
    --color-text-secondary: #94a3b8;
    --color-accent: #64748b;
    --color-accent-light: #475569;
    --color-accent-shadow: rgba(100, 116, 139, 0.8);
    --color-border: #475569;
    --color-success: #10b981;
    --color-warning: #f59e0b;
    --color-error: #ef4444;
}

/* For Webkit-based browsers (Chrome, Safari) */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--color-bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-secondary);
}