/*
 * ================================================
 * PASARELA CYBERSOURCE - VARIABLES DE DISEÑO
 * Autor: Miguel Segura Alvarado
 * Versión: 2.0.0
 * ================================================
 */

:root {
    /* ============================================
     * PALETA DE COLORES PRINCIPAL
     * ============================================ */
    --color-1: #f6eddc;  /* Beige claro - Fondo suave */
    --color-2: #e3e5d7;  /* Gris verdoso claro - Fondo secundario */
    --color-3: #bdd6d2;  /* Verde agua - Acentos suaves */
    --color-4: #a5c8ca;  /* Turquesa - Elementos destacados */
    --color-5: #586875;  /* Gris azulado oscuro - Textos y navbar */
    
    /* ============================================
     * ALIASES SEMÁNTICOS
     * ============================================ */
    --primary-color: var(--color-4);        /* Turquesa - Botones principales */
    --secondary-color: var(--color-5);      /* Gris oscuro - Textos */
    --accent-color: var(--color-3);         /* Verde agua - Acentos */
    --background-light: var(--color-1);     /* Beige - Fondo principal */
    --background-medium: var(--color-2);    /* Gris verdoso - Cards */
    
    /* ============================================
     * COLORES DE ESTADO (3DS/Pagos)
     * ============================================ */
    --success-color: #28a745;               /* Verde - Pagos exitosos */
    --danger-color: #dc3545;                /* Rojo - Errores */
    --warning-color: #ffc107;               /* Amarillo - Advertencias */
    --info-color: var(--color-4);           /* Turquesa - Información */
    
    /* ============================================
     * GRADIENTES
     * ============================================ */
    --gradient-primary: linear-gradient(135deg, var(--color-4) 0%, var(--color-5) 100%);
    --gradient-soft: linear-gradient(135deg, var(--color-2) 0%, var(--color-3) 100%);
    --gradient-accent: linear-gradient(135deg, var(--color-3) 0%, var(--color-4) 100%);
    
    /* ============================================
     * TIPOGRAFÍA
     * ============================================ */
    --font-family-base: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-family-heading: 'Figtree', sans-serif;
    --font-family-code: 'Courier New', monospace;
    
    /* ============================================
     * SOMBRAS
     * ============================================ */
    --shadow-sm: 0 2px 4px rgba(88, 104, 117, 0.1);
    --shadow-md: 0 4px 8px rgba(88, 104, 117, 0.15);
    --shadow-lg: 0 8px 16px rgba(88, 104, 117, 0.2);
    --shadow-xl: 0 20px 60px rgba(88, 104, 117, 0.3);
    
    /* ============================================
     * BORDER RADIUS
     * ============================================ */
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 15px;
    --radius-xl: 20px;
    
    /* ============================================
     * SPACING
     * ============================================ */
    --spacing-xs: 5px;
    --spacing-sm: 10px;
    --spacing-md: 20px;
    --spacing-lg: 30px;
    --spacing-xl: 40px;
}

/* ============================================
 * BOOTSTRAP 5 - Override con paleta turquesa
 * ============================================ */
:root {
    --bs-primary: #a5c8ca;
    --bs-primary-rgb: 165, 200, 202;
    --bs-secondary: #586875;
    --bs-secondary-rgb: 88, 104, 117;
    --bs-success: #5a9a7d;
    --bs-success-rgb: 90, 154, 125;
    --bs-info: #7ab8bc;
    --bs-info-rgb: 122, 184, 188;
    --bs-warning: #c4a86a;
    --bs-warning-rgb: 196, 168, 106;
    --bs-danger: #c45a5a;
    --bs-danger-rgb: 196, 90, 90;
    --bs-border-radius: var(--radius-md);
    --bs-border-radius-sm: var(--radius-sm);
    --bs-border-radius-lg: var(--radius-lg);
    --bs-border-radius-xl: var(--radius-xl);
}

/* ============================================
 * PALETA PRODUCCIÓN (cuando cybersource_mode = production)
 * Cálida, taupe/arena — sutil, distinta de la turquesa Test
 * ============================================ */
body.cybersource-production {
    --color-1: #f8f5f0;  /* Crema cálido - Fondo suave */
    --color-2: #eae6e0;  /* Gris cálido claro */
    --color-3: #c9b89a;  /* Arena/sand - Acentos */
    --color-4: #8f7d5e;  /* Taupe dorado - Elementos destacados */
    --color-5: #5c5348;  /* Marrón grisáceo - Textos y navbar */
    --primary-color: var(--color-4);
    --secondary-color: var(--color-5);
    --accent-color: var(--color-3);
    --background-light: var(--color-1);
    --background-medium: var(--color-2);
    --gradient-primary: linear-gradient(135deg, var(--color-4) 0%, var(--color-5) 100%);
    --gradient-soft: linear-gradient(135deg, var(--color-2) 0%, var(--color-3) 100%);
    --gradient-accent: linear-gradient(135deg, var(--color-3) 0%, var(--color-4) 100%);
    --shadow-sm: 0 2px 4px rgba(92, 83, 72, 0.1);
    --shadow-md: 0 4px 8px rgba(92, 83, 72, 0.15);
    --shadow-lg: 0 8px 16px rgba(92, 83, 72, 0.2);
    --shadow-xl: 0 20px 60px rgba(92, 83, 72, 0.3);
    --bs-primary: #8f7d5e;
    --bs-primary-rgb: 143, 125, 94;
    --bs-secondary: #5c5348;
    --bs-secondary-rgb: 92, 83, 72;
    --bs-info: #9a8b6f;
    --bs-info-rgb: 154, 139, 111;
}