/* ---------------------------------------------------------
   "Signal" design system — plain CSS, no build step.
   Palette: deep emerald + teal + quiet blue, cool paper bg
   Type: Fraunces (display) / Inter (body) / IBM Plex Mono (data)
---------------------------------------------------------- */

body {
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    background-color: #fbfdfc;
    color: #0b1620;
}

.font-display { font-family: 'Fraunces', ui-serif, Georgia, serif; }
.font-mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; }

/* Signature gradient — emerald to teal to quiet blue */
.gradient-signal {
    background: linear-gradient(135deg, #0f9d74 0%, #14b8a6 55%, #3b6fe0 100%);
}

.text-gradient-signal {
    background: linear-gradient(135deg, #0f9d74 0%, #14b8a6 55%, #3b6fe0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Soft ambient mesh used behind hero/auth sections */
.mesh-glow {
    background:
        radial-gradient(40% 40% at 20% 20%, rgba(15, 157, 116, 0.18), transparent 70%),
        radial-gradient(45% 45% at 85% 15%, rgba(59, 111, 224, 0.14), transparent 70%),
        radial-gradient(35% 35% at 60% 80%, rgba(20, 184, 166, 0.14), transparent 70%);
}

/* Reveal-on-scroll (driven by public/js/app.js IntersectionObserver) */
[data-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
[data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

:focus-visible {
    outline: 2px solid #0f9d74;
    outline-offset: 2px;
}

[x-cloak] { display: none !important; }