/**
 * Customify - Global CSS Variables
 * Inspirado en 3sidedcube.com
 * 
 * Paleta de colores vibrante y moderna
 */

:root {
    /* ===== COLORES PRINCIPALES ===== */
    --customify-rosa-magenta: #FF006F;      /* CTAs principales, elementos destacados */
    --customify-rosa-claro: #FF6AFF;         /* Acentos suaves, hover states */
    --customify-verde-neon: #A0FF1F;         /* Highlights, elementos IA, tokens */
    --customify-verde-esmeralda: #01E33F;    /* Fondos de secciones, success states */
    --customify-amarillo: #FFD700;           /* Números destacados, badges */
    --customify-negro: #131313;              /* Texto principal, bordes */
    --customify-blanco: #FFFFFF;             /* Fondos, texto sobre colores */
    
    /* ===== GRISES (para contenido secundario) ===== */
    --customify-gris-oscuro: #333333;
    --customify-gris-medio: #666666;
    --customify-gris-claro: #999999;
    --customify-gris-muy-claro: #E0E0E0;
    --customify-gris-fondo: #F8F9FA;
    
    /* ===== TIPOGRAFÍA ===== */
    --customify-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --customify-font-weight-regular: 400;
    --customify-font-weight-medium: 500;
    --customify-font-weight-semibold: 600;
    --customify-font-weight-bold: 700;
    --customify-font-weight-extrabold: 800;
    
    /* ===== ESPACIADO ===== */
    --customify-spacing-xs: 4px;
    --customify-spacing-sm: 8px;
    --customify-spacing-md: 16px;
    --customify-spacing-lg: 24px;
    --customify-spacing-xl: 32px;
    --customify-spacing-2xl: 48px;
    --customify-spacing-3xl: 64px;
    
    /* ===== BORDES ===== */
    --customify-border-thin: 2px;
    --customify-border-medium: 3px;
    --customify-border-thick: 4px;
    --customify-border-radius-sm: 8px;
    --customify-border-radius-md: 12px;
    --customify-border-radius-lg: 16px;
    
    /* ===== SOMBRAS (estilo 3sidedcube - offset pronunciado) ===== */
    --customify-shadow-sm: 4px 4px 0px var(--customify-negro);
    --customify-shadow-md: 6px 6px 0px var(--customify-negro);
    --customify-shadow-lg: 8px 8px 0px var(--customify-negro);
    --customify-shadow-hover: 10px 10px 0px var(--customify-negro);
    
    /* Sombras suaves (para elementos secundarios) */
    --customify-shadow-soft-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --customify-shadow-soft-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --customify-shadow-soft-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    
    /* ===== TRANSICIONES ===== */
    --customify-transition-fast: 0.15s ease;
    --customify-transition-normal: 0.3s ease;
    --customify-transition-slow: 0.5s ease;
    
    /* ===== EFECTOS ESPECÍFICOS ===== */
    --customify-hover-lift: translateY(-4px);
    --customify-hover-lift-sm: translateY(-2px);
    --customify-hover-scale: scale(1.02);
}

/* ===== UTILIDADES DE HIGHLIGHTS (estilo 3sidedcube) ===== */
.customify-highlight-verde {
    background: var(--customify-verde-neon);
    color: var(--customify-negro);
    padding: 2px 8px;
    border-radius: 4px;
    display: inline-block;
    font-weight: var(--customify-font-weight-bold);
}

.customify-highlight-rosa {
    background: var(--customify-rosa-magenta);
    color: var(--customify-blanco);
    padding: 2px 8px;
    border-radius: 4px;
    display: inline-block;
    font-weight: var(--customify-font-weight-bold);
}

.customify-highlight-amarillo {
    background: var(--customify-amarillo);
    color: var(--customify-negro);
    padding: 2px 8px;
    border-radius: 4px;
    display: inline-block;
    font-weight: var(--customify-font-weight-bold);
}

/* ===== UTILIDADES DE BOTONES ===== */
.customify-btn-primary {
    background: var(--customify-rosa-magenta);
    color: var(--customify-blanco);
    border: var(--customify-border-thick) solid var(--customify-negro);
    padding: 12px 24px;
    border-radius: var(--customify-border-radius-sm);
    font-weight: var(--customify-font-weight-bold);
    font-size: 16px;
    cursor: pointer;
    transition: all var(--customify-transition-normal);
    box-shadow: var(--customify-shadow-md);
    text-decoration: none;
    display: inline-block;
}

.customify-btn-primary:hover {
    transform: var(--customify-hover-lift);
    box-shadow: var(--customify-shadow-hover);
    background: #E6005F;
}

.customify-btn-secondary {
    background: var(--customify-verde-neon);
    color: var(--customify-negro);
    border: var(--customify-border-thick) solid var(--customify-negro);
    padding: 12px 24px;
    border-radius: var(--customify-border-radius-sm);
    font-weight: var(--customify-font-weight-bold);
    font-size: 16px;
    cursor: pointer;
    transition: all var(--customify-transition-normal);
    box-shadow: var(--customify-shadow-md);
    text-decoration: none;
    display: inline-block;
}

.customify-btn-secondary:hover {
    transform: var(--customify-hover-lift);
    box-shadow: var(--customify-shadow-hover);
    background: #90E610;
}

/* ===== UTILIDADES DE CARDS ===== */
.customify-card {
    background: var(--customify-blanco);
    border: var(--customify-border-thick) solid var(--customify-negro);
    border-radius: var(--customify-border-radius-md);
    padding: var(--customify-spacing-lg);
    transition: all var(--customify-transition-normal);
    box-shadow: var(--customify-shadow-md);
}

.customify-card:hover {
    transform: var(--customify-hover-lift);
    box-shadow: var(--customify-shadow-hover);
}