:root {
    /* Default Theme (Orange/Energy) */
    --bg-color: #18181b;
    /* Zinc-900 */
    --text-color: #f4f4f5;
    /* Zinc-100 */
    --primary-color: #f97316;
    /* Orange-500 */
    --primary-hover: #ea580c;
    /* Orange-600 */
    --card-bg: #27272a;
    /* Zinc-800 */
    --accent-bg: #000000;
}

/* Theme: Purple (Vibe) */
.theme-purple {
    --bg-color: #0f0720;
    /* Deep Purple */
    --text-color: #e9d5ff;
    /* Purple-100 */
    --primary-color: #d946ef;
    /* Fuchsia-500 */
    --primary-hover: #c026d3;
    /* Fuchsia-600 */
    --card-bg: #1e1b4b;
    /* Indigo-950 */
    --accent-bg: #000000;
}

/* Theme: Black (Urban) */
.theme-black {
    --bg-color: #000000;
    --text-color: #ffffff;
    --primary-color: #eab308;
    /* Yellow-500 */
    --primary-hover: #ca8a04;
    /* Yellow-600 */
    --card-bg: #1c1917;
    /* Stone-900 */
    --accent-bg: #0c0a09;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
}

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

.bg-primary {
    background-color: var(--primary-color);
}

.hover\:bg-primary-hover:hover {
    background-color: var(--primary-hover);
}

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

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

.bg-accent {
    background-color: var(--accent-bg);
}