/* ===============================================
   PROFENINJA - PALETA DE COLORES TEMA LIGHT
   =============================================== */

/* Variables CSS para tema claro consistente */
:root {
    /* ===========================
       PALETA BASE LIGHT MODE
       =========================== */
    
    /* Fondos principales */
    --ninja-light-bg-primary: #fefefe;
    --ninja-light-bg-secondary: #f8fafc;
    --ninja-light-bg-tertiary: #f1f5f9;
    --ninja-light-bg-accent: #e2e8f0;
    
    /* ===========================
       JERARQUÍA DE TEXTOS
       =========================== */
    
    /* Títulos principales - Alto contraste */
    --ninja-light-text-primary: #1e293b;        /* Títulos H1, H2 principales */
    
    /* Subtítulos - Contraste medio-alto */
    --ninja-light-text-secondary: #334155;      /* Subtítulos H3, H4, labels importantes */
    
    /* Texto regular - Legible y cómodo */
    --ninja-light-text-tertiary: #475569;       /* Texto de párrafos, labels */
    
    /* Texto auxiliar - Información secundaria */
    --ninja-light-text-quaternary: #64748b;     /* Help text, placeholders */
    
    /* Texto deshabilitado */
    --ninja-light-text-muted: #94a3b8;          /* Estados disabled */
    
    /* Placeholders */
    --ninja-light-text-placeholder: #94a3b8;
    
    /* ===========================
       SISTEMA DE BOTONES
       =========================== */
    
    /* Botón primario - Acción principal */
    --ninja-light-btn-primary-bg: #3b82f6;
    --ninja-light-btn-primary-hover: #2563eb;
    --ninja-light-btn-primary-active: #1d4ed8;
    --ninja-light-btn-primary-text: #ffffff;
    
    /* Botón secundario - Acción secundaria */
    --ninja-light-btn-secondary-bg: #f1f5f9;
    --ninja-light-btn-secondary-hover: #e2e8f0;
    --ninja-light-btn-secondary-active: #cbd5e1;
    --ninja-light-btn-secondary-text: #334155;
    
    /* Botón outline - Variante con borde */
    --ninja-light-btn-outline-bg: transparent;
    --ninja-light-btn-outline-border: #d1d5db;
    --ninja-light-btn-outline-hover-bg: #f9fafb;
    --ninja-light-btn-outline-text: #374151;
    
    /* ===========================
       SUPERFICIES Y GLASSMORPHISM
       =========================== */
    
    /* Glassmorphism suave para light mode */
    --ninja-light-glass-bg: rgba(255, 255, 255, 0.8);
    --ninja-light-glass-bg-hover: rgba(255, 255, 255, 0.9);
    --ninja-light-glass-border: rgba(148, 163, 184, 0.2);
    --ninja-light-glass-border-hover: rgba(148, 163, 184, 0.3);
    
    /* Tarjetas y paneles */
    --ninja-light-card-bg: #ffffff;
    --ninja-light-card-border: #e2e8f0;
    --ninja-light-card-hover: #f8fafc;
    
    /* ===========================
       INPUTS Y FORMULARIOS
       =========================== */
    
    /* Inputs principales */
    --ninja-light-input-bg: #ffffff;
    --ninja-light-input-border: #d1d5db;
    --ninja-light-input-border-focus: #3b82f6;
    --ninja-light-input-focus: rgba(59, 130, 246, 0.1);
    
    /* ===========================
       ESTADOS Y FEEDBACK
       =========================== */
    
    /* Success */
    --ninja-light-success: #059669;
    --ninja-light-success-bg: rgba(5, 150, 105, 0.1);
    --ninja-light-success-border: rgba(5, 150, 105, 0.2);
    
    /* Warning */
    --ninja-light-warning: #d97706;
    --ninja-light-warning-bg: rgba(217, 119, 6, 0.1);
    --ninja-light-warning-border: rgba(217, 119, 6, 0.2);
    
    /* Error/Danger */
    --ninja-light-danger: #dc2626;
    --ninja-light-danger-bg: rgba(220, 38, 38, 0.1);
    --ninja-light-danger-border: rgba(220, 38, 38, 0.2);
    
    /* Info */
    --ninja-light-info: #0891b2;
    --ninja-light-info-bg: rgba(8, 145, 178, 0.1);
    --ninja-light-info-border: rgba(8, 145, 178, 0.2);
    
    /* ===========================
       SOMBRAS Y EFECTOS
       =========================== */
    
    /* Sombras graduales */
    --ninja-light-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --ninja-light-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    --ninja-light-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --ninja-light-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --ninja-light-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    
    /* Efectos blur */
    --ninja-light-blur: blur(12px);
    --ninja-light-blur-strong: blur(20px);
    
    /* Transiciones */
    --ninja-light-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --ninja-light-transition-slow: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* ===========================
       GRADIENTES
       =========================== */
    
    /* Gradientes de fondo sutiles */
    --ninja-light-gradient-primary: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #f3e8ff 100%);
    --ninja-light-gradient-secondary: linear-gradient(135deg, #fefefe 0%, #f8fafc 50%, #f1f5f9 100%);
    
    /* Gradientes para botones */
    --ninja-light-btn-gradient: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    --ninja-light-btn-gradient-hover: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
}

/* ===========================
   CLASES UTILITARIAS LIGHT
   =========================== */

/* Títulos */
.ninja-light-title {
    color: var(--ninja-light-text-primary);
    font-weight: 700;
}

.ninja-light-subtitle {
    color: var(--ninja-light-text-secondary);
    font-weight: 600;
}

.ninja-light-text {
    color: var(--ninja-light-text-tertiary);
}

.ninja-light-text-muted {
    color: var(--ninja-light-text-quaternary);
}

/* Botones utilitarios */
.ninja-light-btn-primary {
    background: var(--ninja-light-btn-primary-bg);
    color: var(--ninja-light-btn-primary-text);
    border: 1px solid transparent;
    transition: var(--ninja-light-transition);
}

.ninja-light-btn-primary:hover {
    background: var(--ninja-light-btn-primary-hover);
    box-shadow: var(--ninja-light-shadow-md);
}

.ninja-light-btn-secondary {
    background: var(--ninja-light-btn-secondary-bg);
    color: var(--ninja-light-btn-secondary-text);
    border: 1px solid var(--ninja-light-card-border);
    transition: var(--ninja-light-transition);
}

.ninja-light-btn-secondary:hover {
    background: var(--ninja-light-btn-secondary-hover);
    box-shadow: var(--ninja-light-shadow-sm);
}

/* Cards glassmorphism */
.ninja-light-glass-card {
    background: var(--ninja-light-glass-bg);
    backdrop-filter: var(--ninja-light-blur);
    border: 1px solid var(--ninja-light-glass-border);
    box-shadow: var(--ninja-light-shadow-lg);
    transition: var(--ninja-light-transition);
}

.ninja-light-glass-card:hover {
    background: var(--ninja-light-glass-bg-hover);
    border-color: var(--ninja-light-glass-border-hover);
    box-shadow: var(--ninja-light-shadow-xl);
}

/* ===========================
   RESPONSIVE ADJUSTMENTS
   =========================== */

@media (max-width: 768px) {
    :root {
        /* Ajustar sombras para móvil */
        --ninja-light-shadow-lg: 0 8px 12px -2px rgba(0, 0, 0, 0.1), 0 3px 5px -3px rgba(0, 0, 0, 0.1);
        --ninja-light-shadow-xl: 0 15px 20px -4px rgba(0, 0, 0, 0.1), 0 6px 8px -5px rgba(0, 0, 0, 0.1);
        
        /* Reducir blur en móvil para performance */
        --ninja-light-blur: blur(8px);
        --ninja-light-blur-strong: blur(12px);
    }
}

@media (prefers-reduced-motion: reduce) {
    :root {
        /* Transiciones reducidas para accesibilidad */
        --ninja-light-transition: all 0.01ms;
        --ninja-light-transition-slow: all 0.01ms;
    }
}

/* ===========================
   TEMA LIGHT PARA BODY
   =========================== */

body.theme-light {
    background: var(--ninja-light-gradient-primary);
    color: var(--ninja-light-text-primary);
}