:root {
    --primary: #8f8f8f;
    --secondary: #dddddf;
    --success: #28a745;
    --danger: #dc3545;
    --warning: #ffc107;
    --info: #17a2b8;
    --background-color: #ffffff;
    --text-color: #090101;
    --dark-color: #6c4747;
    --light-text-color: #fafafa;
    --button-text-color: #fafafa;
    --button-text-secondary: #000005;
    --button-text-warning: #0a0000;
    --button-text-outline: #0380fc;

        --bs-primary: #8f8f8f;
        --bs-secondary: #dddddf;
        --bs-success: #28a745;
        --bs-danger: #dc3545;
        --bs-warning: #ffc107;
        --bs-info: #17a2b8;
        --bs-body-bg: #ffffff;
        --bs-body-color: #090101;
        --bs-dark: #6c4747;
        --bs-light: #fafafa;
    }
    
    /* ========================================================================= */
    /* 🎨 APLICAÇÃO DAS CORES DINÂMICAS - BOTÕES COM TEXTO SEPARADO */
    /* ========================================================================= */
    
    /* Botões Primários */
    .btn-primary {
        background-color: var(--primary) !important;
        border-color: var(--primary) !important;
        color: var(--button-text-color) !important;
    }
    
    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary:active {
        background-color: #797979 !important;
        border-color: #797979 !important;
        color: var(--button-text-color) !important;
    }
    
    /* Botões Secundários */
    .btn-secondary {
        background-color: var(--secondary) !important;
        border-color: var(--secondary) !important;
        color: var(--button-text-secondary) !important;
    }
    
    .btn-secondary:hover,
    .btn-secondary:focus,
    .btn-secondary:active {
        background-color: #bbbbbd !important;
        border-color: #bbbbbd !important;
        color: var(--button-text-secondary) !important;
    }
    
    /* Botões Success */
    .btn-success {
        background-color: var(--success) !important;
        border-color: var(--success) !important;
        color: var(--button-text-color) !important;
    }
    
    .btn-success:hover,
    .btn-success:focus,
    .btn-success:active {
        background-color: #228d3a !important;
        border-color: #228d3a !important;
        color: var(--button-text-color) !important;
    }
    
    /* Botões Danger */
    .btn-danger {
        background-color: var(--danger) !important;
        border-color: var(--danger) !important;
        color: var(--button-text-color) !important;
    }
    
    .btn-danger:hover,
    .btn-danger:focus,
    .btn-danger:active {
        background-color: #bb2d3a !important;
        border-color: #bb2d3a !important;
        color: var(--button-text-color) !important;
    }
    
    /* Botões Warning */
    .btn-warning {
        background-color: var(--warning) !important;
        border-color: var(--warning) !important;
        color: var(--button-text-warning) !important;
    }
    
    .btn-warning:hover,
    .btn-warning:focus,
    .btn-warning:active {
        background-color: #d8a405 !important;
        border-color: #d8a405 !important;
        color: var(--button-text-warning) !important;
    }
    
    /* Botões Info */
    .btn-info {
        background-color: var(--info) !important;
        border-color: var(--info) !important;
        color: var(--button-text-color) !important;
    }
    
    .btn-info:hover,
    .btn-info:focus,
    .btn-info:active {
        background-color: #13899c !important;
        border-color: #13899c !important;
        color: var(--button-text-color) !important;
    }
    
    /* Botões Outline */
    .btn-outline-primary {
        color: var(--button-text-outline) !important;
        border-color: var(--button-text-outline) !important;
        background-color: transparent !important;
    }
    
    .btn-outline-primary:hover {
        background-color: var(--button-text-outline) !important;
        color: var(--button-text-color) !important;
    }
    
    .btn-outline-secondary {
        color: var(--secondary) !important;
        border-color: var(--secondary) !important;
        background-color: transparent !important;
    }
    
    .btn-outline-secondary:hover {
        background-color: var(--secondary) !important;
        color: var(--button-text-secondary) !important;
    }
    
    .btn-outline-success {
        color: var(--success) !important;
        border-color: var(--success) !important;
        background-color: transparent !important;
    }
    
    .btn-outline-success:hover {
        background-color: var(--success) !important;
        color: var(--button-text-color) !important;
    }
    
    .btn-outline-danger {
        color: var(--danger) !important;
        border-color: var(--danger) !important;
        background-color: transparent !important;
    }
    
    .btn-outline-danger:hover {
        background-color: var(--danger) !important;
        color: var(--button-text-color) !important;
    }
    
    .btn-outline-warning {
        color: var(--warning) !important;
        border-color: var(--warning) !important;
        background-color: transparent !important;
    }
    
    .btn-outline-warning:hover {
        background-color: var(--warning) !important;
        color: var(--button-text-warning) !important;
    }
    
    .btn-outline-info {
        color: var(--info) !important;
        border-color: var(--info) !important;
        background-color: transparent !important;
    }
    
    .btn-outline-info:hover {
        background-color: var(--info) !important;
        color: var(--button-text-color) !important;
    }
    
    /* Badges */
    .badge.bg-primary {
        background-color: var(--primary) !important;
    }
    
    .badge.bg-secondary {
        background-color: var(--secondary) !important;
    }
    
    .badge.bg-success {
        background-color: var(--success) !important;
    }
    
    .badge.bg-danger {
        background-color: var(--danger) !important;
    }
    
    .badge.bg-warning {
        background-color: var(--warning) !important;
        color: var(--button-text-warning) !important;
    }
    
    .badge.bg-info {
        background-color: var(--info) !important;
    }
    
    /* Links */
    a {
        color: var(--primary) !important;
    }
    
    a:hover {
        color: #797979 !important;
    }
    
    /* Text colors */
    .text-primary {
        color: var(--primary) !important;
    }
    
    .text-secondary {
        color: var(--secondary) !important;
    }
    
    .text-success {
        color: var(--success) !important;
    }
    
    .text-danger {
        color: var(--danger) !important;
    }
    
    .text-warning {
        color: var(--warning) !important;
    }
    
    .text-info {
        color: var(--info) !important;
    }
    
    /* Background colors */
    .bg-primary {
        background-color: var(--primary) !important;
    }
    
    .bg-dark {
        background-color: var(--dark-color) !important;
    }
    
    /* Body styles */
    body {
        background-color: var(--background-color) !important;
        color: var(--text-color) !important;
    }
    
    /* Form controls focus */
    .form-control:focus,
    .form-select:focus {
        border-color: var(--primary) !important;
        box-shadow: 0 0 0 0.2rem #8f8f8f25 !important;
    }
    
    /* Navbar dark text */
    .navbar-dark .navbar-nav .nav-link {
        color: var(--light-text-color) !important;
    }
    
    .navbar-dark .navbar-nav .nav-link:hover {
        color: var(--primary) !important;
    }
    
    /* Hero section */
    .hero-section {
        background: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)),
                    url('https://images.unsplash.com/photo-1506784983877-45594efa4cbe?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80') 
                    center/cover no-repeat fixed;
        color: white;
        padding: 100px 0;
        margin-bottom: 40px;
        text-align: center;
        min-height: 70vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Footer styles */
    footer.bg-dark {
        background-color: var(--dark-color) !important;
        color: var(--light-text-color) !important;
    }
    
    footer.bg-dark h5 {
        color: var(--light-text-color) !important;
    }
    
    footer.bg-dark p {
        color: var(--light-text-color) !important;
    }
    
    footer.bg-dark a:not(.btn) {
        color: var(--light-text-color) !important;
    }
    
    footer.bg-dark a:not(.btn):hover {
        color: var(--primary) !important;
    }