/* Body FX frontend design tokens. Video.js 8.10.0 (see assets/js/video.min.js). */

:root {
    --bfx-bg-page: #151514;
    --bfx-glass-bg: rgba(28, 28, 28, 0.72);
    --bfx-glass-bg-fallback: #1c1c1c;
    --bfx-glass-border: rgba(255, 255, 255, 0.12);
    --bfx-glass-blur: 18px;
    --bfx-shadow-header: 0 8px 32px rgba(0, 0, 0, 0.45);
    /* Layered depth for player & rails (watch surface) */
    --bfx-shadow-player-depth:
        0 0 0 1px rgba(0, 0, 0, 0.5),
        0 2px 4px rgba(0, 0, 0, 0.35),
        0 12px 28px rgba(0, 0, 0, 0.55),
        0 32px 64px rgba(0, 0, 0, 0.45);
    --bfx-shadow-up-next:
        0 2px 8px rgba(0, 0, 0, 0.4),
        0 8px 20px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.08);
    --bfx-shadow-up-next-hover:
        0 4px 12px rgba(0, 0, 0, 0.45),
        0 14px 28px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(255, 255, 255, 0.12);
    --bfx-radius-pill: 9999px;
    --bfx-radius-frame: 16px;
    --bfx-radius-card: 12px;
    /* Align with existing UI (e.g. .trial-btn, .my-list.active-link) */
    --bfx-accent: #f44336;
    --bfx-accent-hover: #e53935;
    --bfx-text: #ffffff;
    --bfx-text-muted: rgba(255, 255, 255, 0.65);
    /* Body copy under players & program blurbs — grey, not near-white or muddy dark grey */
    --bfx-text-description: rgba(255, 255, 255, 0.7);
    --bfx-siteheader-height: 96px;
    /* Fallback until main.js measures .footer */
    --footer-height: 104px;
    /* Bottom loading pill (non-blocking) — above glass scrims & footer, below header (999) */
    --bfx-loading-overlay-z: 100;
}

/* Previously undefined in style.css; used by .content-page padding-top */
:root {
    --siteheader-height: var(--bfx-siteheader-height);
}

@media (prefers-reduced-motion: reduce) {
    .siteheader .bfx-header-inner,
    .bfx-watch-player-frame,
    .bfx-up-next-card,
    .bfx-header-search-btn {
        transition: none !important;
    }
}