/**
 * BitForward Corporate Design System
 * Sistema de diseño empresarial para la plataforma DeFi
 */

:root {
    /* ===== COLORES CORPORATIVOS ===== */
    
    /* Paleta Principal - BitForward Blue */
    --bf-primary: #0066ff;
    --bf-primary-light: #3385ff;
    --bf-primary-dark: #0052cc;
    --bf-primary-gradient: linear-gradient(135deg, #0066ff 0%, #0052cc 100%);
    
    /* Paleta Secundaria - Financial Gold */
    --bf-secondary: #f5a623;
    --bf-secondary-light: #f7b955;
    --bf-secondary-dark: #d4940f;
    --bf-gold-gradient: linear-gradient(135deg, #f5a623 0%, #d4940f 100%);
    
    /* Colores de Estado */
    --bf-success: #00d4aa;
    --bf-success-light: #33ddbf;
    --bf-success-dark: #00b894;
    
    --bf-warning: #fdcb6e;
    --bf-warning-light: #fdd98b;
    --bf-warning-dark: #e17055;
    
    --bf-error: #e84393;
    --bf-error-light: #ed7fb5;
    --bf-error-dark: #d63031;
    
    --bf-info: #74b9ff;
    --bf-info-light: #a8cbff;
    --bf-info-dark: #0984e3;
    
    /* Escala de Grises Corporativa */
    --bf-gray-50: #f8fafc;
    --bf-gray-100: #f1f5f9;
    --bf-gray-200: #e2e8f0;
    --bf-gray-300: #cbd5e1;
    --bf-gray-400: #94a3b8;
    --bf-gray-500: #64748b;
    --bf-gray-600: #475569;
    --bf-gray-700: #334155;
    --bf-gray-800: #1e293b;
    --bf-gray-900: #0f172a;
    
    /* Fondos */
    --bf-bg-primary: #ffffff;
    --bf-bg-secondary: var(--bf-gray-50);
    --bf-bg-tertiary: var(--bf-gray-100);
    --bf-bg-dark: var(--bf-gray-900);
    
    /* Texto */
    --bf-text-primary: var(--bf-gray-900);
    --bf-text-secondary: var(--bf-gray-600);
    --bf-text-muted: var(--bf-gray-400);
    --bf-text-inverse: #ffffff;
    
    /* Sombras Empresariales */
    --bf-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --bf-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    --bf-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
    --bf-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
    --bf-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);
    --bf-shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.25);
    
    /* Espaciado */
    --bf-space-1: 0.25rem;   /* 4px */
    --bf-space-2: 0.5rem;    /* 8px */
    --bf-space-3: 0.75rem;   /* 12px */
    --bf-space-4: 1rem;      /* 16px */
    --bf-space-5: 1.25rem;   /* 20px */
    --bf-space-6: 1.5rem;    /* 24px */
    --bf-space-8: 2rem;      /* 32px */
    --bf-space-10: 2.5rem;   /* 40px */
    --bf-space-12: 3rem;     /* 48px */
    --bf-space-16: 4rem;     /* 64px */
    --bf-space-20: 5rem;     /* 80px */
    --bf-space-24: 6rem;     /* 96px */
    
    /* Tipografía */
    --bf-font-family-heading: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
    --bf-font-family-body: 'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif;
    --bf-font-family-mono: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
    
    /* Tamaños de Fuente */
    --bf-text-xs: 0.75rem;     /* 12px */
    --bf-text-sm: 0.875rem;    /* 14px */
    --bf-text-base: 1rem;      /* 16px */
    --bf-text-lg: 1.125rem;    /* 18px */
    --bf-text-xl: 1.25rem;     /* 20px */
    --bf-text-2xl: 1.5rem;     /* 24px */
    --bf-text-3xl: 1.875rem;   /* 30px */
    --bf-text-4xl: 2.25rem;    /* 36px */
    --bf-text-5xl: 3rem;       /* 48px */
    --bf-text-6xl: 3.75rem;    /* 60px */
    
    /* Pesos de Fuente */
    --bf-font-light: 300;
    --bf-font-normal: 400;
    --bf-font-medium: 500;
    --bf-font-semibold: 600;
    --bf-font-bold: 700;
    --bf-font-extrabold: 800;
    
    /* Bordes */
    --bf-radius-sm: 0.25rem;   /* 4px */
    --bf-radius-md: 0.5rem;    /* 8px */
    --bf-radius-lg: 0.75rem;   /* 12px */
    --bf-radius-xl: 1rem;      /* 16px */
    --bf-radius-2xl: 1.5rem;   /* 24px */
    --bf-radius-3xl: 2rem;     /* 32px */
    
    /* Transiciones */
    --bf-transition-fast: 150ms ease;
    --bf-transition-normal: 300ms ease;
    --bf-transition-slow: 500ms ease;
    
    /* Z-Index */
    --bf-z-dropdown: 1000;
    --bf-z-sticky: 1020;
    --bf-z-fixed: 1030;
    --bf-z-modal-backdrop: 1040;
    --bf-z-modal: 1050;
    --bf-z-popover: 1060;
    --bf-z-tooltip: 1070;
}

