/* ============================================================
   Design Tokens
============================================================ */
:root,
[data-theme="dark"] {
    --fx-bg: #0A0D0F;
    --fx-surface: #12171A;
    --fx-surface-2: #171D20;
    --fx-border: #232B2E;
    --fx-text: #EAEDEC;
    --fx-text-muted: #8B9694;
    --fx-accent: #16B897;
    --fx-accent-soft: rgba(22, 184, 151, 0.12);
    --fx-accent-2: #D8A947;
    --fx-loss: #E15353;
    --fx-loss-soft: rgba(225, 83, 83, 0.12);
    --fx-accent-contrast: #06110D;
}

[data-theme="light"] {
    --fx-bg: #F6F7F5;
    --fx-surface: #FFFFFF;
    --fx-surface-2: #FBFBFA;
    --fx-border: #E3E6E3;
    --fx-text: #12171A;
    --fx-text-muted: #5B6664;
    --fx-accent: #0E9A7D;
    --fx-accent-soft: rgba(14, 154, 125, 0.10);
    --fx-accent-2: #B8862F;
    --fx-loss: #C6373B;
    --fx-loss-soft: rgba(198, 55, 59, 0.10);
    --fx-accent-contrast: #FFFFFF;
}

/* ============================================================
   Base
============================================================ */
.fx-page {
    background: var(--fx-bg);
    color: var(--fx-text);
    font-family: 'Inter', sans-serif;
    transition: background 0.25s ease, color 0.25s ease;
}

.fx-display {
    font-family: 'Space Grotesk', sans-serif;
}

.fx-mono {
    font-family: 'IBM Plex Mono', monospace;
}

.fx-muted { color: var(--fx-text-muted); }
.fx-border { border-color: var(--fx-border); }
.fx-surface { background: var(--fx-surface); }

/* ============================================================
   Nav
============================================================ */
.fx-nav {
    background: color-mix(in srgb, var(--fx-bg) 85%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--fx-border);
}

.fx-nav-link {
    color: var(--fx-text-muted);
    transition: color 0.2s ease;
}
.fx-nav-link:hover { color: var(--fx-accent); }

/* ============================================================
   Theme Toggle
============================================================ */
.fx-toggle {
    width: 52px;
    height: 28px;
    border-radius: 999px;
    background: var(--fx-surface-2);
    border: 1px solid var(--fx-border);
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
}
.fx-toggle-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--fx-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.25s ease;
}
[data-theme="light"] .fx-toggle-knob {
    transform: translateX(24px);
}
.fx-toggle-knob svg { width: 13px; height: 13px; color: var(--fx-accent-contrast); }

/* ============================================================
   Buttons
============================================================ */
.fx-btn-primary {
    background: var(--fx-accent);
    color: var(--fx-accent-contrast);
    font-weight: 600;
    transition: transform 0.15s ease, opacity 0.15s ease;
}
.fx-btn-primary:hover { opacity: 0.9; transform: translateY(-1px); }

.fx-btn-ghost {
    background: transparent;
    color: var(--fx-text);
    border: 1px solid var(--fx-border);
    transition: border-color 0.2s ease, color 0.2s ease;
}
.fx-btn-ghost:hover { border-color: var(--fx-accent); color: var(--fx-accent); }

/* ============================================================
   Cards / Surfaces
============================================================ */
.fx-card {
    background: var(--fx-surface);
    border: 1px solid var(--fx-border);
    border-radius: 14px;
}

.fx-eyebrow {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fx-accent);
}

/* ============================================================
   Daily Ledger Ticker (signature element)
============================================================ */
.fx-ledger-wrap {
    border-top: 1px solid var(--fx-border);
    border-bottom: 1px solid var(--fx-border);
    background: var(--fx-surface);
    overflow: hidden;
    position: relative;
}
.fx-ledger-wrap::before,
.fx-ledger-wrap::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    width: 60px;
    z-index: 2;
    pointer-events: none;
}
.fx-ledger-wrap::before {
    left: 0;
    background: linear-gradient(90deg, var(--fx-surface), transparent);
}
.fx-ledger-wrap::after {
    right: 0;
    background: linear-gradient(270deg, var(--fx-surface), transparent);
}
.fx-ledger-track {
    display: flex;
    width: max-content;
    animation: fx-scroll 32s linear infinite;
}
.fx-ledger-wrap:hover .fx-ledger-track { animation-play-state: paused; }
@keyframes fx-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
.fx-ledger-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    border-right: 1px dashed var(--fx-border);
    white-space: nowrap;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.85rem;
}
.fx-ledger-date { color: var(--fx-text-muted); }
.fx-ledger-up { color: var(--fx-accent); font-weight: 600; }
.fx-ledger-down { color: var(--fx-loss); font-weight: 600; }

/* ============================================================
   Equity Curve
============================================================ */
.fx-curve-path {
    stroke-dasharray: 1400;
    stroke-dashoffset: 1400;
    transition: stroke-dashoffset 1.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.fx-curve-wrap.in-view .fx-curve-path {
    stroke-dashoffset: 0;
}
.fx-curve-fill {
    opacity: 0;
    transition: opacity 1.2s ease 0.6s;
}
.fx-curve-wrap.in-view .fx-curve-fill {
    opacity: 1;
}

/* ============================================================
   Donut ring
============================================================ */
.fx-donut-ring {
    stroke-dasharray: 251;
    stroke-dashoffset: 251;
    transition: stroke-dashoffset 1.4s ease;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
}
.fx-donut-wrap.in-view .fx-donut-ring {
    stroke-dashoffset: var(--fx-offset, 251);
}

/* ============================================================
   Scroll Reveal
============================================================ */
.fx-reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.fx-reveal.in-view {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .fx-ledger-track { animation: none; }
    .fx-reveal, .fx-curve-path, .fx-curve-fill, .fx-donut-ring {
        transition: none;
        opacity: 1;
        transform: none;
        stroke-dashoffset: 0;
    }
}

/* ============================================================
   FAQ details marker
============================================================ */
.fx-faq summary { list-style: none; }
.fx-faq summary::-webkit-details-marker { display: none; }
.fx-faq-icon { transition: transform 0.2s ease; }
.fx-faq[open] .fx-faq-icon { transform: rotate(45deg); }