:root {
    --color-black: #000000;
    --color-dark-gray: #1A1A1A;
    --color-white: #FFFFFF;
    --color-gray: #707070;
    --color-purple: #92278F;
    --color-red: #E84B3A;
    --color-orange: #FC7F0C;
    --color-yellow: #FFC000;
    --color-light-blue: #14B7F1;
    --color-pink: #EE257C;
    --color-gold: #D8B22D;

    /* Semantic mapping */
    --primary: var(--color-purple);
    --secondary: var(--color-light-blue);
    --accent: var(--color-orange);
    --success: var(--color-gold);
    --danger: var(--color-red);
    --info: var(--color-light-blue);
    --warning: var(--color-yellow);
    --dark: var(--color-dark-gray);
    --light: var(--color-white);
}

body {
    background-color: #f8f9fa;
    color: var(--color-dark-gray);
}

.bg-custom-purple { background-color: var(--color-purple) !important; color: white !important; }
.bg-custom-red { background-color: var(--color-red) !important; color: white !important; }
.bg-custom-orange { background-color: var(--color-orange) !important; color: white !important; }
.bg-custom-yellow { background-color: var(--color-yellow) !important; }
.bg-custom-blue { background-color: var(--color-light-blue) !important; color: white !important; }
.bg-custom-pink { background-color: var(--color-pink) !important; color: white !important; }
.bg-custom-gold { background-color: var(--color-gold) !important; color: white !important; }

.btn-custom-primary {
    background-color: var(--color-purple);
    border-color: var(--color-purple);
    color: white;
}
.btn-custom-primary:hover {
    background-color: var(--color-pink);
    border-color: var(--color-pink);
    color: white;
}

.btn-custom-secondary {
    background-color: var(--color-light-blue);
    border-color: var(--color-light-blue);
    color: white;
}
.btn-custom-secondary:hover {
    background-color: var(--color-orange);
    border-color: var(--color-orange);
    color: white;
}

.card-custom {
    border: none;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.card-header-custom {
    border-top-left-radius: 15px !important;
    border-top-right-radius: 15px !important;
    font-weight: bold;
    color: white;
}