.fh-root {
    font-family: Manrope, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    line-height: normal;

    --fh-canvas: #050508;
    --fh-surface: #FFFFFF;
    --fh-on-surface: #050508;
    --fh-text: #FFFFFF;
    --fh-text-soft: #E7E7E8;
    --fh-text-faint: #B8B8BB;
    --fh-video-card: #5A5A61;
    --fh-whatsapp: #BACFBE;
    --fh-discord: #DADCF2;
    --fh-instagram: #EDCEDF;

    /* Ocean values double as the fallback for unknown presets */
    --fh-accent-1: #0000FF;
    --fh-accent-2: #C7FF00;
    --fh-tint: #CCCCFF;
    --fh-body: #000033;

    --fh-glow-core: var(--fh-tint);

    /* Hero wash. Mirrors the app's --gradient-rise-blue stop timing: dark canvas
       across the top, a fast ramp, then the accent pooled behind the anchors at
       the bottom. Themes vary it automatically through their own tokens. */
    --fh-hero-glow: linear-gradient(
        0deg,
        var(--fh-glow-core) 0%,
        var(--fh-accent-1) 32%,
        var(--fh-body) 58%,
        var(--fh-canvas) 84%,
        var(--fh-canvas) 100%
    );

    --fh-wave: var(--fh-accent-2);
    --fh-flower: var(--fh-accent-2);
    --fh-blob-video: var(--fh-accent-2);
    --fh-blob-map: var(--fh-accent-1);
    --fh-tint-circles: var(--fh-tint);
    --fh-chip-bg: var(--fh-accent-1);
    --fh-chip-text: #FFFFFF;
    --fh-city: var(--fh-accent-1);
    --fh-map-dots: #FFFFFF;
}

.fh-theme-ocean {
    --fh-accent-1: #0000FF;
    --fh-accent-2: #C7FF00;
    --fh-tint: #CCCCFF;
    --fh-body: #000033;
}

.fh-theme-ruby {
    --fh-accent-1: #FF0004;
    --fh-accent-2: #FFA600;
    --fh-tint: #FFA3A5;
    --fh-glow-core: #FFCCCD;
    --fh-body: #260001;
}

.fh-theme-forest {
    --fh-accent-1: #4C096C;
    --fh-accent-2: #00FFF2;
    --fh-tint: #DBCEE2;
    --fh-body: #0F0216;
}

.fh-theme-rose {
    --fh-accent-1: #FF00DD;
    --fh-accent-2: #00FFF2;
    --fh-tint: #E2CEDF;
    --fh-body: #2F0829;
}

.fh-theme-stone {
    --fh-accent-1: #5A5A61;
    --fh-accent-2: #FFFFFF;
    --fh-tint: #FFFFFF;
    --fh-glow-core: #DCDCDD;
    --fh-body: #17171D;
    --fh-flower: #3E3E46;
    --fh-blob-video: #3E3E46;
    --fh-blob-map: #3E3E46;
    --fh-chip-bg: #3E3E46;
    --fh-city: #3E3E46;
}

.fh-theme-cyan {
    --fh-accent-1: #FBD404;
    --fh-accent-2: #6A00FF;
    --fh-tint: #FFF7CC;
    --fh-body: #332C01;
    --fh-chip-text: #17171D;
    --fh-city: #332C01;
    --fh-map-dots: #050508;
}

.fh-theme-amber {
    --fh-accent-1: #C7FF00;
    --fh-accent-2: #FFEE00;
    --fh-tint: #F4FFCC;
    --fh-body: #141A00;
    --fh-chip-text: #050508;
    --fh-city: #779900;
    --fh-map-dots: #050508;
}

/* Staggered entrance — mirrors the app's `.u-stagger`: drop `fh-stagger` on a
   container and its direct children fade-in-up in sequence. Self-contained here
   because the SSR host loads only the token stylesheets, not the shared
   animation/utility CSS. `backwards` fill (never `both`) so the released
   transform can't override a child's own :hover/:active transform. */
@keyframes fh-fade-in-up {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.fh-stagger > * {
    animation: fh-fade-in-up var(--fh-stagger-duration, 400ms) ease backwards;
    animation-delay: calc(var(--fh-stagger-delay, 0ms) + var(--fh-stagger-step, 70ms) * var(--fh-stagger-i, 0));
}

.fh-stagger > *:nth-child(1) { --fh-stagger-i: 0; }
.fh-stagger > *:nth-child(2) { --fh-stagger-i: 1; }
.fh-stagger > *:nth-child(3) { --fh-stagger-i: 2; }
.fh-stagger > *:nth-child(4) { --fh-stagger-i: 3; }
.fh-stagger > *:nth-child(5) { --fh-stagger-i: 4; }
.fh-stagger > *:nth-child(6) { --fh-stagger-i: 5; }
.fh-stagger > *:nth-child(n+7) { --fh-stagger-i: 6; }

@media (prefers-reduced-motion: reduce) {
    .fh-stagger > * {
        animation: none;
    }
}