/** * Variables CSS - La Gráfica Tenerife * Colores CMYK + RGB + Tipografía */ :root { /*========================================== COLORES PRINCIPALES (CMYK Simulados) ==========================================*/ --color-cyan: #00B4D8; --color-magenta: #E63946; --color-yellow: #FFD60A; --color-black: #1A1A1A; --color-white: #FFFFFF; /*========================================== COLORES ACENTOS (RGB Digital) ==========================================*/ --color-purple: #7209B7; --color-green: #06FFA5; --color-pink: #FF006E; /*========================================== ESCALA GRISES ==========================================*/ --gray-50: #F8F9FA; --gray-100: #F1F3F5; --gray-200: #E9ECEF; --gray-300: #DEE2E6; --gray-400: #CED4DA; --gray-500: #ADB5BD; --gray-600: #6C757D; --gray-700: #495057; --gray-800: #343A40; --gray-900: #212529; /*========================================== TIPOGRAFÍA ==========================================*/ --font-heading: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-accent: 'Space Grotesk', 'Courier New', monospace; /*========================================== TAMAÑOS TIPOGRÁFICOS (Fluid Typography) ==========================================*/ --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem); --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem); --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); --text-lg: clamp(1.125rem, 1rem + 0.5vw, 1.25rem); --text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem); --text-2xl: clamp(1.5rem, 1.3rem + 1vw, 2rem); --text-3xl: clamp(1.875rem, 1.5rem + 1.5vw, 2.5rem); --text-4xl: clamp(2.25rem, 1.8rem + 2vw, 3rem); --text-5xl: clamp(3rem, 2.5rem + 2.5vw, 4rem); /*========================================== ESPACIADO ==========================================*/ --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2rem; --space-xl: 3rem; --space-2xl: 4rem; --space-3xl: 6rem; /*========================================== BORDES ==========================================*/ --radius-sm: 0.25rem; --radius-md: 0.5rem; --radius-lg: 1rem; --radius-xl: 1.5rem; --radius-full: 9999px; /*========================================== SOMBRAS ==========================================*/ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1); /*========================================== TRANSICIONES ==========================================*/ --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 350ms ease; /*========================================== Z-INDEX LAYERS ==========================================*/ --z-header: 1000; --z-modal: 2000; --z-toast: 3000; --z-tooltip: 4000; /*========================================== CONTENEDORES ==========================================*/ --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1280px; --container-2xl: 1536px; } /* ============================================ DARK / LIGHT MODE — Variables semánticas Se asignan sobre [data-theme] en . El toggle JS escribe el atributo y persiste la elección en localStorage. ============================================ */ /* MODO CLARO (por defecto) */ :root, [data-theme="light"] { --bg-primary: #ffffff; --bg-secondary: #f8f9fa; --bg-tertiary: #f1f3f5; --text-primary: #212529; --text-secondary: #6c757d; --text-heading: #1a1a1a; --card-bg: #ffffff; --card-border: rgba(0, 0, 0, 0.08); --header-bg: rgba(255, 255, 255, 0.95); --header-shadow: 0 2px 20px rgba(0, 0, 0, 0.08); --input-bg: #ffffff; --input-border: #dee2e6; --divider: rgba(0, 0, 0, 0.08); --shadow-mode: 0 4px 6px -1px rgba(0, 0, 0, 0.1); } /* MODO OSCURO */ [data-theme="dark"] { --bg-primary: #1a1a1a; --bg-secondary: #252525; --bg-tertiary: #2d2d2d; --text-primary: #f1f3f5; --text-secondary: #adb5bd; --text-heading: #f8f9fa; --card-bg: #2a2a2a; --card-border: rgba(255, 255, 255, 0.08); --header-bg: rgba(26, 26, 26, 0.97); --header-shadow: 0 2px 20px rgba(0, 0, 0, 0.4); --input-bg: #2d2d2d; --input-border: rgba(255, 255, 255, 0.12); --divider: rgba(255, 255, 255, 0.08); --shadow-mode: 0 4px 6px -1px rgba(0, 0, 0, 0.4); } /* Transición suave al cambiar de modo */ *, *::before, *::after { transition-property: background-color, color, border-color, box-shadow; transition-duration: 250ms; transition-timing-function: ease; }