/* 🏦 BRADESCO FONTS - Tipografia Corporativa */

/* Fonte variável principal - mais moderna e eficiente */
@font-face {
    font-family: 'BradescoSans';
    src: url('./fonts/BradescoSansVariable.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* Fallbacks para compatibilidade */
@font-face {
    font-family: 'BradescoSans';
    src: url('./fonts/BradescoSans-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'BradescoSans';
    src: url('./fonts/BradescoSans-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'BradescoSans';
    src: url('./fonts/BradescoSans-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'BradescoSans';
    src: url('./fonts/BradescoSans-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* 🎨 BRADESCO DESIGN SYSTEM - Variáveis CSS */
:root {
    /* Fontes */
    --bradesco-font-family: 'BradescoSans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    
    /* Cores Corporativas Bradesco */
    --bradesco-red: #DC143C;
    --bradesco-red-dark: #B91C3C;
    --bradesco-red-light: #F87171;
    
    --bradesco-black: #1A1A1A;
    --bradesco-gray-900: #111827;
    --bradesco-gray-800: #1F2937;
    --bradesco-gray-700: #374151;
    --bradesco-gray-600: #4B5563;
    --bradesco-gray-500: #6B7280;
    --bradesco-gray-400: #9CA3AF;
    --bradesco-gray-300: #D1D5DB;
    --bradesco-gray-200: #E5E7EB;
    --bradesco-gray-100: #F3F4F6;
    --bradesco-gray-50: #F9FAFB;
    
    /* Gradientes Corporativos */
    --bradesco-gradient-primary: linear-gradient(135deg, var(--bradesco-red) 0%, var(--bradesco-red-dark) 100%);
    --bradesco-gradient-subtle: linear-gradient(135deg, #FEE2E2 0%, #FECACA 100%);
    
    /* Sombras */
    --bradesco-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --bradesco-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --bradesco-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --bradesco-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --bradesco-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    
    /* Bordas */
    --bradesco-border-radius: 8px;
    --bradesco-border-radius-lg: 12px;
    --bradesco-border-radius-xl: 16px;
    
    /* Espaçamentos */
    --bradesco-spacing-xs: 0.25rem;
    --bradesco-spacing-sm: 0.5rem;
    --bradesco-spacing-md: 1rem;
    --bradesco-spacing-lg: 1.5rem;
    --bradesco-spacing-xl: 2rem;
    --bradesco-spacing-2xl: 3rem;
}

/* 🎯 CLASSES UTILITÁRIAS BRADESCO */
.bradesco-font {
    font-family: var(--bradesco-font-family);
}

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

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

.bradesco-gradient {
    background: var(--bradesco-gradient-primary);
}

.bradesco-shadow {
    box-shadow: var(--bradesco-shadow-lg);
}

/* 📱 RESPONSIVIDADE */
@media (max-width: 768px) {
    :root {
        --bradesco-spacing-xl: 1rem;
        --bradesco-spacing-2xl: 1.5rem;
    }
}