:root {
    --background: 260 30% 5%;
    --foreground: 230 28% 96%;
    --card: 260 31% 9%;
    --card-foreground: 230 28% 96%;
    --popover: 260 31% 9%;
    --popover-foreground: 230 28% 96%;
    --primary: 271 86% 61%;
    --primary-foreground: 0 0% 100%;
    --secondary: 260 28% 14%;
    --secondary-foreground: 230 28% 96%;
    --muted: 260 24% 17%;
    --muted-foreground: 255 12% 66%;
    --accent: 186 96% 54%;
    --accent-foreground: 260 30% 5%;
    --border: 264 28% 20%;
    --input: 264 28% 20%;
    --ring: 271 86% 61%;
    --radius: .5rem;
    --hero-overlay: linear-gradient(180deg, hsla(260, 30%, 5%, .7) 0%, hsla(271, 86%, 24%, .58) 55%, hsla(286, 90%, 14%, .88) 100%);
    --section-dark: 260 34% 4%;
    --section-light: 250 30% 94%;
    --section-light-foreground: 260 30% 8%;
    --gold: 186 96% 54%;
}

.site-logo {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    object-fit: contain;
    box-shadow: 0 0 0 1px hsl(var(--border)), 0 10px 28px hsl(var(--primary) / .28);
}

.site-brand span {
    letter-spacing: 0;
}

.site-brand > span {
    font-size: 1.35rem;
    background-image: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--accent)));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.site-brand > span .text-foreground {
    color: hsl(var(--foreground));
    -webkit-text-fill-color: hsl(var(--foreground));
}

.text-gradient,
.gold-text {
    background-image: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--accent)));
}

.section-light {
    background:
        linear-gradient(135deg, hsl(250 30% 94%), hsl(188 45% 91%));
    color: hsl(var(--section-light-foreground));
}

.section-dark {
    background:
        radial-gradient(circle at 20% 10%, hsl(var(--primary) / .2), transparent 32%),
        linear-gradient(180deg, hsl(260 34% 4%), hsl(269 38% 8%));
}

.bg-primary {
    background-image: linear-gradient(135deg, hsl(var(--primary)), hsl(286 86% 56%));
}