/* ==========================================================================
   VARIABLES CSS - Facturación Electrónica RD
   Colores extraídos del diseño original Blazor
   ========================================================================== */

:root {
    /* ----------------------------------------
       COLORES PRINCIPALES DEL BRAND
       (Extraídos de dom_fe_custom.css)
       ---------------------------------------- */
    --fe-primary: #7fbe41;           /* Verde principal - botones, acentos */
    --fe-primary-dark: #6aa835;      /* Verde oscuro - hover */
    --fe-primary-light: #91BE21;     /* Verde claro - iconos, badges */
    
    --fe-secondary: #182952;         /* Azul oscuro - textos, headers */
    --fe-secondary-dark: #0f1a35;    /* Azul más oscuro - hover */
    --fe-secondary-light: #2C3D85;   /* Azul medio - títulos h1, h2 */
    
    /* ----------------------------------------
       COLORES DE TEXTO
       ---------------------------------------- */
    --fe-text-dark: #192952;         /* Texto principal oscuro */
    --fe-text-body: #6c757d;         /* Texto body */
    --fe-text-muted: #7987a1;        /* Texto secundario */
    --fe-text-light: #97a3b9;        /* Texto muy claro */
    
    /* ----------------------------------------
       COLORES DE FONDO
       ---------------------------------------- */
    --fe-bg-white: #ffffff;
    --fe-bg-light: #f9f9f9;          /* .fondoGris del original */
    --fe-bg-grey: #f4f4f9;           /* Fondos alternados */
    --fe-bg-dark: #182952;           /* Footer, secciones oscuras */
    
    /* ----------------------------------------
       COLORES DE ESTADO
       ---------------------------------------- */
    --fe-success: #28a745;
    --fe-warning: #ffc107;
    --fe-danger: #dc3545;
    --fe-info: #17a2b8;
    
    /* ----------------------------------------
       TIPOGRAFÍA
       Fuentes del proyecto original (cargadas desde Google Fonts)
       ---------------------------------------- */
    --fe-font-primary: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --fe-font-secondary: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --fe-font-alt: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --fe-font-size-base: 16px;
    --fe-line-height: 1.6666;
    
    /* ----------------------------------------
       ESPACIADO
       ---------------------------------------- */
    --fe-spacing-xs: 0.25rem;   /* 4px */
    --fe-spacing-sm: 0.5rem;    /* 8px */
    --fe-spacing-md: 1rem;      /* 16px */
    --fe-spacing-lg: 1.5rem;    /* 24px */
    --fe-spacing-xl: 2rem;      /* 32px */
    --fe-spacing-xxl: 3rem;     /* 48px */
    --fe-spacing-section: 80px; /* Padding de secciones */
    
    /* ----------------------------------------
       BORDES
       ---------------------------------------- */
    --fe-border-radius-sm: 4px;
    --fe-border-radius: 8px;
    --fe-border-radius-lg: 12px;
    --fe-border-radius-xl: 16px;
    --fe-border-radius-pill: 100px;
    --fe-border-color: #e7e7e7;
    
    /* ----------------------------------------
       SOMBRAS
       ---------------------------------------- */
    --fe-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    --fe-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    --fe-shadow-lg: 0 8px 25px rgba(0, 0, 0, 0.12);
    --fe-shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.15);
    
    /* ----------------------------------------
       TRANSICIONES
       ---------------------------------------- */
    --fe-transition-fast: 150ms ease;
    --fe-transition: 300ms ease;
    --fe-transition-slow: 500ms ease;
    
    /* ----------------------------------------
       Z-INDEX
       ---------------------------------------- */
    --fe-z-dropdown: 100;
    --fe-z-sticky: 500;
    --fe-z-fixed: 1000;
    --fe-z-modal-backdrop: 1040;
    --fe-z-modal: 1050;
    --fe-z-tooltip: 1070;
}

/* ----------------------------------------
   MEDIA QUERY BREAKPOINTS (para referencia)
   - xs: 0
   - sm: 576px
   - md: 768px
   - lg: 992px
   - xl: 1200px
   - xxl: 1400px
   ---------------------------------------- */