/**
 * SISTEMA DE COLORES - MORAZANIA
 * Paleta: Blancos, Rojos y Grises
 * Diseño corporativo profesional
 */

:root {
  /* ============================================
     COLORES PRIMARIOS - ROJO
     ============================================ */
  
  --color-red-50: #FEF2F2;
  --color-red-100: #FEE2E2;
  --color-red-200: #FECACA;
  --color-red-300: #FCA5A5;
  --color-red-400: #F87171;
  --color-red-500: #EF4444;
  --color-red-600: #DC2626;  /* Rojo principal corporativo */
  --color-red-700: #B91C1C;
  --color-red-800: #991B1B;
  --color-red-900: #7F1D1D;

  /* ============================================
     COLORES NEUTRALES - GRISES
     ============================================ */
  
  --color-gray-50: #FAFAFA;
  --color-gray-100: #F5F5F5;
  --color-gray-200: #F0F0F0;
  --color-gray-300: #E5E5E5;
  --color-gray-400: #D4D4D4;
  --color-gray-500: #A3A3A3;
  --color-gray-600: #737373;
  --color-gray-700: #525252;
  --color-gray-800: #404040;
  --color-gray-900: #262626;

  /* Grises oscuros (slate) para elementos corporativos */
  --color-slate-50: #F8FAFC;
  --color-slate-100: #F1F5F9;
  --color-slate-200: #E2E8F0;
  --color-slate-300: #CBD5E1;
  --color-slate-400: #94A3B8;
  --color-slate-500: #64748B;
  --color-slate-600: #475569;
  --color-slate-700: #334155;
  --color-slate-800: #1E293B;  /* Gris oscuro principal */
  --color-slate-900: #0F172A;  /* Gris muy oscuro */

  /* ============================================
     COLORES BASE - BLANCOS
     ============================================ */
  
  --color-white: #FFFFFF;
  --color-white-soft: #FAFAFA;
  --color-white-warm: #FEFEFE;

  /* ============================================
     COLORES SEMÁNTICOS
     ============================================ */
  
  /* Texto */
  --color-text-primary: #1A1A1A;      /* Casi negro para texto principal */
  --color-text-secondary: #525252;     /* Gris medio para texto secundario */
  --color-text-muted: #737373;         /* Gris para texto deshabilitado */
  --color-text-inverse: #FFFFFF;       /* Blanco para texto sobre fondos oscuros */

  /* Fondos */
  --color-bg-primary: #FFFFFF;         /* Blanco principal */
  --color-bg-secondary: #FAFAFA;       /* Gris muy claro */
  --color-bg-tertiary: #F5F5F5;        /* Gris claro */
  --color-bg-dark: #1E293B;            /* Gris oscuro para secciones */
  --color-bg-darker: #0F172A;          /* Gris muy oscuro */

  /* Bordes */
  --color-border-light: #E5E5E5;       /* Borde claro */
  --color-border-medium: #D4D4D4;       /* Borde medio */
  --color-border-dark: #A3A3A3;        /* Borde oscuro */
  --color-border-red: #DC2626;         /* Borde rojo */

  /* Acentos */
  --color-accent-primary: #DC2626;     /* Rojo principal */
  --color-accent-secondary: #991B1B;   /* Rojo oscuro */
  --color-accent-light: #FEE2E2;       /* Rojo muy claro */

  /* ============================================
     GRADIENTES
     ============================================ */
  
  --gradient-red: linear-gradient(135deg, #DC2626 0%, #991B1B 100%);
  --gradient-red-light: linear-gradient(135deg, #FEE2E2 0%, #FECACA 100%);
  --gradient-gray: linear-gradient(135deg, #991B1B 0%, #7F1D1D 100%); /* Rojo oscuro en lugar de gris azulado */
  --gradient-gray-light: linear-gradient(180deg, #FAFAFA 0%, #FFFFFF 100%);
  --gradient-white-gray: linear-gradient(180deg, #FFFFFF 0%, #FAFAFA 50%, #FFFFFF 100%);

  /* ============================================
     SOMBRAS CON COLORES
     ============================================ */
  
  --shadow-red-sm: 0 2px 4px rgba(220, 38, 38, 0.1);
  --shadow-red-md: 0 4px 12px rgba(220, 38, 38, 0.2);
  --shadow-red-lg: 0 8px 24px rgba(220, 38, 38, 0.3);
  --shadow-gray-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
  --shadow-gray-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-gray-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* ============================================
   UTILIDADES DE COLORES
   ============================================ */

/* Clases de utilidad para texto */
.text-red { color: var(--color-red-600); }
.text-red-dark { color: var(--color-red-800); }
.text-gray { color: var(--color-gray-600); }
.text-gray-dark { color: var(--color-gray-800); }
.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }

/* Clases de utilidad para fondos */
.bg-red { background-color: var(--color-red-600); }
.bg-red-light { background-color: var(--color-red-50); }
.bg-gray { background-color: var(--color-gray-100); }
.bg-gray-dark { background-color: var(--color-slate-800); }
.bg-white { background-color: var(--color-white); }

/* Clases de utilidad para bordes */
.border-red { border-color: var(--color-red-600); }
.border-gray { border-color: var(--color-gray-300); }