/* Catppuccin Frappé (dark — default) */
:root {
    --bg-primary: #303446;
    --bg-secondary: #292c3c;
    --bg-tertiary: #414559;
    --text-primary: #c6d0f5;
    --text-secondary: #a5adce;
    --accent: #8caaee;
    --accent-hover: #babbf1;
}

/* Catppuccin Latte (light) */
[data-theme="light"] {
    --bg-primary: #eff1f5;
    --bg-secondary: #e6e9ef;
    --bg-tertiary: #ccd0da;
    --text-primary: #4c4f69;
    --text-secondary: #6c6f85;
    --accent: #1e66f5;
    --accent-hover: #7287fd;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.landing {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.avatar {
    width: 128px;
    height: 128px;
    border-radius: 50%;
    object-fit: cover;
}

.avatar-placeholder {
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    font-weight: 700;
    color: var(--text-secondary);
}

.landing h1 {
    font-size: 2rem;
    font-weight: 700;
}

.landing p {
    color: var(--text-secondary);
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

.discord-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s;
}

.discord-btn:hover {
    background: var(--accent-hover);
}

/* ── Theme toggle ───────────────────────── */

.theme-toggle {
    position: fixed;
    bottom: 1.25rem;
    left: 1.25rem;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
    z-index: 200;
}

.theme-toggle:hover {
    background: var(--accent);
    color: var(--bg-primary);
}

.theme-toggle svg { display: block; }
.theme-toggle .icon-moon { display: none; }
[data-theme="light"] .theme-toggle .icon-sun { display: none; }
[data-theme="light"] .theme-toggle .icon-moon { display: block; }