/* ============================================
   VARIABLES CSS - Paleta de colores y tokens
   ============================================ */

:root {
    /* Paleta principal */
    --primary: #1e3a8a;
    --primary-dark: #1e40af;
    --primary-light: #eff6ff;
    --secondary: #6b7280;
    --secondary-dark: #4b5563;
    --accent: #000000;
    --accent-light: #f3f4f6;

    /* Escala de grises */
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;

    /* Colores de estado */
    --success: #059669;
    --success-light: #ecfdf5;
    --warning: #d97706;
    --warning-light: #fffbeb;
    --danger: #dc2626;
    --danger-light: #fef2f2;

    /* Gradientes */
    --gradient-primary: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
    --gradient-gray: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
    --gradient-dark: linear-gradient(135deg, #374151 0%, #1f2937 100%);

    /* Fondos */
    --bg-primary: #ffffff;
    --bg-secondary: #f9fafb;
    --bg-card: #ffffff;
    --bg-hover: #f3f4f6;
}