/* ═══════════════════════════════════════════════════════
   FORTITUDE — DESIGN SYSTEM
   Architectural Resilience. Built for the Competitive Woman.
   Ported from design/base-template/src/index.css (plain CSS, no Tailwind).
═══════════════════════════════════════════════════════ */

/* ── Custom Properties ────────────────────────────────── */

:root {
    /* Core brand tokens — all colors HSL space-separated for use with hsl() */
    --fortitude-primary: 335 75% 40%; /* deep raspberry */
    --fortitude-bg:      335 10% 10%; /* warm charcoal */
    --fortitude-text:    40  20% 94%; /* bone */
    --fortitude-muted:   335  8% 45%; /* muted warm grey */
    --fortitude-surface: 335 10% 14%; /* slightly lighter surface */
    --fortitude-border:  335 15% 22%; /* structural border */
    --fortitude-hover:   335 75% 50%; /* hover state +10% lightness */

    /* Typography */
    --font-display: 'Bricolage Grotesque', sans-serif;
    --font-body:    'Public Sans', sans-serif;

    /* Easing */
    --easing-standard: cubic-bezier(0.25, 0.1, 0.25, 1);

    /* Radius */
    --radius: 2px;
}

/* ── Base ─────────────────────────────────────────────── */

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background-color: hsl(var(--fortitude-bg));
    color: hsl(var(--fortitude-text));
    font-family: var(--font-body);
}

/* ── Typography utilities ─────────────────────────────── */

.font-display {
    font-family: var(--font-display);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.05em;
}

.font-brand {
    font-family: var(--font-display);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.03em;
}

.font-label {
    font-family: var(--font-body);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

/* ── Component utilities ──────────────────────────────── */

.btn-fortitude {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    background: hsl(var(--fortitude-primary));
    color: hsl(var(--fortitude-text));
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background 200ms var(--easing-standard);
}

.btn-fortitude:hover {
    background: hsl(var(--fortitude-hover));
}

.btn-fortitude-nav {
    font-size: 0.7rem;
    padding: 0.65rem 1.25rem;
}

.nav-link {
    color: inherit;
    text-decoration: none;
    opacity: 0.5;
    transition: opacity 200ms var(--easing-standard);
}

.nav-link:hover {
    opacity: 1;
}

.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    background: transparent;
    color: hsl(var(--fortitude-text));
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    border: 1.5px solid hsl(var(--fortitude-border));
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color 200ms var(--easing-standard),
                color 200ms var(--easing-standard);
}

.btn-ghost:hover {
    border-color: hsl(var(--fortitude-primary));
    color: hsl(var(--fortitude-primary));
}

.rule {
    border: none;
    border-top: 1px solid hsl(var(--fortitude-border));
    width: 100%;
}

.stat-block {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.stat-value {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(2rem, 5vw, 3.5rem);
    letter-spacing: -0.05em;
    text-transform: uppercase;
    color: hsl(var(--fortitude-primary));
    line-height: 1;
}

.stat-label {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: hsl(var(--fortitude-muted));
}

/* ── Animations ───────────────────────────────────────── */

@keyframes logo-pulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.02); }
    100% { transform: scale(1); }
}

.logo-o-pulse {
    animation: logo-pulse 0.8s var(--easing-standard) both;
    transform-origin: center;
}

.hero-vignette {
    background: linear-gradient(to right, hsl(var(--fortitude-bg)) 0%, transparent 30%);
}

@keyframes fade-up {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-up {
    animation: fade-up 0.6s var(--easing-standard) both;
}

.animate-fade-up-delay-1 { animation-delay: 0.1s; }
.animate-fade-up-delay-2 { animation-delay: 0.2s; }
.animate-fade-up-delay-3 { animation-delay: 0.3s; }
.animate-fade-up-delay-4 { animation-delay: 0.4s; }
.animate-fade-up-delay-5 { animation-delay: 0.6s; }

/* Alpine.js: hide elements with x-cloak until Alpine initializes */
[x-cloak] { display: none !important; }