:root {
    /* --- Main Brand Colors --- */
    --brand-primary: #005f69;       /* Deep Teal - Main Brand Primary */
    --brand-orange: #f26f33;        /* Bright Orange - Primary Accent */
    --brand-black: #000000;
    --brand-white: #ffffff;

    /* --- Quality - Trust - Sustainability Palette --- */
    --brand-quality-teal: #015f69;  /* Quality Teal */
    --brand-quality-green: #004b44; /* Deep Academic Green */

    /* --- Art - Inspiration - Happiness - Leadership Palette --- */
    --brand-art-orange: #f16f33;    /* Artistic Orange */
    --brand-art-yellow: #fcd204;    /* Happiness Yellow */
    --brand-art-purple: #46286e;    /* Leadership Purple */

    /* --- Creativity - Technology Palette --- */
    --brand-tech-blue: #254286;     /* Creative Blue */
    --brand-tech-dark: #1c2d59;     /* Deep Tech Navy */

    /* --- Subtle Translucent Variations (for backgrounds & alerts) --- */
    --brand-primary-light: rgba(0, 95, 105, 0.08);
    --brand-orange-light: rgba(242, 111, 51, 0.08);
    --brand-quality-light: rgba(1, 95, 105, 0.08);
    --brand-green-light: rgba(0, 75, 68, 0.08);
    --brand-art-light: rgba(241, 111, 51, 0.08);
    --brand-yellow-light: rgba(252, 210, 4, 0.12);
    --brand-purple-light: rgba(70, 40, 110, 0.08);
    --brand-blue-light: rgba(37, 66, 134, 0.08);
}

/* ==========================================
   1. Brand Text Color Utilities
   ========================================== */
.text-brand-primary { color: var(--brand-primary) !important; }
.text-brand-orange { color: var(--brand-orange) !important; }
.text-brand-quality { color: var(--brand-quality-teal) !important; }
.text-brand-green { color: var(--brand-quality-green) !important; }
.text-brand-art { color: var(--brand-art-orange) !important; }
.text-brand-yellow { color: var(--brand-art-yellow) !important; }
.text-brand-purple { color: var(--brand-art-purple) !important; }
.text-brand-blue { color: var(--brand-tech-blue) !important; }
.text-brand-navy { color: var(--brand-tech-dark) !important; }

/* ==========================================
   2. Brand Background Color Utilities
   ========================================== */
.bg-brand-primary { background-color: var(--brand-primary) !important; }
.bg-brand-orange { background-color: var(--brand-orange) !important; }
.bg-brand-quality { background-color: var(--brand-quality-teal) !important; }
.bg-brand-green { background-color: var(--brand-quality-green) !important; }
.bg-brand-art { background-color: var(--brand-art-orange) !important; }
.bg-brand-yellow { background-color: var(--brand-art-yellow) !important; }
.bg-brand-purple { background-color: var(--brand-art-purple) !important; }
.bg-brand-blue { background-color: var(--brand-tech-blue) !important; }
.bg-brand-navy { background-color: var(--brand-tech-dark) !important; }

/* Light/Soft Backgrounds */
.bg-brand-primary-light { background-color: var(--brand-primary-light) !important; }
.bg-brand-orange-light { background-color: var(--brand-orange-light) !important; }
.bg-brand-green-light { background-color: var(--brand-green-light) !important; }
.bg-brand-yellow-light { background-color: var(--brand-yellow-light) !important; }
.bg-brand-purple-light { background-color: var(--brand-purple-light) !important; }
.bg-brand-blue-light { background-color: var(--brand-blue-light) !important; }

/* ==========================================
   3. Brand Border Utilities
   ========================================== */
.border-brand-primary { border-color: var(--brand-primary) !important; }
.border-brand-orange { border-color: var(--brand-orange) !important; }
.border-brand-quality { border-color: var(--brand-quality-teal) !important; }
.border-brand-green { border-color: var(--brand-quality-green) !important; }
.border-brand-blue { border-color: var(--brand-tech-blue) !important; }
.border-brand-purple { border-color: var(--brand-art-purple) !important; }

/* Border accent for cards/headers */
.border-left-brand-primary { border-left: 4px solid var(--brand-primary) !important; }
.border-left-brand-orange { border-left: 4px solid var(--brand-orange) !important; }
.border-left-brand-green { border-left: 4px solid var(--brand-quality-green) !important; }
.border-left-brand-blue { border-left: 4px solid var(--brand-tech-blue) !important; }

/* ==========================================
   4. Custom Brand Outline Buttons (Complementing Bootstrap 5)
   ========================================== */
.btn-outline-brand-primary {
    color: var(--brand-primary);
    border-color: var(--brand-primary);
    background-color: transparent;
    transition: all 0.2s ease-in-out;
}
.btn-outline-brand-primary:hover,
.btn-outline-brand-primary:focus,
.btn-outline-brand-primary:active {
    color: var(--brand-white);
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

.btn-outline-brand-orange {
    color: var(--brand-orange);
    border-color: var(--brand-orange);
    background-color: transparent;
    transition: all 0.2s ease-in-out;
}
.btn-outline-brand-orange:hover,
.btn-outline-brand-orange:focus,
.btn-outline-brand-orange:active {
    color: var(--brand-white);
    background-color: var(--brand-orange);
    border-color: var(--brand-orange);
}

.btn-outline-brand-green {
    color: var(--brand-quality-green);
    border-color: var(--brand-quality-green);
    background-color: transparent;
    transition: all 0.2s ease-in-out;
}
.btn-outline-brand-green:hover,
.btn-outline-brand-green:focus,
.btn-outline-brand-green:active {
    color: var(--brand-white);
    background-color: var(--brand-quality-green);
    border-color: var(--brand-quality-green);
}

.btn-outline-brand-blue {
    color: var(--brand-tech-blue);
    border-color: var(--brand-tech-blue);
    background-color: transparent;
    transition: all 0.2s ease-in-out;
}
.btn-outline-brand-blue:hover,
.btn-outline-brand-blue:focus,
.btn-outline-brand-blue:active {
    color: var(--brand-white);
    background-color: var(--brand-tech-blue);
    border-color: var(--brand-tech-blue);
}

.btn-outline-brand-purple {
    color: var(--brand-art-purple);
    border-color: var(--brand-art-purple);
    background-color: transparent;
    transition: all 0.2s ease-in-out;
}
.btn-outline-brand-purple:hover,
.btn-outline-brand-purple:focus,
.btn-outline-brand-purple:active {
    color: var(--brand-white);
    background-color: var(--brand-art-purple);
    border-color: var(--brand-art-purple);
}

/* Ensure smooth hover transition and icon gap for template buttons */
.btn-template {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}