:root {
    --brand-red: #F21822;
    --brand-red-hover: #D9131C;
    --brand-red-soft: #FFE8EA;

    --brand-grey-900: #4A4A4A;
    --brand-grey-700: #707070;
    --brand-grey-500: #8F8F8F;
    --brand-grey-300: #D6D6D6;
    --brand-grey-100: #F5F5F5;

    --brand-white: #FFFFFF;
    --brand-success: #067647;
    --brand-success-soft: #ECFDF3;
    --brand-warning: #B54708;
    --brand-warning-soft: #FFF7ED;
    --brand-danger: #D9131C;
    --brand-danger-soft: #FFE8EA;

    /* Portal hierarchy tokens */
    --ui-title: #2f3338;
    --ui-section-title: #334155;
    --ui-record-title: #1f2937;
    --ui-meta-text: #4b5563;
    --ui-meta-value: #374151;
    --ui-support: #8F8F8F;

    --icon-brand: #067647;
    --icon-section: #3f6b55;
    --icon-document: #334155;
    --icon-info: #5b7c99;
    --icon-location: #3d7a7a;
    --icon-package: #a16207;
    --icon-success: #067647;
    --icon-warning: #a16207;
    --icon-danger: #b42318;
    --icon-neutral: #8F8F8F;

    --badge-blue-bg: #eff6ff;
    --badge-blue-text: #1d4f91;
    --badge-blue-border: #bfdbfe;
    --badge-indigo-bg: #eef2ff;
    --badge-indigo-text: #4338ca;
    --badge-indigo-border: #c7d2fe;
    --badge-purple-bg: #f5f3ff;
    --badge-purple-text: #6d28d9;
    --badge-purple-border: #ddd6fe;
    --badge-teal-bg: #f0fdfa;
    --badge-teal-text: #0f766e;
    --badge-teal-border: #99f6e4;
}

.brand-logo {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    object-fit: contain;
}

.brand-logo--sidebar {
    width: auto;
    height: 40px;
    max-width: 90px;
    object-fit: contain;
}

.brand-logo--header {
    width: auto;
    height: 46px;
    max-width: 110px;
    object-fit: contain;
}

.brand-logo--login {
    width: auto;
    height: 110px;
    max-width: 260px;
    object-fit: contain;
}

.brand-logo--pdf {
    width: auto;
    height: auto;
    max-height: 120px;
    max-width: 240px;
    object-fit: contain;
}

.brand-logo-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    border-radius: 8px;
    background: #FFFFFF;
}

.brand-bg-primary {
    background-color: var(--brand-red);
}

.brand-text-primary {
    color: var(--brand-red);
}

.brand-border-primary {
    border-color: var(--brand-red);
}

.brand-button-primary {
    border-color: var(--brand-red);
    background-color: var(--brand-red);
    color: #FFFFFF;
}

.brand-button-primary:hover {
    border-color: var(--brand-red-hover);
    background-color: var(--brand-red-hover);
}

.brand-link {
    color: var(--brand-red);
}

.brand-link:hover {
    color: var(--brand-red-hover);
}