/* Commit2Fit — signature styles layered on top of Tailwind.
   Palette:
     --night   #0B0E1A  deep indigo background
     --mint     #00E5A0  success / money-back accent
     --coral    #FF5C8A  action / energy
     --gold     #FFD23F  reward / gamification
     --paper    #F4F6FB  light surface
*/

:root {
    --night: #0B0E1A;
    --night-2: #121730;
    --mint: #00E5A0;
    --coral: #FF5C8A;
    --gold: #FFD23F;
    --paper: #F4F6FB;
    --muted: #9AA3B2;
}

/* Display + body type pairing.
   Display: "Clash Display"-style geometric via Space Grotesk (loaded in layout).
   Body: Inter. Distinct from the default system stack. */
body {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    background: var(--night);
    color: var(--paper);
    -webkit-font-smoothing: antialiased;
}

.font-display {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    letter-spacing: -0.02em;
}

/* Ambient glow behind the hero — the "stakes on the table" mood. */
.glow-bg {
    position: relative;
    overflow: hidden;
}
.glow-bg::before {
    content: '';
    position: absolute;
    inset: -20% -10% auto -10%;
    height: 60%;
    background:
        radial-gradient(40% 60% at 25% 20%, rgba(0, 229, 160, 0.18), transparent 70%),
        radial-gradient(45% 55% at 80% 10%, rgba(255, 92, 138, 0.16), transparent 70%);
    filter: blur(20px);
    pointer-events: none;
    z-index: 0;
}

/* Pill button — primary action. */
.btn-primary {
    background: var(--mint);
    color: var(--night);
    font-weight: 700;
    border-radius: 999px;
    transition: transform .15s ease, box-shadow .15s ease;
    box-shadow: 0 8px 24px rgba(0, 229, 160, 0.25);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0, 229, 160, 0.35); }

.btn-coral {
    background: var(--coral);
    color: #fff;
    font-weight: 700;
    border-radius: 999px;
    transition: transform .15s ease, box-shadow .15s ease;
    box-shadow: 0 8px 24px rgba(255, 92, 138, 0.25);
}
.btn-coral:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(255, 92, 138, 0.35); }

/* Glass card. */
.card-glass {
    background: rgba(18, 23, 48, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1.25rem;
    backdrop-filter: blur(8px);
}

/* Reveal-on-load. */
@keyframes rise {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
.rise { animation: rise .6s cubic-bezier(.2,.7,.2,1) both; }
.rise-1 { animation-delay: .05s; }
.rise-2 { animation-delay: .15s; }
.rise-3 { animation-delay: .25s; }

@media (prefers-reduced-motion: reduce) {
    .rise { animation: none; }
    .btn-primary:hover, .btn-coral:hover { transform: none; }
}

/* Focus visibility for keyboard users. */
a:focus-visible, button:focus-visible, input:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}