/* ========================================================================== VARIABLES.CSS Sistema de diseño de Quimic Aseo — token único de verdad para color, tipografía, espaciado y quiebres responsive. Cualquier valor de diseño usado en el sitio DEBE venir de este archivo. No se deben escribir colores, tamaños de fuente ni espaciados "sueltos" en otros archivos CSS: si falta un token, se agrega aquí primero. ========================================================================== */ :root { /* -------------------------------------------------------------------- 1. COLOR Paleta derivada de la identidad real de Quimic Aseo (navy del portafolio actual) + acento cian (referencia a la gota de agua del isotipo) + ámbar como color de ESTADO exclusivo para todo lo que pertenece a la Plataforma SCO V2.0 mientras esté "en desarrollo". -------------------------------------------------------------------- */ /* Navy — color de marca heredado, no reemplazado (ver Fase 2) */ --qa-navy-950: #081625; /* fondos más oscuros, hero, footer */ --qa-navy-800: #123252; /* navy principal de marca */ --qa-navy-700: #1B4269; /* navy secundario, hover de navy-800 */ --qa-navy-500: #2E5C8A; /* navy claro, bordes sobre fondo oscuro */ /* Cian técnico — acento de precisión (gota de agua del isotipo) */ --qa-cyan-500: #1FA99A; /* acento principal, enlaces, foco */ --qa-cyan-300: #6FD8CB; /* acento claro, sobre fondo oscuro */ /* Ámbar de estado — EXCLUSIVO para badges "en desarrollo" de SCO V2.0. No usar como acento decorativo en otras partes del sitio: su único trabajo es señalar "esto todavía no está disponible". */ --qa-amber-500: #E2A33B; --qa-amber-100: #FBEDD6; /* Neutros — fondo frío tipo papel técnico, no crema cálido */ --qa-paper-0: #F6F8F9; /* fondo de página por defecto */ --qa-paper-100: #ECEFF1; /* paneles ligeramente diferenciados */ --qa-steel-200: #D7DEE3; /* bordes, líneas divisorias, texto secundario sobre fondo OSCURO */ --qa-steel-400: #5C6B75; /* texto secundario sobre fondo CLARO — oscurecido para cumplir contraste AA (antes #9AA7B0, ~2.6:1 sobre papel — insuficiente) */ --qa-ink-900: #10161C; /* texto principal */ --qa-white: #FFFFFF; /* Semántico (no crear nuevos colores fuera de esta capa) */ --color-bg: var(--qa-paper-0); --color-bg-elevated: var(--qa-white); --color-bg-inverse: var(--qa-navy-950); --color-text: var(--qa-ink-900); --color-text-muted: var(--qa-steel-400); --color-text-inverse: var(--qa-paper-0); --color-border: var(--qa-steel-200); --color-border-inverse: var(--qa-navy-500); --color-accent: var(--qa-cyan-500); --color-accent-strong: var(--qa-navy-800); --color-status-dev: var(--qa-amber-500); --color-status-dev-bg: var(--qa-amber-100); --color-focus-ring: var(--qa-cyan-500); /* Estados semánticos — usados por el sistema de formularios y por cualquier feedback de validación en el sitio. No confundir --color-success con --color-accent: el cian es identidad de marca, el verde de éxito es un color puramente funcional. */ --color-success-500: #2E8B57; --color-success-bg: #E4F3EA; --color-error-500: #C0392B; --color-error-bg: #FBEAE8; --color-disabled-bg: var(--qa-paper-100); --color-disabled-text: var(--qa-steel-400); --color-disabled-border: var(--qa-steel-200); /* -------------------------------------------------------------------- 2. TIPOGRAFÍA Display: Space Grotesk — geometría técnica, se usa con moderación (titulares, cifras, marcadores de proceso). Cuerpo: IBM Plex Sans — legibilidad neutral en párrafos largos. Utilitaria: IBM Plex Mono — badges de estado, eyebrows de sección, datos/indicadores. Refuerza el registro "ingeniería" del proyecto. -------------------------------------------------------------------- */ --font-display: 'Space Grotesk', 'Arial Narrow', Arial, sans-serif; --font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace; /* Escala tipográfica — clamp() para fluidez entre mobile y desktop */ --text-xs: 0.75rem; /* 12px fijo — labels pequeños */ --text-sm: 0.875rem; /* 14px fijo — texto secundario */ --text-base: 1rem; /* 16px fijo — cuerpo de texto */ --text-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem); --text-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); --text-2xl: clamp(1.5rem, 1.3rem + 0.9vw, 1.875rem); --text-3xl: clamp(1.875rem, 1.5rem + 1.5vw, 2.5rem); --text-4xl: clamp(2.25rem, 1.7rem + 2.2vw, 3.25rem); --text-5xl: clamp(2.75rem, 2rem + 3vw, 4.25rem); --leading-tight: 1.15; --leading-snug: 1.35; --leading-normal: 1.6; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* -------------------------------------------------------------------- 3. ESPACIADO Escala base-8 — todo margen/padding del sitio se construye combinando estos tokens. -------------------------------------------------------------------- */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-7: 3rem; /* 48px */ --space-8: 4rem; /* 64px */ --space-9: 6rem; /* 96px */ --space-10: 8rem; /* 128px */ /* Contenedor y grilla */ --container-max: 1280px; --container-pad: var(--space-5); /* -------------------------------------------------------------------- 4. FORMA / ELEVACIÓN -------------------------------------------------------------------- */ --radius-sm: 2px; /* casi recto — registro técnico/blueprint */ --radius-md: 4px; --radius-lg: 8px; --shadow-sm: 0 1px 2px rgba(8, 22, 37, 0.06); --shadow-md: 0 4px 12px rgba(8, 22, 37, 0.10); --shadow-lg: 0 12px 32px rgba(8, 22, 37, 0.16); --shadow-xl: 0 24px 56px rgba(8, 22, 37, 0.22); /* Escala de ELEVACIÓN semántica — usar estos nombres en componentes, nunca --shadow-* directamente. Así, si el sitio necesita más profundidad visual en el futuro (ej. modales), se ajusta un solo nivel sin tocar cada componente que lo usa. 0 = plano (tarjeta en reposo, header) 1 = leve (tarjeta en hover, botones) 2 = media (dropdown, panel flotante) 3 = alta (modal, panel mobile nav) 4 = máxima (elemento crítico sobre todo lo demás) */ --elevation-0: none; --elevation-1: var(--shadow-sm); --elevation-2: var(--shadow-md); --elevation-3: var(--shadow-lg); --elevation-4: var(--shadow-xl); /* Grosor de las marcas de esquina (firma visual del sitio, ver README) */ --bracket-size: 14px; --bracket-thickness: 2px; /* -------------------------------------------------------------------- 5. MOVIMIENTO -------------------------------------------------------------------- */ /* Curvas con nombre semántico — "standard" para la mayoría de transiciones de UI, "entrance" para elementos que aparecen (más resorte, sensación de precisión/mecanismo), "exit" para elementos que desaparecen (más abrupta, sin rebote). */ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-entrance: cubic-bezier(0.16, 1, 0.3, 1); --ease-exit: cubic-bezier(0.4, 0, 1, 1); --duration-fast: 150ms; --duration-base: 250ms; --duration-slow: 400ms; --duration-slower: 650ms; /* secuencias de entrada del Hero */ /* -------------------------------------------------------------------- 6. CAPAS (z-index) Centralizado para evitar guerras de z-index entre componentes. -------------------------------------------------------------------- */ --z-header: 100; --z-dropdown: 110; --z-mobile-nav: 120; --z-modal: 200; /* -------------------------------------------------------------------- 7. HEADER -------------------------------------------------------------------- */ --header-height: 76px; --header-height-mobile: 64px; /* -------------------------------------------------------------------- 9. GRILLA Grilla de 12 columnas. Se consume a través de las clases .grid / .grid--cols-* y .col-span-* definidas en layout.css — estas variables son la fuente de verdad de espaciado entre columnas. -------------------------------------------------------------------- */ --grid-columns: 12; --grid-gutter: var(--space-5); /* separación entre columnas, mobile */ --grid-gutter-lg: var(--space-6); /* separación entre columnas, desktop */ /* -------------------------------------------------------------------- 10. TAMAÑOS MÍNIMOS DE ACCESIBILIDAD Ver guía completa de accesibilidad en README.md. Estas variables existen para que ningún componente interactivo se construya por debajo del mínimo táctil recomendado (WCAG 2.5.5, nivel AAA: 44×44px; se usa como piso en todo el sitio, no solo en AAA). -------------------------------------------------------------------- */ --hit-target-min: 44px; } /* -------------------------------------------------------------------- 8. BREAKPOINTS (referencia — usar como comentario, CSS no soporta variables dentro de @media; se documentan aquí para mantener consistencia manual en todo el proyecto) -------------------------------------------------------------------- --bp-sm: 480px (móvil grande) --bp-md: 768px (tablet) --bp-lg: 1024px (desktop pequeño / donde el menú deja de ser mobile) --bp-xl: 1280px (desktop) -------------------------------------------------------------------- */