/* ========================================================================== tokens.css: Auto Summit premium Fuente unica de verdad de variables de diseno (SPEC seccion 1.1). Ningun otro archivo define colores, tipos ni escalas: solo consume estos. ========================================================================== */ :root { /* --- Marca --- */ --navy: #0D1637; /* marca, headers, texto principal */ --navy-2: #161F47; /* superficies elevadas sobre navy */ --navy-3: #1E2A5E; /* bordes/hover sobre navy */ --orange: #FF9C01; /* CTA primario, precio destacado, una palabra por titulo */ --orange-deep: #E08600; /* precios, hover del CTA, texto naranja sobre claro (AA) */ --orange-soft: #FFB547; /* acentos suaves sobre navy */ /* --- Neutrales --- */ --bg: #F4F6FB; /* fondo de pagina */ --paper: #FFFFFF; /* cards y superficies */ --ink: #0D1637; /* texto principal */ --ink-2: #4A547A; /* texto secundario */ --ink-3: #828BAC; /* texto terciario, placeholders */ --line: #E2E6F2; /* bordes */ --line-2: #CFD5E8; /* bordes enfatizados */ /* --- Semanticos (estado de vehiculo) --- */ --success: #22A06B; /* disponible */ --warn: #E07A00; /* reservado */ --sold: #828BAC; /* vendido */ --danger: #DC3545; /* errores de formulario */ /* --- Marcas de terceros (solo en contexto de esa marca) --- */ --chery-red: #C8001A; --whatsapp: #25D366; /* solo el boton de WhatsApp */ /* --- Sobre navy --- */ --on-navy: #FFFFFF; --on-navy-72: rgba(255, 255, 255, 0.72); --on-navy-50: rgba(255, 255, 255, 0.5); --orange-tint-10: rgba(255, 156, 1, 0.10); /* fondo de pills/eyebrows sobre navy */ /* --- Radios --- */ --r: 14px; /* radio base de cards y paneles */ --r-sm: 10px; /* radio de botones e inputs */ --r-lg: 20px; /* radio de paneles grandes/heroes */ --r-pill: 999px; /* --- Tipografia (familias) --- */ --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; --font-body: "Inter", ui-sans-serif, system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* --- Escala tipografica (type scale, fluida via clamp) --- */ --fs-display: clamp(2.5rem, 1.6rem + 4.2vw, 4.5rem); /* 40 -> 72 heroes */ --fs-h1: clamp(2rem, 1.4rem + 2.8vw, 3.25rem); /* 32 -> 52 */ --fs-h2: clamp(1.625rem, 1.2rem + 1.9vw, 2.5rem); /* 26 -> 40 */ --fs-h3: clamp(1.375rem, 1.15rem + 1vw, 1.875rem); /* 22 -> 30 */ --fs-h4: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); /* 18 -> 22 */ --fs-h5: 1.125rem; /* 18 */ --fs-h6: 1rem; /* 16 */ --fs-lead: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem); /* 17 -> 20 parrafo lead */ --fs-body: 1rem; /* 16 */ --fs-sm: 0.875rem; /* 14 */ --fs-xs: 0.75rem; /* 12 */ --fs-eyebrow: 0.6875rem; /* 11 eyebrows/labels */ /* --- Espaciado (escala base 4px) --- */ --space-0: 0; --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.25rem; /* 20 */ --space-6: 1.5rem; /* 24 */ --space-8: 2rem; /* 32 */ --space-10: 2.5rem; /* 40 */ --space-12: 3rem; /* 48 */ --space-16: 4rem; /* 64 */ --space-20: 5rem; /* 80 */ --space-24: 6rem; /* 96 */ --space-32: 8rem; /* 128 */ /* --- Sombras (2 niveles, suaves, tinte navy) --- */ --shadow-1: 0 1px 2px rgba(13, 22, 55, 0.04), 0 4px 12px rgba(13, 22, 55, 0.06); --shadow-2: 0 4px 12px rgba(13, 22, 55, 0.08), 0 16px 40px rgba(13, 22, 55, 0.12); /* halo naranja para focus/acento */ --shadow-focus: 0 0 0 3px rgba(255, 156, 1, 0.35); /* --- Contenedor --- */ --container-max: 1200px; --container-pad: clamp(1rem, 0.5rem + 2.5vw, 2rem); /* --- z-index (escala) --- */ --z-base: 1; --z-raised: 10; --z-sticky: 100; /* sticky CTA / bottom bars */ --z-header: 200; /* header sticky */ --z-fab: 300; /* FAB WhatsApp */ --z-overlay: 400; /* overlay de menu movil */ --z-modal: 500; /* modales / bottom sheets */ --z-toast: 600; /* toasts, siempre encima */ /* --- Transiciones --- */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* ease-out suave */ --t-fast: 150ms var(--ease); --t-base: 200ms var(--ease); --t-slow: 250ms var(--ease); /* ========================================================================== Direccion de arte "dark showroom" (ART-DIRECTION.md) Complementa lo anterior, no lo reemplaza. La paleta y las tipografias no cambian: el naranja sigue siendo bisturi (CTA, precio, una palabra). ========================================================================== */ /* Ease firma: los autos tienen inercia, nada rebota (sellos 3 y 5) */ --ease-signature: cubic-bezier(0.2, 0.7, 0.2, 1); /* Ritmo vertical editorial: aire generoso entre secciones (sello 2) */ --section-y: clamp(72px, 10vw, 140px); /* Grade fotografico del hero (sello 1): overlay navy sobre la foto full-bleed + glow naranja radial sutil abajo a la izquierda (opacity .12 max). */ --grade-navy: linear-gradient( 180deg, rgba(13, 22, 55, 0.55) 0%, rgba(13, 22, 55, 0.92) 100% ); --grade-navy-strong: linear-gradient( 180deg, rgba(13, 22, 55, 0.62) 0%, rgba(13, 22, 55, 0.96) 100% ); --glow-orange: radial-gradient( 60% 55% at 12% 100%, rgba(255, 156, 1, 0.12) 0%, rgba(255, 156, 1, 0) 70% ); /* Glow naranja puntual para acentos y focos de luz sobre navy */ --glow-orange-soft: radial-gradient( 50% 50% at 50% 50%, rgba(255, 156, 1, 0.16) 0%, rgba(255, 156, 1, 0) 72% ); /* Sombra de card con tinte navy en 2 capas (sello 3, hover de .vcard) */ --shadow-card-hover: 0 6px 16px rgba(13, 22, 55, 0.1), 0 20px 44px rgba(13, 22, 55, 0.16); /* Duraciones de la direccion (movimiento con peso, sello 5) */ --dur-reveal: 600ms; /* reveal en cascada translateY(24px) + fade */ --dur-card: 400ms; /* hover de card: lift + zoom de foto */ --dur-hero: 1200ms; /* scale 1.06 -> 1 de la foto de hero al cargar */ --dur-marquee: 40s; /* un loop completo de la cinta de inventario */ }