/* ── THEME VARIABLES ─────────────────────────────── */

/* Light (default) */
:root,
[data-theme='light'] {
    --background: 0 0% 100%;
    --foreground: 224 71% 4%;
    --card: 0 0% 100%;
    --card-foreground: 224 71% 4%;
    --primary: 42 88% 54%;
    --primary-foreground: 30 50% 10%;
    --secondary: 40 14% 96%;
    --secondary-foreground: 40 9% 46%;
    --muted: 40 14% 96%;
    --muted-foreground: 40 9% 46%;
    --accent: 40 14% 92%;
    --accent-foreground: 40 9% 15%;
    --destructive: 0 84% 60%;
    --border: 40 13% 91%;
    --input: 40 13% 91%;
    --ring: 42 88% 54%;
    --discord: #5865f2;
    --discord-hover: #4752c4;
}

/* Dark */
[data-theme='dark'] {
    --background: 224 71% 4%;
    --foreground: 213 31% 91%;
    --card: 224 71% 6%;
    --card-foreground: 213 31% 91%;
    --primary: 42 88% 54%;
    --primary-foreground: 30 50% 10%;
    --secondary: 35 30% 12%;
    --secondary-foreground: 40 40% 90%;
    --muted: 35 25% 12%;
    --muted-foreground: 40 15% 60%;
    --accent: 38 30% 17%;
    --accent-foreground: 40 40% 95%;
    --destructive: 0 70% 50%;
    --border: 38 25% 17%;
    --input: 38 25% 17%;
    --ring: 42 88% 54%;
    --discord: #5865f2;
    --discord-hover: #4752c4;
}

/* Dox (brown / gold) */
[data-theme='dox'] {
    --background: 25 35% 5%;
    --foreground: 35 40% 90%;
    --card: 25 35% 8%;
    --card-foreground: 35 40% 90%;
    --primary: 42 95% 52%;
    --primary-foreground: 25 35% 5%;
    --secondary: 28 28% 14%;
    --secondary-foreground: 35 30% 78%;
    --muted: 27 22% 13%;
    --muted-foreground: 35 15% 55%;
    --accent: 30 32% 17%;
    --accent-foreground: 35 40% 88%;
    --destructive: 0 72% 52%;
    --border: 28 28% 17%;
    --input: 28 28% 17%;
    --ring: 42 95% 52%;
    --discord: #5865f2;
    --discord-hover: #4752c4;
}

/* Noxa (red) */
[data-theme='noxa'] {
    --background: 0 40% 5%;
    --foreground: 0 15% 93%;
    --card: 0 40% 8%;
    --card-foreground: 0 15% 93%;
    --primary: 0 85% 58%;
    --primary-foreground: 0 0% 100%;
    --secondary: 0 30% 14%;
    --secondary-foreground: 0 15% 80%;
    --muted: 0 25% 13%;
    --muted-foreground: 0 10% 56%;
    --accent: 4 32% 18%;
    --accent-foreground: 0 15% 91%;
    --destructive: 18 85% 56%;
    --border: 0 30% 17%;
    --input: 0 30% 17%;
    --ring: 0 85% 58%;
    --discord: #5865f2;
    --discord-hover: #4752c4;
}

/* Astoria (green) */
[data-theme='astoria'] {
    --background: 145 35% 5%;
    --foreground: 140 18% 92%;
    --card: 145 35% 8%;
    --card-foreground: 140 18% 92%;
    --primary: 142 68% 46%;
    --primary-foreground: 145 35% 5%;
    --secondary: 145 28% 13%;
    --secondary-foreground: 140 18% 78%;
    --muted: 144 22% 13%;
    --muted-foreground: 140 10% 55%;
    --accent: 147 30% 17%;
    --accent-foreground: 140 18% 90%;
    --destructive: 0 70% 52%;
    --border: 145 28% 16%;
    --input: 145 28% 16%;
    --ring: 142 68% 46%;
    --discord: #5865f2;
    --discord-hover: #4752c4;
}

/* ── RESETS ──────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scrollbar-width: thin;
    scrollbar-color: hsl(var(--border)) transparent;
}

body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    font-family:
        'Nunito Sans',
        'Segoe UI',
        system-ui,
        -apple-system,
        sans-serif;
    min-height: 100vh;
    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

h1,
h2,
h3 {
    font-family: 'Quicksand', sans-serif;
}

code,
pre,
kbd,
samp,
.monospace {
    font-family: 'Source Code Pro', monospace;
}

/* ── TOP BAR ── */
.top-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
}

/* ── PORTAL ICON LINK ── */
.btn-portal {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 8px;
    background: transparent;
    color: hsl(var(--muted-foreground));
    text-decoration: none;
    transition:
        color 0.18s ease,
        background 0.18s ease,
        transform 0.12s ease;
}

.btn-portal:hover {
    color: hsl(var(--foreground));
    background: hsl(var(--accent));
    transform: translateY(-1px);
}

.btn-portal svg {
    width: 20px;
    height: 20px;
}

/* ── THEME SWITCHER ── */
.theme-switcher {
    position: relative;
}

.theme-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: hsl(var(--muted-foreground));
    cursor: pointer;
    transition:
        color 0.18s ease,
        background 0.18s ease;
}

.theme-btn:hover {
    color: hsl(var(--foreground));
    background: hsl(var(--accent));
}

.theme-btn svg {
    width: 18px;
    height: 18px;
}

.theme-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 0.35rem);
    right: 0;
    min-width: 10rem;
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: 10px;
    padding: 0.35rem;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
    z-index: 200;
}

.theme-dropdown.open {
    display: block;
}

.theme-dropdown-label {
    padding: 0.4rem 0.65rem 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: hsl(var(--muted-foreground));
    letter-spacing: 0.02em;
}

.theme-dropdown-sep {
    height: 1px;
    background: hsl(var(--border));
    margin: 0.25rem 0.5rem;
}

.theme-option {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.4rem 0.65rem;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: hsl(var(--foreground));
    font-family: inherit;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.12s ease;
}

.theme-option:hover {
    background: hsl(var(--accent));
}

.theme-option.active {
    background: hsl(var(--accent));
    font-weight: 600;
}

.theme-swatch {
    display: flex;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid hsl(var(--border));
    flex-shrink: 0;
}

.theme-swatch span {
    width: 50%;
    height: 100%;
}