/* ============================================================
   BASE — Reset, tipografia, cores globais
   ============================================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    transition: background-color 0.7s ease, color 0.7s ease, border-color 0.7s ease;
    cursor: none !important;
}

/* ══ Gothic (default) ══ */
:root {
    --clr-main: #6d28d9;
    /* deep purple accent */
    --clr-main-light: #8b5cf6;
    --clr-main-dark: #3b0764;

    --clr-bg: #030006;
    /* almost pure black */
    --clr-bg-2: #050009;
    --clr-surface: #09000f;
    --clr-border: #160c28;

    --clr-cream: #e8d5ff;
    --clr-text: #ede8f5;
    --clr-muted: rgba(180, 160, 220, 0.28);

    --transition-fast: 220ms ease-out;
    --transition-mid: 400ms cubic-bezier(0.25, 1, 0.5, 1);
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--clr-bg);
    color: var(--clr-text);
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
    cursor: none;
    /* smooth theme switch */
    transition:
        background-color 0.7s ease,
        color 0.7s ease;
}

/* Hide scrollbar */
body::-webkit-scrollbar {
    display: none;
}

body {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

::selection {
    background: var(--clr-main);
    color: #fff;
}

/* ══ Modo Loira override ══ */
body.modo-loira {
    --clr-main: #b8860b;
    --clr-main-light: #d4a017;
    --clr-main-dark: #8b6508;

    --clr-bg: #f0e6c8;
    --clr-bg-2: #e8dab5;
    --clr-surface: #d9c99a;
    --clr-border: #c4a85a;

    --clr-cream: #fff8e7;
    --clr-text: #2e1f06;
    --clr-muted: rgba(46, 31, 6, 0.40);

    /* Navbar contrasts */
    --nav-logo-color: #332305;
    --nav-link-color: rgba(46, 31, 6, 0.65);
    --nav-link-hover: #000000;
}

body.modo-loira .navbar {
    mix-blend-mode: normal;
}

/* ══ Theme toggle button (now in navbar) ══ */
#modoLoiraBtn {
    background: rgba(255, 255, 255, 0.04);
    border: 1.5px solid rgba(168, 85, 247, 0.35);
    border-radius: 999px;
    padding: 0.45rem 1.25rem;
    font-family: 'Kavoon', cursive;
    font-size: 0.75rem;
    color: rgba(200, 170, 255, 0.8);
    letter-spacing: 0.08em;
    cursor: none !important;
    transition:
        background 0.35s ease,
        border-color 0.35s ease,
        color 0.35s ease,
        box-shadow 0.35s ease;
    user-select: none;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    margin-top: -0.25rem;
    /* helps vertically center it with flat text links */
}

#modoLoiraBtn:hover {
    background: rgba(124, 58, 237, 0.18);
    border-color: rgba(168, 85, 247, 0.7);
    color: #d8b4fe;
    box-shadow: 0 0 16px rgba(124, 58, 237, 0.3);
}

/* Button while in Loira mode */
body.modo-loira #modoLoiraBtn {
    background: rgba(46, 31, 6, 0.08);
    border-color: rgba(139, 101, 8, 0.5);
    color: rgba(80, 50, 0, 0.85);
}

body.modo-loira #modoLoiraBtn:hover {
    background: rgba(184, 134, 11, 0.15);
    border-color: #b8860b;
    color: #5a3800;
    box-shadow: 0 0 14px rgba(184, 134, 11, 0.25);
}