/* ============================================================================
   Muscle Engineer — Design System  (v1, 2026)
   ----------------------------------------------------------------------------
   A single, shared SaaS-grade design layer for the unified public + trainee
   app. Loaded AFTER Bootstrap so component polish wins. Everything is driven
   by the design tokens in :root — change a token, change the whole product.

   Benchmarks: Stripe / Linear / Vercel / Notion (restraint, depth, motion).
   ========================================================================== */

:root {
    /* ---- Brand / primary (orange — same brand in light & dark) -------- */
    --p-50:#fff3ed;  --p-100:#ffe2d3; --p-200:#ffc3a3; --p-300:#ff9d6b;
    --p-400:#ff7a3d; --p-500:#ff5a1a; --p-600:#ff6a1a; --p-700:#cc3e00;
    --p-800:#9e3100; --p-900:#7a2600;
    /* Brand orange aligned to the design handoff (#ff6a1a). */
    --primary:#ff6a1a;
    --primary-rgb:255,106,26;
    --primary-hover:#ff8c3d;
    --gradient-brand:linear-gradient(135deg,#ff8c3d 0%,#e24c00 100%);
    --gradient-brand-soft:linear-gradient(135deg,#fff3ed 0%,#ffe2d3 100%);

    /* ---- Secondary / accent (cyan, darkened for light-bg contrast) ----- */
    --secondary:#0891b2; --secondary-rgb:8,145,178;

    /* ---- Semantic ----------------------------------------------------- */
    --success:#16a34a; --success-rgb:22,163,74;   --success-50:#ecfdf5;
    --warning:#d97706; --warning-rgb:217,119,6;   --warning-50:#fffbeb;
    --danger:#dc2626;  --danger-rgb:220,38,38;    --danger-50:#fef2f2;
    --info:#0ea5e9;    --info-rgb:14,165,233;     --info-50:#f0f9ff;

    /* ---- Neutral (slate) ---------------------------------------------- */
    --n-0:#ffffff;  --n-50:#f8fafc; --n-100:#f1f5f9; --n-200:#e2e8f0;
    --n-300:#cbd5e1; --n-400:#94a3b8; --n-500:#64748b; --n-600:#475569;
    --n-700:#334155; --n-800:#1e293b; --n-900:#0f172a;

    --bg:#f6f7fb;
    --surface:var(--n-0);
    --surface-2:var(--n-50);
    --text:var(--n-800);
    --text-muted:var(--n-500);
    --text-faint:var(--n-400);
    --border:var(--n-200);
    --border-strong:var(--n-300);

    /* ---- Radius ------------------------------------------------------- */
    --r-xs:8px; --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:24px; --r-2xl:30px; --r-pill:999px;

    /* ---- Spacing scale (4px base) ------------------------------------- */
    --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px;
    --s-8:32px; --s-10:40px; --s-12:48px; --s-16:64px;

    /* ---- Shadows (soft, slate-tinted) --------------------------------- */
    --sh-xs:0 1px 2px rgba(15,23,42,.06);
    --sh-sm:0 2px 8px rgba(15,23,42,.06);
    --sh-md:0 6px 20px rgba(15,23,42,.08);
    --sh-lg:0 16px 40px rgba(15,23,42,.12);
    --sh-xl:0 28px 70px rgba(15,23,42,.18);
    --sh-primary:0 10px 26px rgba(var(--primary-rgb),.35);
    --ring:0 0 0 4px rgba(var(--primary-rgb),.16);

    /* ---- Motion ------------------------------------------------------- */
    --ease:cubic-bezier(.4,0,.2,1);
    --ease-out:cubic-bezier(.16,1,.3,1);
    --t-fast:120ms; --t:200ms; --t-slow:320ms;

    /* ---- Map onto Bootstrap so utilities/components follow the system -- */
    --bs-body-bg:var(--bg);
    --bs-body-color:var(--text);
    --bs-secondary-color:var(--text-muted);
    --bs-border-color:var(--border);
    --bs-border-radius:var(--r-sm);
    --bs-border-radius-sm:var(--r-xs);
    --bs-border-radius-lg:var(--r-md);
    --bs-border-radius-xl:var(--r-lg);
    --bs-primary:var(--primary);
    --bs-primary-rgb:var(--primary-rgb);
    --bs-link-color:var(--primary);
    --bs-link-color-rgb:var(--primary-rgb);
    --bs-link-hover-color:var(--primary-hover);
    --bs-emphasis-color:var(--n-900);
}

/* ===== Base ============================================================== */
body {
    background:var(--bg);
    color:var(--text);
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}
::selection { background:rgba(var(--primary-rgb),.18); }

/* Typography hierarchy */
h1,h2,h3,h4,h5,h6,.fw-bold { letter-spacing:-.01em; color:var(--n-900); }
.text-muted { color:var(--text-muted)!important; }
.text-primary { color:var(--primary)!important; }
small,.small { font-size:.825rem; }
hr { border-color:var(--border); opacity:1; }

/* Accessible focus ring everywhere */
:focus-visible { outline:none; box-shadow:var(--ring); border-radius:var(--r-xs); }
a { text-decoration:none; transition:color var(--t-fast) var(--ease); }
a:hover { color:var(--primary-hover); }

/* ===== Buttons =========================================================== */
.btn {
    --bs-btn-border-radius:var(--r-sm);
    font-weight:600; letter-spacing:.005em; border-radius:var(--r-sm);
    padding:.58rem 1.1rem; transition:transform var(--t-fast) var(--ease),
        box-shadow var(--t) var(--ease), background var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.btn:active { transform:translateY(1px) scale(.99); }
.btn:focus-visible { box-shadow:var(--ring); }
.btn-lg { padding:.8rem 1.4rem; border-radius:var(--r-md); font-size:1.02rem; }
.btn-sm { padding:.36rem .75rem; border-radius:var(--r-xs); }

.btn-primary {
    background:var(--primary); border-color:var(--primary); color:#fff;
    box-shadow:0 6px 16px rgba(var(--primary-rgb),.28);
}
.btn-primary:hover,.btn-primary:focus { background:var(--primary-hover); border-color:var(--primary-hover); color:#fff; transform:translateY(-1px); box-shadow:var(--sh-primary); }

.btn-grad {
    background:var(--gradient-brand); border:0; color:#fff;
    box-shadow:0 8px 20px rgba(var(--primary-rgb),.30);
}
.btn-grad:hover,.btn-grad:focus { color:#fff; transform:translateY(-1px); box-shadow:var(--sh-primary); opacity:1; }

.btn-outline-primary { color:var(--primary); border-color:var(--border-strong); background:var(--surface); }
.btn-outline-primary:hover,.btn-outline-primary:focus { background:var(--primary); border-color:var(--primary); color:#fff; transform:translateY(-1px); box-shadow:0 6px 16px rgba(var(--primary-rgb),.25); }

.btn-light { background:var(--surface); border-color:var(--border); color:var(--text); }
.btn-light:hover { background:var(--surface-2); border-color:var(--border-strong); }
.btn-outline-secondary { color:var(--text-muted); border-color:var(--border); }
.btn-outline-secondary:hover { background:var(--surface-2); color:var(--text); border-color:var(--border-strong); }
.btn-success { background:var(--success); border-color:var(--success); }
.btn-danger  { background:var(--danger);  border-color:var(--danger); }
.btn-warning { background:var(--warning); border-color:var(--warning); color:#fff; }

/* ===== Forms ============================================================= */
.form-label { font-weight:600; font-size:.875rem; color:var(--n-700); margin-bottom:.4rem; }
.form-control,.form-select {
    border:1px solid var(--border-strong); border-radius:var(--r-sm);
    padding:.62rem .85rem; color:var(--text); background:var(--surface);
    transition:border-color var(--t-fast) var(--ease), box-shadow var(--t) var(--ease), background var(--t) var(--ease);
}
.form-control::placeholder { color:var(--text-faint); }
.form-control:focus,.form-select:focus {
    border-color:var(--primary); box-shadow:var(--ring); background:var(--surface);
}
.form-control:hover:not(:focus),.form-select:hover:not(:focus) { border-color:var(--n-400); }
.input-group-text { background:var(--surface-2); border:1px solid var(--border-strong); color:var(--text-muted); border-radius:var(--r-sm); }
.input-group > .form-control:not(:first-child){ border-inline-start:0; }
.form-control.is-invalid,.was-validated .form-control:invalid { border-color:var(--danger); }
.form-check-input { border-color:var(--border-strong); }
.form-check-input:checked { background-color:var(--primary); border-color:var(--primary); }
.form-check-input:focus { box-shadow:var(--ring); border-color:var(--primary); }

/* ===== Cards ============================================================= */
.card,.nv-card {
    background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
    box-shadow:var(--sh-sm);
}
.card { --bs-card-border-color:var(--border); --bs-card-border-radius:var(--r-lg); }
.card-hover,.is-clickable { transition:transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease-out), border-color var(--t) var(--ease); }
.card-hover:hover,.is-clickable:hover { transform:translateY(-3px); box-shadow:var(--sh-lg); border-color:var(--p-200); }

/* ===== Tables ============================================================ */
.table { --bs-table-border-color:var(--border); color:var(--text); vertical-align:middle; }
.table > thead { background:var(--surface-2); }
.table > thead th {
    text-transform:uppercase; font-size:.72rem; letter-spacing:.06em;
    color:var(--text-muted); font-weight:700; border-bottom:1px solid var(--border); padding:.8rem 1rem;
}
.table > tbody td { padding:.8rem 1rem; border-color:var(--border); }
.table-hover > tbody > tr { transition:background var(--t-fast) var(--ease); }
.table-hover > tbody > tr:hover > * { background:var(--surface-2); }
.table-responsive { border-radius:var(--r-md); }

/* ===== Alerts ============================================================ */
.alert { border:1px solid transparent; border-radius:var(--r-md); padding:.85rem 1rem; border-inline-start-width:4px; }
.alert-success { background:var(--success-50); border-color:rgba(var(--success-rgb),.25); border-inline-start-color:var(--success); color:#14532d; }
.alert-danger  { background:var(--danger-50);  border-color:rgba(var(--danger-rgb),.25);  border-inline-start-color:var(--danger);  color:#7f1d1d; }
.alert-warning { background:var(--warning-50); border-color:rgba(var(--warning-rgb),.25); border-inline-start-color:var(--warning); color:#78350f; }
.alert-info,.alert-primary { background:var(--info-50); border-color:rgba(var(--info-rgb),.25); border-inline-start-color:var(--info); color:#0c4a6e; }

/* ===== Badges ============================================================ */
.badge { font-weight:600; border-radius:var(--r-pill); padding:.36em .7em; letter-spacing:.01em; }
.badge.bg-primary-subtle{ background:var(--p-100)!important; color:var(--p-700)!important; }

/* ===== Modals ============================================================ */
.modal-content { border:0; border-radius:var(--r-xl); box-shadow:var(--sh-xl); overflow:hidden; }
.modal-header { border-bottom:1px solid var(--border); padding:1.1rem 1.25rem; }
.modal-body { padding:1.25rem; }
.modal-footer { border-top:1px solid var(--border); }
.modal-backdrop.show { background:rgba(15,23,42,.5); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); opacity:1; }
.modal.fade .modal-dialog { transform:translateY(16px) scale(.97); transition:transform var(--t-slow) var(--ease-out), opacity var(--t-slow) var(--ease-out); }
.modal.show .modal-dialog { transform:none; }

/* ===== Dropdowns ========================================================= */
.dropdown-menu {
    border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--sh-lg);
    padding:.4rem; margin-top:.5rem; animation:ds-pop var(--t) var(--ease-out);
}
@keyframes ds-pop { from { opacity:0; transform:translateY(-6px) scale(.98); } to { opacity:1; transform:none; } }
.dropdown-item { border-radius:var(--r-xs); padding:.5rem .75rem; font-weight:500; transition:background var(--t-fast) var(--ease); }
.dropdown-item:hover,.dropdown-item:focus { background:var(--p-50); color:var(--primary-hover); }
.dropdown-item.active,.dropdown-item:active { background:var(--primary); color:#fff; }
.dropdown-divider { border-color:var(--border); }

/* ===== Pagination ======================================================== */
.pagination { gap:.3rem; }
.page-link {
    border:1px solid var(--border); border-radius:var(--r-sm)!important; color:var(--text);
    min-width:40px; text-align:center; padding:.5rem .7rem; transition:all var(--t-fast) var(--ease);
}
.page-link:hover { background:var(--p-50); color:var(--primary-hover); border-color:var(--p-200); }
.page-item.active .page-link { background:var(--primary); border-color:var(--primary); color:#fff; box-shadow:0 4px 12px rgba(var(--primary-rgb),.3); }
.page-item.disabled .page-link { color:var(--text-faint); background:var(--surface-2); }

/* ===== Nav / tabs ======================================================== */
.nav-link { color:var(--text-muted); font-weight:600; transition:color var(--t-fast) var(--ease); }
.nav-link:hover { color:var(--primary); }
.nav-pills .nav-link.active { background:var(--primary); }

/* ===== Reusable utilities ================================================ */
.ds-section-title { font-weight:800; font-size:1.05rem; color:var(--n-900); letter-spacing:-.01em; }
.ds-eyebrow { text-transform:uppercase; letter-spacing:.08em; font-size:.72rem; font-weight:700; color:var(--primary); }
.ds-surface { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--sh-sm); }
.ds-divider { height:1px; background:var(--border); border:0; margin:var(--s-5) 0; }
.shadow-soft { box-shadow:var(--sh-md)!important; }
.rounded-2xl { border-radius:var(--r-xl)!important; }
.bg-app-grad { background:var(--gradient-brand); }
.text-grad { background:var(--gradient-brand); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* Stat card (dashboards) */
.ds-stat { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:var(--s-5); box-shadow:var(--sh-sm); transition:transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease-out); }
.ds-stat:hover { transform:translateY(-3px); box-shadow:var(--sh-lg); }
.ds-stat .ds-stat-ic { width:46px; height:46px; border-radius:var(--r-md); display:inline-flex; align-items:center; justify-content:center; font-size:1.2rem; }
.ds-stat .ds-stat-val { font-size:1.6rem; font-weight:800; color:var(--n-900); line-height:1.1; }
.ds-stat .ds-stat-label { color:var(--text-muted); font-size:.82rem; font-weight:600; }

/* Skeleton loading */
.ds-skeleton { background:linear-gradient(100deg,var(--n-100) 30%,var(--n-200) 50%,var(--n-100) 70%); background-size:200% 100%; animation:ds-shimmer 1.3s infinite; border-radius:var(--r-sm); }
@keyframes ds-shimmer { to { background-position:-200% 0; } }

/* Soft entrance for page content */
.ds-fade-up { animation:ds-fade-up var(--t-slow) var(--ease-out) both; }
@keyframes ds-fade-up { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }

/* ===== Motion preference ================================================= */
@media (prefers-reduced-motion: reduce) {
    *,*::before,*::after { animation-duration:.001ms!important; transition-duration:.001ms!important; }
}

/* ============================================================================
   THEME · ARENA (Set A)  —  scoped to the public homepage (<body class="theme-arena">)
   Re-maps the SAME token names to a dark, energetic palette so every
   token-based component (trainer section, cards, buttons…) flips automatically.
   Other pages keep the default light theme.
   ========================================================================== */
.theme-arena{
    --bg:#07080c;            /* aligned to handoff --bg-0 */
    --surface:#14161f;       /* handoff --surface (solid cards on dark) */
    --surface-2:#1a1d28;     /* handoff --surface-2 */
    --border:rgba(255,255,255,.09);
    --border-strong:rgba(255,255,255,.17);
    --text:#EEEEEE;
    --text-muted:rgba(238,238,238,.60);
    --text-faint:rgba(238,238,238,.38);

    --primary:#ff6a1a; --primary-rgb:255,106,26; --primary-hover:#ff8c3d;
    --secondary:#00F0FF; --secondary-rgb:0,240,255;

    --p-50:rgba(255,106,26,.10); --p-100:rgba(255,106,26,.20); --p-200:rgba(255,106,26,.34);
    --p-300:rgba(255,106,26,.5); --p-700:#ff8c3d;

    /* neutrals used as TEXT/headings → light; used as light surfaces → dark */
    --n-900:#FFFFFF; --n-800:#EEEEEE; --n-700:#D6D9E0; --n-600:#AEB2BC;
    --n-200:#222a39; --n-100:#171d29; --n-50:#11161f;

    --gradient-brand:linear-gradient(135deg,#ff8c3d 0%,#e24c00 100%);
    --gradient-brand-soft:linear-gradient(135deg, rgba(255,106,26,.16), rgba(0,240,255,.08));
    --ring:0 0 0 3px rgba(0,240,255,.45);
    --sh-sm:0 2px 10px rgba(0,0,0,.4);
    --sh-md:0 8px 24px rgba(0,0,0,.5);
    --sh-lg:0 22px 50px rgba(0,0,0,.6);
    --sh-primary:0 12px 30px rgba(255,106,26,.4);

    color:var(--text);
}
/* theme-arena lives on <html> (no-flash toggling); paint the glow on its body. */
.theme-arena body{
    background:
        radial-gradient(85% 45% at 88% -6%, rgba(255,106,26,.16), transparent 60%),
        radial-gradient(80% 55% at -8% 18%, rgba(0,240,255,.10), transparent 55%),
        var(--bg);
}
.theme-arena ::selection{ background:rgba(255,106,26,.35); color:#fff; }

/* dark chrome (the shared topbar/tabbar/footer use hardcoded light glass) */
/* Default: solid dark sticky top bar (used on all public pages except the hero). */
.theme-arena .app-topbar{
    background:rgba(8,12,20,.88);
    backdrop-filter:saturate(160%) blur(18px); -webkit-backdrop-filter:saturate(160%) blur(18px);
    border-bottom:1px solid var(--border);
}
/* Homepage ONLY: transparent bar that blends over the full-screen hero
   (theme-independent — the hero imagery is dark in both light & dark modes). */
.home-hero .app-topbar{
    position:absolute; top:0; inset-inline:0; z-index:1030;
    background:linear-gradient(180deg, rgba(8,12,20,.62) 0%, rgba(8,12,20,.18) 65%, transparent 100%);
    border-bottom:0; backdrop-filter:none; -webkit-backdrop-filter:none;
}
.home-hero .app-topbar .app-icon-btn,
.home-hero .app-topbar .app-user-chip{
    background:rgba(0,0,0,.32); border-color:rgba(255,255,255,.22);
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); color:#fff;
}
.home-hero .app-topbar .app-icon-btn:hover{ background:var(--primary); color:#0A0A0A; border-color:var(--primary); }
.home-hero .app-topbar .app-user-chip i{ color:var(--primary); }
.theme-arena .app-tabbar-inner{ background:rgba(13,16,23,.92); border:1px solid var(--border); }
/* footer: a defined section, not a void that blends into the background */
.theme-arena .main-footer{ background:#0C111B; border-top:1px solid var(--border); margin-top:1.5rem; padding:2.2rem 0 1.6rem; }
.theme-arena .app-icon-btn{ background:var(--surface); border-color:var(--border); color:var(--primary); }
.theme-arena .app-icon-btn:hover{ background:var(--primary); color:#0A0A0A; border-color:var(--primary); }
.theme-arena .app-user-chip{ background:var(--surface); border-color:var(--border); color:var(--text); }
.theme-arena .btn-grad{ color:#0A0A0A; }
.theme-arena .text-grad{ background:var(--gradient-brand); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ===== Page hero (design handoff: ghost word + kicker + big title) ========= */
.page-hero { position:relative; padding:14px 2px 18px; }
.page-hero > * { position:relative; z-index:1; }
.page-hero .hero-ghost {
    position:absolute; top:-8px; inset-inline-start:-6px; z-index:0;
    font-size:clamp(72px,26vw,120px); font-weight:900; line-height:1; letter-spacing:-4px;
    color:transparent; -webkit-text-stroke:1.4px rgba(150,160,180,.12);
    pointer-events:none; user-select:none; white-space:nowrap;
}
.kicker {
    display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
    font-size:.78rem; font-weight:700; color:var(--primary);
    background:rgba(var(--primary-rgb),.14); border:1px solid rgba(var(--primary-rgb),.25);
    padding:7px 14px; border-radius:var(--r-pill); margin-bottom:14px;
}
.page-hero .page-title {
    font-size:clamp(1.9rem,9vw,2.5rem); font-weight:900; line-height:1.05;
    letter-spacing:-.02em; margin:0 0 10px; color:var(--n-900);
}
.page-hero .page-title .accent { color:var(--primary); }
.page-hero .page-sub { font-size:.98rem; color:var(--text-muted); line-height:1.55; max-width:94%; margin:0; }