/* ============================================================
   DESIGN SYSTEM - JobOffers Hostelería
   Paleta: Navy profesional + Ámbar cálido
   Patrón: Sidebar oscuro / Contenido claro (LinkedIn style)
   ============================================================ */

:root {
    /* === FONDOS (área de contenido — CLAROS) === */
    --color-bg-base:     #EEF2F8;   /* Fondo general de página */
    --color-bg-surface:  #FFFFFF;   /* Tarjetas, paneles */
    --color-bg-elevated: #F5F7FB;   /* Inputs, filas de tabla */
    --color-bg-hover:    #E8EDF7;   /* Hover sobre elementos */
    --color-bg-deep:     #DDE4F0;   /* Borde más oscuro / sombra suave */

    /* === PRIMARIO: Navy (profesional, confianza) === */
    --color-primary:       #1D4370;
    --color-primary-dark:  #163259;
    --color-primary-light: #2563A8;
    --color-primary-pale:  #EBF2FF;
    --color-primary-glow:  rgba(29, 67, 112, 0.18);

    /* === ACENTO: Ámbar/Oro (calidez hostelería) === */
    --color-accent:        #D97706;
    --color-accent-dark:   #B45309;
    --color-accent-light:  #FBBF24;
    --color-accent-pale:   #FFFBEB;
    --color-accent-glow:   rgba(217, 119, 6, 0.15);

    /* === CÁLIDO === */
    --color-warm:        #D97706;
    --color-warm-dark:   #B45309;
    --color-warm-light:  #FCD34D;

    /* === ESTADO === */
    --color-success: #059669;
    --color-warning: #D97706;
    --color-error:   #DC2626;
    --color-info:    #0891B2;

    /* === TEXTO (sobre fondos claros) === */
    --color-text-primary:   #111827;   /* Casi negro */
    --color-text-secondary: #374151;   /* Gris oscuro */
    --color-text-muted:     #6B7280;   /* Gris medio */
    --color-white: #FFFFFF;
    --color-dark:  #111827;

    /* === SIDEBAR (colores hardcode en admin_base.css) === */
    --sidebar-bg:           #0E1729;
    --sidebar-bg-hover:     rgba(255,255,255,0.06);
    --sidebar-border:       rgba(255,255,255,0.07);
    --sidebar-text:         #94A3B8;
    --sidebar-text-active:  #FFFFFF;
    --sidebar-text-muted:   #64748B;

    /* === BORDES (claros) === */
    --color-border:        #E2E8F0;
    --color-border-strong: #CBD5E0;
    --color-border-focus:  rgba(29, 67, 112, 0.45);
    --color-border-accent: rgba(217, 119, 6, 0.40);

    /* === TIPOGRAFÍA === */
    --font-heading:    'Raleway', sans-serif;
    --font-subheading: 'Raleway', sans-serif;
    --font-body:       'Nunito', sans-serif;

    /* === SOMBRAS (suaves, para tema claro) === */
    --shadow-sm:      0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md:      0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.05);
    --shadow-lg:      0 10px 24px rgba(0,0,0,0.10), 0 4px 8px rgba(0,0,0,0.06);
    --shadow-xl:      0 20px 40px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.07);
    --shadow-primary: 0 4px 14px rgba(29, 67, 112, 0.35);
    --shadow-accent:  0 4px 14px rgba(217, 119, 6, 0.28);

    /* === TRANSICIONES === */
    --transition-fast:   0.15s ease;
    --transition-normal: 0.25s ease;
    --transition-slow:   0.4s ease;

    /* === BORDER RADIUS === */
    --radius-sm:   6px;
    --radius-md:   10px;
    --radius-lg:   14px;
    --radius-xl:   20px;
    --radius-full: 9999px;

    /* === SPACING === */
    --spacing-xs:  4px;
    --spacing-sm:  8px;
    --spacing-md:  16px;
    --spacing-lg:  24px;
    --spacing-xl:  32px;
    --spacing-2xl: 48px;

    /* === ESCALA GRISES === */
    --color-gray-50:  #F9FAFB;
    --color-gray-100: #F3F4F6;
    --color-gray-200: #E5E7EB;
    --color-gray-300: #D1D5DB;
    --color-gray-400: #9CA3AF;
    --color-gray-500: #6B7280;
    --color-gray-600: #4B5563;
    --color-gray-700: #374151;
    --color-gray-900: #111827;

    /* === ESCALA ROJOS === */
    --color-red-50:  #FEF2F2;
    --color-red-200: #FECACA;
    --color-red-600: #DC2626;

    /* === ALIASES LEGACY (compatibilidad con templates) === */
    --color-secondary:        var(--color-primary-light);
    --color-primary-blue:     var(--color-primary);
    --color-secondary-blue:   var(--color-primary-dark);
    --color-accent-blue:      var(--color-primary-light);
    --color-primary-orange:   var(--color-accent);
    --color-secondary-orange: var(--color-accent-dark);
    --color-accent-orange:    var(--color-accent-light);
    --color-primary-green:    var(--color-success);
    --color-secondary-green:  #10B981;
    --color-light: var(--color-bg-surface);
}