/* ===== COMPONENTES CORPORATIVOS ===== */

/* Logo y Branding */
.bf-logo {
    font-family: var(--bf-font-family-heading);
    font-weight: var(--bf-font-bold);
    color: var(--bf-primary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--bf-space-2);
}

.bf-logo-icon {
    width: 32px;
    height: 32px;
    background: var(--bf-primary-gradient);
    border-radius: var(--bf-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: var(--bf-font-bold);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.bf-logo-icon:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 20px rgba(0, 102, 255, 0.3);
}

.bf-logo-icon .logo-icon {
    width: 24px;
    height: 24px;
    filter: brightness(0) invert(1);
}

/* Botones Corporativos */
.bf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--bf-space-2);
    padding: var(--bf-space-3) var(--bf-space-6);
    border-radius: var(--bf-radius-lg);
    font-family: var(--bf-font-family-body);
    font-weight: var(--bf-font-medium);
    font-size: var(--bf-text-sm);
    line-height: 1;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all var(--bf-transition-fast);
    position: relative;
    overflow: hidden;
}

.bf-btn-primary {
    background: var(--bf-primary-gradient);
    color: var(--bf-text-inverse);
    box-shadow: var(--bf-shadow-md);
}

.bf-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: var(--bf-shadow-lg);
}

.bf-btn-secondary {
    background: var(--bf-bg-primary);
    color: var(--bf-primary);
    border: 2px solid var(--bf-primary);
}

.bf-btn-secondary:hover {
    background: var(--bf-primary);
    color: var(--bf-text-inverse);
}

.bf-btn-gold {
    background: var(--bf-gold-gradient);
    color: var(--bf-text-inverse);
    box-shadow: var(--bf-shadow-md);
}

.bf-btn-gold:hover {
    transform: translateY(-1px);
    box-shadow: var(--bf-shadow-lg);
}

/* Cards Empresariales */
.bf-card {
    background: var(--bf-bg-primary);
    border-radius: var(--bf-radius-xl);
    box-shadow: var(--bf-shadow-md);
    border: 1px solid var(--bf-gray-200);
    overflow: hidden;
    transition: all var(--bf-transition-normal);
}

.bf-card:hover {
    box-shadow: var(--bf-shadow-lg);
    transform: translateY(-2px);
}

.bf-card-header {
    padding: var(--bf-space-6);
    border-bottom: 1px solid var(--bf-gray-200);
}

.bf-card-body {
    padding: var(--bf-space-6);
}

.bf-card-footer {
    padding: var(--bf-space-6);
    border-top: 1px solid var(--bf-gray-200);
    background: var(--bf-bg-secondary);
}

/* Métricas y KPIs */
.bf-metric {
    text-align: center;
    padding: var(--bf-space-6);
    border-radius: var(--bf-radius-xl);
    background: var(--bf-bg-primary);
    border: 1px solid var(--bf-gray-200);
    transition: all var(--bf-transition-normal);
}

.bf-metric:hover {
    box-shadow: var(--bf-shadow-md);
    transform: translateY(-2px);
}

.bf-metric-value {
    font-size: var(--bf-text-3xl);
    font-weight: var(--bf-font-bold);
    color: var(--bf-primary);
    margin-bottom: var(--bf-space-1);
}

.bf-metric-label {
    font-size: var(--bf-text-sm);
    color: var(--bf-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: var(--bf-font-medium);
}

/* Badges de Estado */
.bf-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--bf-space-1);
    padding: var(--bf-space-1) var(--bf-space-3);
    border-radius: var(--bf-radius-md);
    font-size: var(--bf-text-xs);
    font-weight: var(--bf-font-medium);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.bf-badge-success {
    background: rgba(0, 212, 170, 0.1);
    color: var(--bf-success-dark);
}

.bf-badge-warning {
    background: rgba(253, 203, 110, 0.1);
    color: var(--bf-warning-dark);
}

.bf-badge-error {
    background: rgba(232, 67, 147, 0.1);
    color: var(--bf-error-dark);
}

.bf-badge-info {
    background: rgba(116, 185, 255, 0.1);
    color: var(--bf-info-dark);
}

/* Responsive */
@media (max-width: 768px) {
    :root {
        --bf-space-6: 1rem;
        --bf-space-8: 1.5rem;
        --bf-text-3xl: 1.5rem;
        --bf-text-4xl: 1.875rem;
    }
}