:root {
    --login-background: url("/clients/klemme/images/login_background.svg");
    --login-logo-width: 280px;
    --footer-logo-width: 100px;
    --home-logo-width: 260px;
    --home-logo-padding-top: 16px;
    --home-logo-padding-bottom: 16px;
    /* Brand Palette (Blue) */
    --brand-dark: #003E78;
    --brand-mid: #005AAB;
    --brand-light: #2B7CC4;
    --brand-pale: #E6F1FA;
    /* Brand Secondary Palette (Red) */
    --brand-secondary-dark: #C92B2A;
    --brand-secondary-mid: #EF3F3E;
    --brand-secondary-light: #F36A69;
    --brand-secondary-pale: #FDECEC;
    /* Focus Ring */
    --focus-ring-color: rgba(0, 62, 120, 0.3);
    /* 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);
}

.navbar-gradient {
    background: linear-gradient(270deg,var(--brand-dark) 0%, var(--brand-secondary-dark) 100%);
}

.navbar-logo {
    height: 48px;
}

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

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

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