body {
    --brand-foreground: 220 100% 50%;
    --brand: 45 100% 50%;
    --background: #030303;
    --card: #1a1a1a;
    --card-foreground: #f0f0f0;
    --muted: #2a2a2a;
    --muted-foreground: #a0a0a0;
    --primary: #f59e0b;
    --border: #2a2a2a;
}

#candle-container {
    user-select: none;
    -webkit-user-select: none;

    touch-action: none;
    -webkit-touch-callout: none;
}

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

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

.text-card-foreground {
    color: var(--card-foreground);
}

.border-border\/50 {
    border-color: rgba(var(--border), 0.5);
}

.text-muted-foreground {
    color: var(--muted-foreground);
}

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

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

.glow {
    position: absolute;
    width: 100%;
}

.glow.top {
    top: 0;
}

.glow-center {
    top: 50%;
}

.glow-1 {
    position: absolute;
    left: 50%;
    height: 256px;
    width: 60%;
    transform: translateX(-50%) scale(2.5);
    border-radius: 50%;
    background-image: radial-gradient(ellipse at center, hsla(var(--brand-foreground)/.5) 10%, hsla(var(--brand-foreground)/0) 60%);
}

.glow-2 {
    position: absolute;
    left: 50%;
    height: 128px;
    width: 40%;
    transform: translateX(-50%) scale(2);
    border-radius: 50%;
    background-image: radial-gradient(ellipse at center, hsla(var(--brand)/.3) 10%, hsla(var(--brand-foreground)/0) 60%);
}

.elegant-shape {
    position: absolute;
}

.elegant-shape-inner {
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
    --tw-gradient-from: var(--gradient-from);
    --tw-gradient-to: var(--gradient-to);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    backdrop-filter: blur(2px);
    border: 2px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 32px 0 rgba(255, 255, 255, 0.1);
}

.elegant-shape-inner::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    background-image: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.2), transparent 70%);
}

.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #d4af37;
    border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #b8860b;
}

/* Contextual Palette */
#contextual-palette.is-open {
    opacity: 1;
    transform: translate(-50%, -110%) scale(1);
    pointer-events: auto;
    max-width: 90%;
}

#palette-colors::-webkit-scrollbar {
    height: 4px;
}

#palette-colors::-webkit-scrollbar-track {
    background: #f1f5f9;
}

#palette-colors::-webkit-scrollbar-thumb {
    background: #d4af37;
    border-radius: 2px;
}

.color-swatch.selected {
    --tw-border-opacity: 1;
    border-color: rgb(212 175 55 / var(--tw-border-opacity));
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-color: rgb(212 175 55 / 0.4);
}

/* Color picker buttons */
.color-option {
    @apply w-10 h-10 rounded-xl shadow-md cursor-pointer transition-all duration-200 border-2 border-transparent;
}

.color-option:hover,
.color-option:active {
    @apply scale-110 shadow-lg;
    transform: scale(1.1) translateY(-2px);
}

.color-option.selected {
    @apply border-gold-400 ring-2 ring-gold-400 ring-opacity-40;
}

/* Empty state animation */
@keyframes bounce-gentle {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

.bounce-gentle {
    animation: bounce-gentle 2s infinite;
}

/* Floating button pulse */
@keyframes pulse-gold {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.4);
    }

    50% {
        box-shadow: 0 0 0 10px rgba(212, 175, 55, 0);
    }
}

.pulse-gold {
    animation: pulse-gold 2s infinite;
}

#addLayerBtn.disabled {
    background-color: #9ca3af;
    cursor: not-allowed;
    background-image: none;
}