/* =============================================================================
   Design tokens
   Paleta análoga ao wallpaper: noite, aço e gelo. Sem roxo e sem laranja.
   ========================================================================== */

:root {
    /* --- Superfícies ---------------------------------------------------- */
    --bg: #080e1a;
    --bg-deep: #050910;
    --surface: rgba(142, 197, 255, 0.055);
    --surface-strong: rgba(142, 197, 255, 0.1);

    --hairline: rgba(196, 220, 255, 0.14);
    --hairline-soft: rgba(196, 220, 255, 0.07);

    /* --- Texto ---------------------------------------------------------- */
    --text: #e8eef8;
    --muted: rgba(214, 226, 245, 0.74);
    --muted-soft: rgba(214, 226, 245, 0.5);

    /* --- Marca: família do azul ----------------------------------------- */
    --navy: #10203a;
    --steel: #3d7fd6;
    --ice: #b9d6ff;
    --frost: #e7f1ff;

    --accent: #8ec5ff;
    --accent-strong: #5aa6ff;
    --accent-soft: rgba(142, 197, 255, 0.14);

    --gradient-text: linear-gradient(100deg, var(--frost) 0%, var(--ice) 42%, var(--accent-strong) 100%);
    --gradient-rule: linear-gradient(90deg, #1b3f73, var(--steel), var(--ice));

    /* --- Tipografia ----------------------------------------------------- */
    --font-display: "Playfair Display", Georgia, serif;
    --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-ui: "Montserrat", var(--font-body);

    --text-hero: clamp(3.25rem, 10.5vw, 8.25rem);
    --text-display: clamp(2.1rem, 4.3vw, 4rem);
    --text-h2: clamp(1.6rem, 2.6vw, 2.4rem);
    --text-h3: clamp(1.25rem, 1.8vw, 1.6rem);
    --text-lead: clamp(1.05rem, 0.4vw + 0.95rem, 1.25rem);
    --text-base: 1rem;
    --text-sm: 0.9375rem;
    --text-caption: 0.8125rem;
    --text-kicker: 0.75rem;

    --tracking-kicker: 0.08em;
    --tracking-ui: 0.04em;
    --tracking-display: -0.02em;
    --tracking-hero: -0.03em;

    /* --- Espaçamento & grid --------------------------------------------- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 2.5rem;
    --space-8: 3rem;
    --space-9: 4rem;
    --space-10: 5rem;

    --container: 1320px;
    --gutter: 4rem;
    --reading: 62ch;
    --section-spacing: clamp(5rem, 10vw, 10rem);
    --header-height: 4.75rem;

    /* --- Elevação ------------------------------------------------------- */
    --shadow-soft: 0 24px 70px rgba(2, 6, 14, 0.55);
    --shadow-lift: 0 32px 90px rgba(2, 6, 14, 0.7);
    --glow-ice: 0 0 40px rgba(142, 197, 255, 0.18);

    /* --- Movimento ------------------------------------------------------ */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --duration-fast: 200ms;
    --duration-base: 320ms;
    --duration-slow: 720ms;

    /* --- Camadas -------------------------------------------------------- */
    --z-header: 100;
    --z-overlay: 200;
}

/* Acentos por jogo, todos dentro da família do azul. */
[data-game="genshin"] {
    --accent: #9fd0ff;
    --accent-soft: rgba(159, 208, 255, 0.14);
}

[data-game="star-rail"] {
    --accent: #6aa8ff;
    --accent-soft: rgba(106, 168, 255, 0.14);
}

[data-game="zenless"] {
    --accent: #5ec8e0;
    --accent-soft: rgba(94, 200, 224, 0.14);
}

@media (max-width: 40em) {
    :root {
        --gutter: 2rem;
    }
}