/**
 * JD CRIMSON CORE - Base Común del Sistema de Diseño
 * Autor: Juan David Zapata
 * Versión: 1.0
 * Fecha: Octubre 21, 2025
 * 
 * Este archivo contiene los elementos comunes que se comparten
 * entre los temas Dark y Light (fuentes, animaciones, utilidades).
 */

/* ========================================
   FUENTES
   ======================================== */

@font-face {
    font-family: 'MazzardH';
    src: url('../fonts/MazzardH-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ========================================
   VARIABLES COMPARTIDAS
   ======================================== */

:root {
    /* Color de Acento (Crimson) - Compartido entre temas */
    --jd-crimson: #ff4d6d;
    --jd-crimson-dark: #c9184a;
    --jd-crimson-gradient: linear-gradient(135deg, #ff5577 0%, #b81848 100%);
    --jd-crimson-gradient-hover: linear-gradient(135deg, #ff7a94 0%, #cc2050 100%);
    
    /* Border Radius */
    --jd-radius-sm: 8px;
    --jd-radius-md: 10px;
    --jd-radius-lg: 12px;
    --jd-radius-xl: 16px;
    --jd-radius-pill: 20px;
    --jd-radius-full: 50%;
    
    /* Espaciado */
    --jd-spacing-xs: 10px;
    --jd-spacing-sm: 15px;
    --jd-spacing-md: 20px;
    --jd-spacing-lg: 25px;
    --jd-spacing-xl: 30px;
    
    /* Transiciones */
    --jd-transition: all 0.3s ease;
}

/* ========================================
   TIPOGRAFÍA BASE
   ======================================== */

h1, h2, h3, h4, h5, h6,
.jd-title {
    font-family: 'MazzardH', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-weight: 700;
}

/* ========================================
   UTILIDADES GENERALES
   ======================================== */

.text-crimson {
    color: var(--jd-crimson) !important;
}

.border-crimson {
    border-color: var(--jd-crimson) !important;
}

.jd-hover-lift {
    transition: var(--jd-transition);
}

.jd-hover-lift:hover {
    transform: translateY(-2px);
}

/* ========================================
   BRAND TEXT
   ======================================== */

.brand-text {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    margin-bottom: 8px;
    font-weight: 700;
}

/* ========================================
   ANIMATIONS
   ======================================== */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.jd-fade-in {
    animation: fadeInUp 0.5s ease;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.jd-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* ========================================
   RESPONSIVE HELPERS
   ======================================== */

@media (max-width: 991px) {
    .stat-number {
        font-size: 2rem !important;
    }
    
    .current-price {
        font-size: 2rem !important;
    }
}

@media (max-width: 767px) {
    .stat-card,
    .stat-card-dark,
    .stat-card-light {
        margin-bottom: var(--jd-spacing-md);
    }
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
    .admin-header,
    .btn,
    .badge {
        display: none !important;
    }
    
    body {
        background: white;
        color: black;
    }
}