/* FitHQ Custom Styles */

:root {
    --fithq-red: #dc3545; /* Bootstrap's danger red, can be changed to a custom "blood red" like #8b0000 */
    --fithq-dark-bg: #000000;
    --fithq-text: #f8f9fa; /* Bootstrap's light gray */
    --fithq-border: #495057; /* Bootstrap's gray-600 */
}

body {
    background-color: var(--fithq-dark-bg);
    color: var(--fithq-text);
}

.main-title, .navbar-brand strong {
    color: var(--fithq-red);
    font-weight: bold;
}

/* --- Navigation --- */
.navbar.bg-black {
    background-color: var(--fithq-dark-bg) !important;
    border-bottom: 1px solid var(--fithq-border);
}

/* --- Forms --- */
.form-control {
    background-color: transparent;
    border-color: var(--fithq-border);
    color: var(--fithq-text);
}

.form-control:focus {
    background-color: transparent;
    border-color: var(--fithq-red);
    color: var(--fithq-text);
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}

.form-floating > label {
    color: var(--fithq-border);
}

/* --- Buttons --- */
.btn-outline-danger {
    color: var(--fithq-red);
    border-color: var(--fithq-red);
}

.btn-outline-danger:hover {
    color: var(--fithq-text);
    background-color: var(--fithq-red);
    border-color: var(--fithq-red);
}