/* === VARIABLES GLOBALES KEIMADA LIVE === */
/* Sistema de Design Tokens para arquitectura modular */

:root {
    /* === SISTEMA DE LAYOUT UNIFICADO === */
    --frame-padding: clamp(16px, 5vw, 48px);
    --content-max: 1200px;
    --card-width: 180px;
    --card-gap: 1.2rem;
    
    /* === PALETA DE COLORES PRINCIPAL === */
    --primary-color: #8B2252;
    /* Magenta principal más rico del diseño */
    --secondary-color: #4A0E35;
    /* Púrpura oscuro profundo */
    --accent-color: #B83280;
    /* Magenta medio para acentos - solo para fondos */
    --accent-text: #E94DAD;
    /* Magenta más claro para texto - contraste 4.7:1 sobre fondos oscuros */
    
    /* === COLORES DE TEXTO === */
    --text-color-light: #f0f0f0;
    --text-color-dark: #222;
    
    /* === FONDOS Y SUPERFICIES === */
    --background-dark: #2D0A1F;
    /* Fondo más oscuro y profundo */
    --card-bg: #6B1A47;
    /* Fondo de tarjetas más rico */
    --border-color: #8B2252;
    /* Bordes más vibrantes */
    
    /* === GRADIENTES TEMÁTICOS === */
    --gradient-center: #8B3052;
    /* Granate-magenta central oscuro */
    --gradient-mid: #6B2440;
    /* Granate medio */
    --gradient-edge: #3A1426;
    /* Granate muy oscuro */
    
    /* === TIPOGRAFÍA === */
    --font-family-main: 'Roboto', sans-serif;
    
    /* === DIMENSIONES DE LAYOUT === */
    --header-height: clamp(60px, 12vh, 84px); /* ALTURA FLUIDA - Más espacio en móvil */
    
    /* === GRADIENTES COMUNES === */
    /* Gradientes reutilizables para evitar duplicación en componentes */
    --gradient-keimada-primary: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    --gradient-keimada-card: linear-gradient(145deg, rgba(139, 34, 82, 0.8), rgba(184, 50, 128, 0.6));
    --gradient-keimada-overlay: linear-gradient(90deg, rgba(139, 34, 82, 0.9) 0%, rgba(184, 50, 128, 0.7) 100%);
    --gradient-keimada-text: linear-gradient(45deg, var(--accent-text), var(--accent-color));
    --gradient-keimada-subtle: linear-gradient(180deg, rgba(233, 77, 173, 0.1) 0%, rgba(139, 34, 82, 0.05) 100%);
    
    /* === SOMBRAS COMUNES === */
    --shadow-keimada-sm: 0 2px 8px rgba(233, 77, 173, 0.1);
    --shadow-keimada-md: 0 4px 15px rgba(233, 77, 173, 0.2);
    --shadow-keimada-lg: 0 8px 30px rgba(233, 77, 173, 0.3);
    --shadow-keimada-glow: 0 0 20px rgba(233, 77, 173, 0.4);
    
    /* === RESPONSIVE BREAKPOINTS (UNIFICADOS) === */
    /* Sistema unificado para todos los componentes - Mobile First */
    --breakpoint-truemobile: 480px;    /* Dispositivos móviles reales (≤480px + touch) */
    --breakpoint-mobile: 768px;        /* Móvil/Tablet boundary (Mobile ≤768px) */ 
    --breakpoint-tablet: 1024px;       /* Tablet/Desktop boundary (Tablet 769-1024px) */
    --breakpoint-desktop: 1200px;      /* Desktop/Large Desktop (Desktop ≥1025px) */
}