/* css/tokens.css — design tokens (CSS custom properties). ------------------------------------------------------------------ Automotor 4x4 — registro editorial sobrio. El criterio es que la web parezca la de un taller al que le confías un coche caro, no la de una marca de accesorios. Eso se traduce en cuatro reglas que gobiernan todo lo demás: 1. Superficie clara. Blanco y hueso; el oscuro se reserva al pie y a alguna pieza suelta. El contraste lo dan la tinta y las fotos. 2. Un solo color, y contenido. El azul del logo aparece en enlaces, en un botón por pantalla y poco más. NO hay color cálido: el ámbar se retiró por completo — era lo que hacía que la web pareciera una señal de obra. 3. Sin efectos. Ni degradados decorativos, ni tramas de fondo, ni brillos, ni sombras de colores. Un filete de 1px separa mejor que cualquier sombra. 4. La jerarquía la hace el tamaño y el aire, no el peso ni la caja alta. Los titulares van en caja normal. Si vas a añadir algo aquí, la pregunta es si aparecería en el catálogo de un fabricante de amortiguadores. Si no, fuera. ------------------------------------------------------------------ */ :root { /* === Superficies === */ --bg-primary: #FFFFFF; --bg-soft: #F5F6F8; /* bloques alternos, tablas, formularios */ --bg-muted: #ECEEF1; /* rellenos de campo, estados inactivos */ --bg-elevated: #FFFFFF; /* cards: se separan por borde, no por tono */ --bg-raised: #FFFFFF; --bg-dark: #14171A; /* pie y piezas oscuras puntuales */ --bg-darker: #0D0F11; /* === Tinta === Nunca negro puro: #14171A tiene un punto de azul y descansa mucho más en pantalla sin perder autoridad. */ --fg-primary: #14171A; --fg-muted: #5A626C; /* #6B7480, no #878F99: el gris de antes daba 3,3:1 sobre blanco y fallaba AA (4,5:1) en el texto pequeño que lo usa —eyebrows de sección y las etiquetas mono de los formularios (13px)—. #6B7480 da 4,8:1 y sigue siendo más claro que `--fg-muted` (6,2:1), así que la jerarquía subtle < muted se mantiene. El auditor de contraste de la web solo mira texto sobre foto, por eso este caso sobre blanco se coló. */ --fg-subtle: #6B7480; --fg-on-dark: #F2F4F6; --fg-on-dark-muted: #A5ADB6; /* === Bordes === La estructura de la página. Casi todo lo que en el diseño anterior era una sombra o un cambio de fondo, aquí es una línea de 1px. */ --border: #E3E6EA; --border-strong: #C9CED5; --border-subtle: #EFF1F4; --border-dark: rgba(255, 255, 255, 0.14); /* === Marca === El azul del logo. Se usa para enlaces, para el botón principal y para señalar el elemento activo. Nada más: en cuanto el azul pinta planos grandes, la página empieza a parecer una promoción. */ --brand-blue: #1D65AE; --brand-blue-dark: #144A80; --brand-blue-hover: #17558F; --brand-blue-tint: #EDF3F9; /* fondos muy tenues, estados hover */ --brand-navy: #0F2C4A; /* === Servicios === Los seis comparten el azul a propósito: se distinguen por su fotografía y por su texto, no por color. */ --serv-preparaciones: var(--brand-blue); --serv-mecanica: var(--brand-blue); --serv-carroceria: var(--brand-blue); --serv-viajes: var(--brand-blue); --serv-asistencia: var(--brand-blue); --serv-accesorios: var(--brand-blue); /* === Niveles de preparación === Escala de intensidad en una sola familia: del azul medio al negro. El nivel más exigente es el más oscuro, no el más llamativo — que es justo lo contrario de lo que hacía el ámbar. */ --prep-uso-diario: #5B8DB8; --prep-ruta: #1D65AE; --prep-travesia: #144A80; --prep-raid: #14171A; /* Mismos tonos ajustados para texto sobre blanco (contraste AA). */ --prep-uso-diario-strong: #3D7AAC; --prep-ruta-strong: #17558F; --prep-travesia-strong: #144A80; --prep-raid-strong: #14171A; /* Color de texto sobre el color del nivel. */ --prep-uso-diario-fg: #FFFFFF; --prep-ruta-fg: #FFFFFF; --prep-travesia-fg: #FFFFFF; --prep-raid-fg: #FFFFFF; /* === Estado === Apagados a propósito: son mensajes de formulario, no semáforos. */ --success: #1F7A46; --warning: #8A6212; --danger: #A62B24; /* === Compatibilidad === Estos nombres vienen del diseño anterior y siguen apareciendo en unas 70 reglas repartidas por seis hojas (rotaciones de color por nth-child, tintes de tarjeta, franjas). Reescribir todas esas reglas una a una tenía mucho más riesgo que redirigir aquí los nombres, así que se mantienen como alias apuntando a la paleta sobria. El efecto práctico es que donde antes había ámbar, azul claro y azul de marca alternándose, ahora hay tres tonos de la misma familia: la rotación sigue existiendo pero deja de verse como una rotación de colores. No uses estos nombres en código nuevo. --accent-amber en concreto miente: ya no es ámbar y no debe volver a serlo. */ --accent-amber: var(--brand-blue-dark); --accent-amber-hot: var(--brand-blue); --accent-amber-dark: var(--brand-blue-dark); --brand-blue-light: #5B8DB8; --brand-blue-strong: var(--brand-blue-hover); --brand-blue-bright: var(--brand-blue); /* === Tipografía === Instrument Sans para titulares: un grotesco de proporciones estrechas, serio, con suficiente carácter para no parecer una plantilla y ninguna gana de llamar la atención. Inter para leer. IBM Plex Mono SOLO en datos técnicos —fichas de preparación, referencias, etiquetas de campo—, que es donde una monoespaciada significa algo en vez de decorar. */ --font-display: 'Instrument Sans', 'Inter', system-ui, -apple-system, sans-serif; --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Code', monospace; /* === Espaciado === */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 40px; --space-8: 48px; --space-10: 64px; --space-12: 96px; --space-16: 128px; --space-20: 160px; /* === Radios === 4px: suficiente para que un borde no se vea astillado, demasiado poco para leerse como "blandito". El diseño anterior tenía 24px (infantil) y el intermedio 0px (agresivo). */ --radius-sm: 3px; --radius-md: 4px; --radius-lg: 4px; --radius-xl: 6px; /* === Sombras === Prácticamente inexistentes. Solo para lo que flota de verdad por encima de la página: menús desplegables, drawer, modales. */ --shadow-sm: 0 1px 2px rgba(20, 23, 26, 0.05); --shadow-md: 0 2px 8px rgba(20, 23, 26, 0.07); --shadow-lg: 0 12px 32px rgba(20, 23, 26, 0.10); --shadow-brand: none; /* === Transiciones === Cortas y sin rebote. La interfaz responde, no actúa. */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --transition-fast: 120ms var(--ease); --transition-base: 180ms var(--ease); --transition-slow: 320ms var(--ease); /* === Layout === */ --container-max: 1200px; --container-text: 68ch; /* medida de lectura para textos largos */ /* 80px: el logotipo pasó a 56px de alto y en una barra de 72 rozaba el filete inferior. Todo lo que se aparta de la barra fija —el hueco del hero, los `scroll-margin-top` de las anclas, el banner de privacidad— sale de esta variable, así que se ajustan solos. */ --topbar-height: 80px; /* === Z-index === */ --z-base: 1; --z-sticky: 50; --z-overlay: 80; --z-drawer: 90; --z-modal: 100; } @media (max-width: 768px) { :root { --topbar-height: 68px; } /* ESCALA DE ESPACIADO EN MÓVIL. Los cuatro tokens grandes son los que separan secciones, y estaban igual que en escritorio: 128px arriba y 128 abajo. En un móvil eso es un vacío de 256px entre sección y sección — media pantalla en blanco. Medido antes de tocarlo: en empresa.html se iban 1.532px solo en relleno vertical, el 18% de toda la página. Se tocan solo del 10 para arriba. Del 1 al 8 son separaciones internas de componentes (huecos de rejilla, relleno de botones) y encogerlas apretaría el diseño en vez de acortar la página. Comprobado que estos cuatro se usan únicamente en padding, margin y gap: ninguno define un ancho ni una altura, así que bajarlos no puede descuadrar nada. */ :root { --space-10: 44px; /* 64 */ --space-12: 56px; /* 96 */ --space-16: 72px; /* 128 */ --space-20: 88px; /* 160 */ } }