/**
 * Copyright © 2026 Living Legacy LLC d/b/a Legacy Health and Fitness. All Rights Reserved.
 * Proprietary and confidential. Unauthorized use, copying, or distribution
 * is prohibited. See LICENSE file in project root.
 */

/* ============================================================
   PREMIUM RE-THEME — member portal (feat/premium-redesign)
   Loaded AFTER member.html's inline <style> block. Re-keys the
   portal's OWN token names to the premium palette
   (spec: docs/design-tokens/README.md) and upgrades primary
   buttons to the gradient + glow anatomy. Markup untouched.

   A11y guard: --text-body/--text-muted/--text-faint were raised
   in the 2026-06-07 WCAG audit; this layer only moves them to
   equal-or-lighter values so every audited contrast ratio holds.
   ============================================================ */

:root {
    /* Surfaces → premium near-black (slightly blue) scale */
    --bg-0: #08080b;
    --bg-1: #0d0d11;
    --bg-2: #131318;
    --bg-3: #17171d;
    --card-bg: rgba(19, 19, 24, 0.92);
    --card-bg-alt: rgba(13, 13, 17, 0.95);

    /* Text — headings to premium white; body values only lightened */
    --text-hi: #f4f4f6;
    --text-muted: #a6a6b0;

    /* Elevation — softer, deeper premium card shadow */
    --shadow-card: 0 10px 32px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255, 255, 255, 0.05) inset;

    /* Premium primitives for this layer */
    --pr-btn-gradient: linear-gradient(180deg, #ff8c5a, #f2521b);
    --pr-btn-glow: 0 10px 30px -8px rgba(255, 107, 53, 0.55),
                   0 2px 8px rgba(0, 0, 0, 0.4),
                   inset 0 1px 0 rgba(255, 255, 255, 0.25);
    --pr-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* One warm radial glow on the page base (one per screen, max). */
body {
    background: radial-gradient(900px 520px at 82% -8%, rgba(255, 107, 53, 0.09), transparent 62%),
                var(--bg-1);
}

/* ─── Primary buttons → gradient + glow anatomy ─────────────────────────
   .btn is the portal's primary; variants (.btn-secondary/.btn-outline/
   .btn-ghost) are composite classes on the same element, so exclude them
   here or this later-cascade rule would clobber their transparent fills. */
.btn:not(.btn-secondary):not(.btn-outline):not(.btn-ghost) {
    background: var(--pr-btn-gradient);
    border-radius: 12px;
    box-shadow: var(--pr-btn-glow);
    transition: transform 0.25s var(--pr-ease), box-shadow 0.25s var(--pr-ease);
}
.btn:not(.btn-secondary):not(.btn-outline):not(.btn-ghost):hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 36px -8px rgba(255, 107, 53, 0.65),
                0 3px 10px rgba(0, 0, 0, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.btn:not(.btn-secondary):not(.btn-outline):not(.btn-ghost):active {
    transform: translateY(0) scale(0.98);
}

/* Variants keep their outline anatomy, adopt premium geometry */
.btn-secondary,
.btn-outline,
.btn-ghost {
    border-radius: 12px;
    transition: background 0.25s var(--pr-ease), border-color 0.25s var(--pr-ease);
}
.btn-secondary:hover,
.btn-outline:hover {
    background: rgba(255, 107, 53, 0.10);
}
.btn-ghost:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.22);
}

@media (prefers-reduced-motion: reduce) {
    .btn:not(.btn-secondary):not(.btn-outline):not(.btn-ghost),
    .btn-secondary,
    .btn-outline,
    .btn-ghost {
        transition: none;
    }
}