/**
 * ╔═══════════════════════════════════════════════════════════════════════════╗
 * ║                                                                           ║
 * ║     🎨 SISTEMA DE COLORES UNIFICADO - KENKATSU                            ║
 * ║     Sistema de diseño coherente y profesional                             ║
 * ║     Versión 2.0 - Unificado y mejorado                                   ║
 * ║                                                                           ║
 * ╚═══════════════════════════════════════════════════════════════════════════╝
 */

:root {
    /* ═══════════════════════════════════════════════════════════════════════════
       COLORES PRIMARIOS - IDENTIDAD DE MARCA
       =========================================================================== */
    
    /* Deep Teal - Color principal de marca (Wellness/Recovery) */
    --kenkatsu-primary: #1F5E6B;
    --kenkatsu-primary-dark: #164851;
    --kenkatsu-primary-darker: #0F3A42;
    --kenkatsu-primary-light: #2A7A8A;
    --kenkatsu-primary-lighter: #3A9BB0;
    
    /* Teal Alternativo - Para variaciones y gradientes */
    --kenkatsu-teal: #0D9488;
    --kenkatsu-teal-dark: #0F766E;
    --kenkatsu-teal-darker: #124E4A;
    --kenkatsu-teal-light: #14B8A6;
    --kenkatsu-teal-lighter: #5EEAD4;
    
    /* ═══════════════════════════════════════════════════════════════════════════
       COLORES SECUNDARIOS - ELEMENTOS DE SOPORTE
       =========================================================================== */
    
    /* Taupe/Tierra - Color terciario elegante */
    --kenkatsu-taupe: #8C8174;
    --kenkatsu-taupe-dark: #6B6257;
    --kenkatsu-taupe-light: #A89F94;
    
    /* Cream/Beige - Color de acento suave */
    --kenkatsu-cream: #E6DCCF;
    --kenkatsu-cream-dark: #D4C5B3;
    --kenkatsu-cream-light: #F5F0E8;
    
    /* ═══════════════════════════════════════════════════════════════════════════
       ESCALA DE GRISES - NEUTROS Y TEXTOS
       =========================================================================== */
    
    /* Grises oscuros - Textos principales */
    --kenkatsu-gray-900: #1A1A1A;  /* Texto principal */
    --kenkatsu-gray-800: #1F2937;  /* Texto secundario */
    --kenkatsu-gray-700: #374151;  /* Texto terciario */
    --kenkatsu-gray-600: #4B5563;  /* Texto deshabilitado */
    
    /* Grises medios - Bordes y separadores */
    --kenkatsu-gray-500: #6B7280;
    --kenkatsu-gray-400: #9CA3AF;  /* Texto deshabilitado en calendario */
    --kenkatsu-gray-300: #D1D5DB;  /* Bordes grises */
    --kenkatsu-gray-200: #E5E7EB;  /* Fondos grises claros (días deshabilitados) */
    --kenkatsu-gray-100: #F3F4F6;  /* Fondos muy claros */
    --kenkatsu-gray-50: #F9FAFB;   /* Fondos casi blancos */
    
    /* ═══════════════════════════════════════════════════════════════════════════
       COLORES FUNCIONALES - ESTADOS Y ACCIONES
       =========================================================================== */
    
    /* Éxito/Confirmación */
    --kenkatsu-success: #10B981;
    --kenkatsu-success-dark: #059669;
    --kenkatsu-success-light: #34D399;
    
    /* Advertencia */
    --kenkatsu-warning: #F59E0B;
    --kenkatsu-warning-dark: #D97706;
    --kenkatsu-warning-light: #FBBF24;
    
    /* Error/Destacado */
    --kenkatsu-error: #E64A19;  /* Rojo/Naranja para badges de carrito */
    --kenkatsu-error-dark: #C62828;
    --kenkatsu-error-light: #EF5350;
    
    /* Información */
    --kenkatsu-info: #3B82F6;
    --kenkatsu-info-dark: #2563EB;
    --kenkatsu-info-light: #60A5FA;
    
    /* ═══════════════════════════════════════════════════════════════════════════
       COLORES DE FONDO
       =========================================================================== */
    
    --kenkatsu-bg-white: #FFFFFF;
    --kenkatsu-bg-off-white: #FAFAF8;  /* Fondo principal del sitio */
    --kenkatsu-bg-cream: #F5F0E8;      /* Fondo crema suave */
    --kenkatsu-bg-gray: #F3F4F6;       /* Fondo gris claro */
    
    /* ═══════════════════════════════════════════════════════════════════════════
       COLORES DE TEXTO (ALIAS PARA FACILIDAD DE USO)
       =========================================================================== */
    
    --kenkatsu-text-primary: var(--kenkatsu-gray-900);
    --kenkatsu-text-secondary: var(--kenkatsu-gray-800);
    --kenkatsu-text-tertiary: var(--kenkatsu-gray-700);
    --kenkatsu-text-muted: var(--kenkatsu-gray-600);
    --kenkatsu-text-disabled: var(--kenkatsu-gray-400);
    
    /* ═══════════════════════════════════════════════════════════════════════════
       COLORES DE BORDES
       =========================================================================== */
    
    --kenkatsu-border-primary: var(--kenkatsu-cream);
    --kenkatsu-border-secondary: var(--kenkatsu-gray-300);
    --kenkatsu-border-muted: rgba(230, 220, 207, 0.6);
    --kenkatsu-border-disabled: var(--kenkatsu-gray-300);
    
    /* ═══════════════════════════════════════════════════════════════════════════
       SOMBRAS Y EFECTOS
       =========================================================================== */
    
    /* Sombras suaves */
    --kenkatsu-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --kenkatsu-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    --kenkatsu-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
    --kenkatsu-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --kenkatsu-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
    
    /* Sombras premium con color teal */
    --kenkatsu-shadow-primary: 0 4px 12px rgba(31, 94, 107, 0.15);
    --kenkatsu-shadow-primary-lg: 0 8px 25px rgba(31, 94, 107, 0.25);
    --kenkatsu-shadow-primary-xl: 0 30px 60px rgba(31, 94, 107, 0.08);
    
    /* Sombras suaves neutras */
    --kenkatsu-shadow-soft: 0 10px 40px rgba(0, 0, 0, 0.03);
    --kenkatsu-shadow-premium: 0 30px 60px rgba(31, 94, 107, 0.08);
    
    /* ═══════════════════════════════════════════════════════════════════════════
       GRADIENTES
       =========================================================================== */
    
    --kenkatsu-gradient-primary: linear-gradient(135deg, var(--kenkatsu-primary) 0%, var(--kenkatsu-teal) 100%);
    --kenkatsu-gradient-primary-reverse: linear-gradient(135deg, var(--kenkatsu-teal) 0%, var(--kenkatsu-primary) 100%);
    --kenkatsu-gradient-teal: linear-gradient(135deg, var(--kenkatsu-teal) 0%, var(--kenkatsu-teal-dark) 100%);
    --kenkatsu-gradient-cream: linear-gradient(135deg, var(--kenkatsu-cream-light) 0%, var(--kenkatsu-cream) 100%);
    
    /* ═══════════════════════════════════════════════════════════════════════════
       OPACIDADES Y OVERLAYS
       =========================================================================== */
    
    --kenkatsu-overlay-dark: rgba(0, 0, 0, 0.5);
    --kenkatsu-overlay-light: rgba(255, 255, 255, 0.9);
    --kenkatsu-overlay-primary: rgba(31, 94, 107, 0.1);
    --kenkatsu-overlay-primary-hover: rgba(31, 94, 107, 0.15);
    
    /* ═══════════════════════════════════════════════════════════════════════════
       ALIAS DE COMPATIBILIDAD (Para mantener compatibilidad con código existente)
       =========================================================================== */
    
    /* Alias para nombres antiguos */
    --kenkatsu-secondary: var(--kenkatsu-primary);
    --kenkatsu-accent: var(--kenkatsu-cream);
    --kenkatsu-neutral: var(--kenkatsu-gray-400);
    --kenkatsu-bg: var(--kenkatsu-bg-off-white);
    --kenkatsu-white: var(--kenkatsu-bg-white);
    --kenkatsu-text-dark: var(--kenkatsu-text-primary);
    --kenkatsu-text-medium: var(--kenkatsu-text-secondary);
    --kenkatsu-text-light: var(--kenkatsu-taupe);
    --kenkatsu-border: var(--kenkatsu-border-primary);
    --kenkatsu-dark: var(--kenkatsu-gray-800);
    --kenkatsu-gray: var(--kenkatsu-gray-500);
    --kenkatsu-light-gray: var(--kenkatsu-gray-100);
    --kenkatsu-dark-gray: var(--kenkatsu-gray-600);
    --kenkatsu-light-bg: var(--kenkatsu-bg-off-white);
    --kenkatsu-beige: var(--kenkatsu-cream);
    
    /* ═══════════════════════════════════════════════════════════════════════════
       VARIABLES ESPECÍFICAS PARA CALENDARIO PLUGINHIVE
       =========================================================================== */
    
    /* Días disponibles/elegibles - Color principal corporativo */
    --kenkatsu-calendar-available-bg: var(--kenkatsu-bg-white);
    --kenkatsu-calendar-available-border: var(--kenkatsu-border-muted);
    --kenkatsu-calendar-available-text: var(--kenkatsu-text-primary);
    --kenkatsu-calendar-available-hover-bg: var(--kenkatsu-primary);
    --kenkatsu-calendar-available-hover-text: var(--kenkatsu-bg-white);
    
    /* Días seleccionados - Color principal destacado */
    --kenkatsu-calendar-selected-bg: var(--kenkatsu-primary);
    --kenkatsu-calendar-selected-border: var(--kenkatsu-primary);
    --kenkatsu-calendar-selected-text: var(--kenkatsu-bg-white);
    --kenkatsu-calendar-selected-shadow: var(--kenkatsu-shadow-primary);
    
    /* Días NO seleccionables/deshabilitados - Gris distintivo */
    --kenkatsu-calendar-disabled-bg: var(--kenkatsu-gray-200);
    --kenkatsu-calendar-disabled-border: var(--kenkatsu-gray-300);
    --kenkatsu-calendar-disabled-text: var(--kenkatsu-gray-400);
    --kenkatsu-calendar-disabled-opacity: 0.6;
    
    /* Día de hoy - Borde destacado */
    --kenkatsu-calendar-today-border: var(--kenkatsu-primary);
    
    /* Horarios (time slots) disponibles - Color secundario */
    --kenkatsu-calendar-time-available-bg: var(--kenkatsu-bg-white);
    --kenkatsu-calendar-time-available-border: var(--kenkatsu-border-muted);
    --kenkatsu-calendar-time-available-text: var(--kenkatsu-text-primary);
    --kenkatsu-calendar-time-available-hover-bg: var(--kenkatsu-teal);
    --kenkatsu-calendar-time-available-hover-text: var(--kenkatsu-bg-white);
    
    /* Horarios seleccionados */
    --kenkatsu-calendar-time-selected-bg: var(--kenkatsu-primary);
    --kenkatsu-calendar-time-selected-text: var(--kenkatsu-bg-white);
    
    /* Horarios deshabilitados */
    --kenkatsu-calendar-time-disabled-bg: var(--kenkatsu-gray-200);
    --kenkatsu-calendar-time-disabled-text: var(--kenkatsu-gray-400);
    
    /* Controles del calendario (prev/next, mes/año) */
    --kenkatsu-calendar-control-bg: var(--kenkatsu-bg-white);
    --kenkatsu-calendar-control-border: var(--kenkatsu-border-muted);
    --kenkatsu-calendar-control-text: var(--kenkatsu-primary);
    --kenkatsu-calendar-control-hover-bg: var(--kenkatsu-primary);
    --kenkatsu-calendar-control-hover-text: var(--kenkatsu-bg-white);
    
    /* Headers del calendario (días de la semana) */
    --kenkatsu-calendar-header-text: var(--kenkatsu-gray-500);
    --kenkatsu-calendar-month-text: var(--kenkatsu-text-primary);
}

/* ═══════════════════════════════════════════════════════════════════════════
   UTILIDADES DE COLOR
   =========================================================================== */

/* Clases de utilidad para aplicar colores directamente */
.kenkatsu-text-primary { color: var(--kenkatsu-primary) !important; }
.kenkatsu-text-teal { color: var(--kenkatsu-teal) !important; }
.kenkatsu-text-taupe { color: var(--kenkatsu-taupe) !important; }
.kenkatsu-bg-primary { background-color: var(--kenkatsu-primary) !important; }
.kenkatsu-bg-teal { background-color: var(--kenkatsu-teal) !important; }
.kenkatsu-border-primary { border-color: var(--kenkatsu-primary) !important; }