:root {
    --twc-primary: #6c4cf1;
    --twc-secondary: #9333ea;
    --twc-white: #FFFFFF;
    --twc-primary-rgb: 108, 76, 241;
    --twc-secondary-rgb: 108, 76, 241;
    --twc-white-rgb: 255, 255, 255;
}

body.fitness-color {
    background:
        radial-gradient(circle at top right, rgba(var(--twc-primary-rgb), 0.16), transparent 34%),
        radial-gradient(circle at bottom left, rgba(var(--twc-secondary-rgb), 0.14), transparent 34%),
        linear-gradient(180deg, var(--twc-white) 0%, var(--twc-white) 100%);
}

body.fitness-color,
body.fitness-color p,
body.fitness-color small,
body.fitness-color .content-color,
body.fitness-color .mobile-style-10 ul li .nav-item-link span {
    color: #000000 !important;
}

/* Headings are colored by each page (white on dark heroes, dark ink on
   light surfaces). Do NOT blanket-force a color here — it overrides those
   and makes white-on-dark headings invisible. Only color explicit helpers. */
body.fitness-color .title-color,
body.fitness-color .mobile-style-10 ul li .nav-item-link,
body.fitness-color .theme-form .form-group label {
    color: var(--twc-primary) !important;
}

/* Default ink for headings that don't set their own color (readable on light) */
body.fitness-color h1:not([class]),
body.fitness-color h2:not([class]),
body.fitness-color h3:not([class]),
body.fitness-color h4:not([class]),
body.fitness-color h5:not([class]),
body.fitness-color h6:not([class]) {
    color: #1a1039;
}

body.fitness-color .theme-bg-color,
body.fitness-color .btn-primary,
body.fitness-color .btn:not(.btn-outline):not(.btn-light):not(.btn-link),
body.fitness-color .fitness-btn,
body.fitness-color .start-button a,
body.fitness-color button:not(.theme-setting-button):not(.hero-slider-dot) {
    background: linear-gradient(135deg, #6c4cf1 0%, #9333ea 100%) !important;
    color: var(--twc-white) !important;
    border-color: transparent !important;
}

body.fitness-color .btn-light,
body.fitness-color .btn-outline-primary,
body.fitness-color .fitness-btn.white-btn,
body.fitness-color .fitness-btn.light-btn,
body.fitness-color .fitness-btn.gradient-border {
    background: var(--twc-white) !important;
    color: var(--twc-primary) !important;
    border-color: rgba(var(--twc-secondary-rgb), 0.42) !important;
}

/* Only skin real Bootstrap surfaces white. Do NOT use [class*="box/card/panel"]
   wildcards — they force solid white onto translucent/gradient custom boxes
   (hero stat chips, gradient icon tiles) and break them. */
body.fitness-color .card,
body.fitness-color .accordion-item,
body.fitness-color .list-group-item {
    background-color: var(--twc-white) !important;
    border-color: rgba(var(--twc-secondary-rgb), 0.24) !important;
}

body.fitness-color .theme-form .form-group .form-select,
body.fitness-color .theme-form .form-group .form-control,
body.fitness-color .form-control,
body.fitness-color .step-box-form .form-control {
    background: var(--twc-white) !important;
    color: var(--twc-primary) !important;
    border-color: rgba(var(--twc-secondary-rgb), 0.36) !important;
}

body.fitness-color .theme-form .form-group .form-select::placeholder,
body.fitness-color .theme-form .form-group .form-control::placeholder,
body.fitness-color .form-control::placeholder {
    color: rgba(0, 0, 0, 0.72) !important;
}

body.fitness-color .theme-form .form-group .form-select:focus,
body.fitness-color .theme-form .form-group .form-control:focus,
body.fitness-color .form-control:focus {
    border-color: rgba(var(--twc-primary-rgb), 0.72) !important;
    box-shadow: 0 0 0 0.18rem rgba(var(--twc-secondary-rgb), 0.2) !important;
}

body.fitness-color .alert-success,
body.fitness-color .badge.bg-success,
body.fitness-color .text-success {
    color: #000000 !important;
    border-color: rgba(var(--twc-secondary-rgb), 0.28) !important;
    background: rgba(var(--twc-secondary-rgb), 0.12) !important;
}

body.fitness-color .alert-danger,
body.fitness-color .badge.bg-danger,
body.fitness-color .text-danger,
body.fitness-color .text-warning {
    color: var(--twc-primary) !important;
    border-color: rgba(var(--twc-primary-rgb), 0.32) !important;
    background: rgba(var(--twc-primary-rgb), 0.12) !important;
}

body.fitness-color .mobile-style-10 ul li.active .nav-icon {
    background: linear-gradient(135deg, var(--twc-primary) 0%, var(--twc-secondary) 100%) !important;
    color: var(--twc-white) !important;
    box-shadow: 0 10px 22px rgba(var(--twc-primary-rgb), 0.24) !important;
}

body.fitness-color .divider,
body.fitness-color .or-divider::before,
body.fitness-color .horizontal-line,
body.fitness-color .step-divider {
    background-color: rgba(var(--twc-secondary-rgb), 0.2) !important;
    border-color: rgba(var(--twc-secondary-rgb), 0.2) !important;
}