:root {
    --login-background: url("/clients/carsystem/images/login_background.svg");
    --login-logo-width: 120px;    
    --footer-logo-width: 100px;
    --home-logo-width: 120px;
    --home-logo-padding-top: 16px;
    --home-logo-padding-bottom: 16px;    
    /* Brand Palette */
    --brand-secondary-dark: #E20613;
    --brand-secondary-mid: #F23A45;
    --brand-secondary-light: #F76B73;
    --brand-secondary-pale: #FDEBEC;
    /* Brand Secondary Palette */
    --brand-dark: #333333;
    --brand-mid: #666666;
    --brand-light: #F0F0F0;
    --brand-pale: #FAFAFA;
    /* Focus Ring */
    --focus-ring-color: rgba(51, 51, 51, 0.30);
    /* Text */
    --text-primary: var(--brand-dark);
    --text-secondary: var(--brand-dark);
    --text-muted: #7A96A8;
    --text-on-brand: #FFFFFF;
    --text-light-color: #FFFFFF;
    --text-dark-color: #212529;
    /* Icon */
    --icon-color: var(--brand-secondary-dark);
    /* Table */
    --data-table-header-color: var(--brand-secondary-dark);
    --data-table-header-text-color: var(--text-on-brand);
    --data-table-border-color: var(--brand-pale);
    /* Badge */
    --item-count-badge-color: var(--brand-dark);
    /* Card */
    --card-header-background: var(--brand-pale);
    /* Form */
    --form-label-color: var(--text-secondary);
    /* General Pages */
    --page-title-color: var(--text-secondary);
    --page-subtitle-color: var(--text-muted);
    /* Login Page*/
    --login-title-color: var(--brand-dark);
    --terms-link-color: var(--brand-dark);
    --terms-link-hover-color: var(--brand-mid);
    --login-page-footer-background-color: var(--brand-mid);
    /* Input Focus */
    --input-focus-border: var(--brand-mid);
}

/* Navbar CSS */
.navbar-gradient {
    background: var(--brand-pale);
}

.navbar-logo {
    height: 48px;
}

.navbar .nav-link {
    transition: all 0.2s ease;
}

.navbar .nav-link:hover {
    background-color: rgb(0, 0, 0, 0.15);
    transform: translateY(-1px);
}

.nav-link-color {
    color: var(--text-dark-color) !important;
}

/* Login Page Footer CSS */
.page-subfooter__social {
    list-style: none;
    padding: 0;
    display: flex;
    gap: 15px;
}

.page-subfooter__social li a {
    color: #333;
    font-size: 20px;
    transition: color 0.3s;
}

.page-subfooter__social li a:hover {
    color: #007bff; /* Change color on hover */
}

footer.page-footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: var(--login-page-footer-background-color);
}

/* Mobile devices */
@media (max-width: 767.98px) {
    footer.page-footer {
        position: static;
    }
}