/* =====================================================================
   Wilglo — Paleta de colores (barbería premium)
   Base oscura elegante + dorado/latón (lujo) + crema + rojo barbero.
   Uso: importar este archivo antes que el resto de estilos y usar las
   variables CSS (var(--color-xxx)) en toda la app.
   ===================================================================== */

:root {
    /* --- Marca / superficies oscuras --- */
    --color-negro:        #14171C;  /* fondo base de la app (casi negro) */
    --color-superficie:   #1E232B;  /* tarjetas, paneles, navbar */
    --color-superficie-2: #2A313B;  /* bordes suaves, hover en oscuro */

    /* --- Acento principal: dorado / latón --- */
    --color-dorado:       #C9A24B;  /* botones primarios, énfasis, iconos */
    --color-dorado-claro: #E0BE6A;  /* hover del dorado */
    --color-dorado-oscuro:#A07E32;  /* activo/pressed */

    /* --- Acento secundario: rojo barbero --- */
    --color-rojo:         #A62A2A;  /* detalles de marca, badges, alertas suaves */
    --color-rojo-claro:   #C64B4B;

    /* --- Neutros claros --- */
    --color-crema:        #F4EFE6;  /* fondo claro / texto sobre oscuro */
    --color-crema-2:      #FAF7F1;  /* fondos de sección claros */
    --color-gris:         #B9B4A9;  /* texto secundario sobre oscuro */
    --color-gris-borde:   #D8D2C6;  /* bordes en zonas claras */

    /* --- Texto --- */
    --color-texto-oscuro: #1E232B;  /* texto sobre fondos claros */
    --color-texto-claro:  #F4EFE6;  /* texto sobre fondos oscuros */
    --color-texto-suave:  #6B6B6B;  /* texto secundario en claro */

    /* --- Estados (semáforo) --- */
    --color-exito:        #2E7D5B;  /* verde: éxito, activo, pagado */
    --color-advertencia:  #C9871F;  /* ámbar: pendiente, stock bajo */
    --color-peligro:      #B23A3A;  /* rojo: error, rechazado, cancelado */
    --color-info:         #3E6D9E;  /* azul: informativo */

    /* --- Sombras y radios (consistencia visual) --- */
    --sombra-card: 0 4px 14px rgba(0, 0, 0, 0.18);
    --radio:       10px;
    --radio-sm:    6px;
}

/* Ejemplos de uso rápido (puedes borrarlos o moverlos a tu hoja principal) */
/*
body        { background: var(--color-negro); color: var(--color-texto-claro); }
.btn-primary{ background: var(--color-dorado); color: var(--color-negro); }
.btn-primary:hover { background: var(--color-dorado-claro); }
.card       { background: var(--color-superficie); border-radius: var(--radio);
              box-shadow: var(--sombra-card); }
.badge-ok   { background: var(--color-exito); }
.badge-warn { background: var(--color-advertencia); }
.badge-bad  { background: var(--color-peligro); }
*/