/* Sistema de Colores - La Casa de Seda */

/* Colores Primarios */
.bg-dark {
    background-color: #121212;
}

.bg-primary {
    background-color: #d4af37;
}

.bg-light {
    background-color: #f8f5f0;
}

/* Colores Secundarios */
.bg-secondary {
    background-color: #1e1e1e;
}

.bg-gray-dark {
    background-color: #2d2d2d;
}

.bg-gray-medium {
    background-color: #3d3d3d;
}

/* Colores de Texto */
.text-dark {
    color: #121212;
}

.text-primary {
    color: #d4af37;
}

.text-light {
    color: #f8f5f0;
}

.text-secondary {
    color: #1e1e1e;
}

.text-gray-dark {
    color: #2d2d2d;
}

.text-gray-medium {
    color: #3d3d3d;
}

.text-gray-light {
    color: #8a8a8a;
}

/* Estados */
.text-success {
    color: #4d9e6a;
}

.text-error {
    color: #e63946;
}

.text-warning {
    color: #e9c46a;
}

.bg-success {
    background-color: #4d9e6a;
}

.bg-error {
    background-color: #e63946;
}

.bg-warning {
    background-color: #e9c46a;
}

/* Bordes */
.border-dark {
    border-color: #121212;
}

.border-primary {
    border-color: #d4af37;
}

.border-light {
    border-color: #f8f5f0;
}

.border-secondary {
    border-color: #1e1e1e;
}

.border-gray-dark {
    border-color: #2d2d2d;
}

.border-gray-medium {
    border-color: #3d3d3d;
}

.border-gray-light {
    border-color: #8a8a8a;
}

/* Hover States */
.hover\:bg-primary:hover {
    background-color: #b8972f;
}

.hover\:bg-secondary:hover {
    background-color: #2d2d2d;
}

.hover\:text-primary:hover {
    color: #b8972f;
}

.hover\:border-primary:hover {
    border-color: #b8972f;
}

/* Focus States */
.focus\:border-primary:focus {
    border-color: #d4af37;
}

.focus\:ring-primary:focus {
    --tw-ring-color: #d4af37;
}

/* Gradientes */
.gradient-primary {
    background: linear-gradient(135deg, #d4af37 0%, #b8972f 100%);
}

.gradient-secondary {
    background: linear-gradient(135deg, #1e1e1e 0%, #2d2d2d 100%);
}

.gradient-dark {
    background: linear-gradient(135deg, #121212 0%, #1e1e1e 100%);
}

/* Overlays */
.overlay-dark {
    background-color: rgba(18, 18, 18, 0.8);
}

.overlay-primary {
    background-color: rgba(212, 175, 55, 0.1);
}

/* Sombras */
.shadow-primary {
    box-shadow: 0 4px 6px -1px rgba(212, 175, 55, 0.1), 0 2px 4px -1px rgba(212, 175, 55, 0.06);
}

.shadow-dark {
    box-shadow: 0 4px 6px -1px rgba(18, 18, 18, 0.1), 0 2px 4px -1px rgba(18, 18, 18, 0.06);
}

/* Utilidades para transparencias */
.bg-primary\/10 {
    background-color: rgba(212, 175, 55, 0.1);
}

.bg-primary\/20 {
    background-color: rgba(212, 175, 55, 0.2);
}

.bg-primary\/50 {
    background-color: rgba(212, 175, 55, 0.5);
}

.bg-dark\/50 {
    background-color: rgba(18, 18, 18, 0.5);
}

.bg-dark\/80 {
    background-color: rgba(18, 18, 18, 0.8);
}

.bg-light\/90 {
    background-color: rgba(248, 245, 240, 0.9);
}

.bg-light\/95 {
    background-color: rgba(248, 245, 240, 0.95);
}