/* ============================================================================= Grupo Automotores — sitio público tokens.css · el sistema de diseño Dirección B: Sora + JetBrains Mono + Inter, radio 6px, lenguaje de producto. REGLAS QUE NO SE NEGOCIAN ------------------------- 1. Cero colores hardcodeados fuera de este archivo. Todo sale de un --ga-*. 2. El dorado es FILETE, no relleno: líneas de 1-2px, subrayados, bordes, iconos. Sólo el CTA principal de cada pantalla puede ser dorado sólido. Un botón dorado grande y macizo se lee amarillo barato. 3. NUNCA --ga-gold sobre fondo claro: no llega a contraste AA (2.6:1). Sobre marfil va --ga-gold-ink (4.6:1). Hay un par por eso. 4. Todo número o rótulo va en --ga-font-mono con cifras tabulares: precios, km, años, patentes, fechas, versalitas. Es esto —más que cualquier color— lo que hace que el sitio se lea técnico. 5. Nada de píldoras (border-radius: 50px), tilt 3D, glows ni sombras de 50px de blur. Ese era el lenguaje del sitio anterior. Este archivo NO define componentes, sólo valores. Los componentes van en ga.css. Ver el plan de rediseño para el porqué de cada decisión. ========================================================================== */ :root { /* --------------------------------------------------------------------- CARBÓN — la banda oscura. No es negro: #211F1D es el marrón muy oscuro del logo. Ese calor es medio punto del premium; en negro puro la paleta se vuelve fría. --------------------------------------------------------------------- */ --ga-ink-900: #1A1815; /* fondo de banda oscura */ --ga-ink-800: #211F1D; /* superficie — el color exacto del logo */ --ga-ink-700: #2E2B26; /* elevado: mapas, placeholders, insets */ --ga-ink-600: #413C34; /* bordes sobre oscuro cuando hace falta cuerpo */ /* --------------------------------------------------------------------- MARFIL — la banda clara. El catálogo y las fichas van acá: las fotos de auto piden fondo claro. --------------------------------------------------------------------- */ --ga-bone-50: #FAF8F4; /* fondo de banda clara */ --ga-bone-0: #FFFFFF; /* tarjeta */ --ga-bone-200: #EFEAE1; /* borde / superficie hundida (placeholder de foto) */ --ga-bone-300: #DFD8CB; /* borde con más cuerpo: inputs, miniaturas */ /* --------------------------------------------------------------------- DORADO — el color de marca. Un solo acento, tres usos. --------------------------------------------------------------------- */ --ga-gold: #C5A149; /* marca. SÓLO sobre carbón */ --ga-gold-ink: #A8863A; /* sobre marfil — el que cumple AA */ --ga-gold-lit: #E0C078; /* hover sobre carbón */ --ga-gold-a12: rgba(197, 161, 73, .12); /* fondo de estado activo, oscuro */ --ga-gold-a20: rgba(197, 161, 73, .20); /* bordes y divisores sobre carbón */ --ga-gold-a30: rgba(197, 161, 73, .30); /* borde de panel destacado */ --ga-gold-ring: rgba(197, 161, 73, .22); /* anillo de foco sobre carbón */ --ga-goldink-a08: rgba(168, 134, 58, .08); /* estado activo, claro */ --ga-goldink-a16: rgba(168, 134, 58, .16); /* anillo de foco sobre marfil */ --ga-goldink-a30: rgba(168, 134, 58, .30); /* costura entre dos bandas claras */ /* --------------------------------------------------------------------- TEXTO — cada superficie tiene su par. Nunca cruzarlos. --------------------------------------------------------------------- */ --ga-on-ink: #F5F1EA; /* texto sobre carbón */ --ga-on-ink-mut: #A8A196; /* secundario sobre carbón */ --ga-on-bone: #211F1D; /* texto sobre marfil */ --ga-on-bone-mut: #6B6459; /* secundario sobre marfil */ /* Bordes translúcidos sobre carbón (no hay un gris que funcione en las dos) */ --ga-line-ink: rgba(245, 241, 234, .16); --ga-line-ink-2: rgba(245, 241, 234, .22); --ga-fill-ink: rgba(250, 248, 244, .055); /* fondo de input sobre carbón */ /* --------------------------------------------------------------------- SEMÁNTICOS — separados del acento a propósito. El dorado es la marca; estos son estado. Nunca se mezclan. Reemplazan al `text-danger` de Bootstrap, que hoy se usa 21 veces en templates/web/ como si fuera un color de acento (incluido todo el bloque de contacto del footer). No pertenece a ninguna paleta de acá. --------------------------------------------------------------------- */ --ga-ok: #4A7C59; --ga-ok-ink: #3D6749; --ga-warn: #B8842E; --ga-danger: #A94436; /* errores de formulario, sobre marfil */ --ga-danger-lit: #D2705F; /* errores sobre carbón */ --ga-wsp: #25D366; /* WhatsApp: color de la marca ajena, intocable */ /* --------------------------------------------------------------------- TIPOGRAFÍA --------------------------------------------------------------------- */ --ga-font-disp: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif; --ga-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --ga-font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Consolas, monospace; /* Escala. Los display usan clamp() para no necesitar media queries: el piso es el tamaño de teléfono y el techo, el de escritorio. Los techos subieron una talla. Estaban en 48/36/28 y el sistema pedía 58/40/34: la diferencia no se nota en una captura al 100%, pero en un monitor real el título del hero dejaba de ser un titular y el h2 de banda no se despegaba del párrafo que tenía debajo. El piso no se toca — en un teléfono 58px no entran. */ --ga-t-hero: clamp(1.75rem, 4.4vw, 3.625rem); /* 28 → 58 */ --ga-t-h1: clamp(1.5rem, 3.2vw, 2.5rem); /* 24 → 40 */ --ga-t-h2: clamp(1.375rem, 2.6vw, 2.125rem); /* 22 → 34 */ --ga-t-h3: 1.375rem; /* 22 */ --ga-t-body: 1rem; --ga-t-sm: .875rem; --ga-t-xs: .8125rem; --ga-t-lab: .6875rem; /* versalitas en mono */ /* Sora se aprieta; nunca pasa de 600. El sitio anterior usaba Inter 900 con letter-spacing -2px, que es exactamente el grito que hay que evitar. */ --ga-track-disp: -.022em; --ga-track-name: -.012em; --ga-track-num: -.03em; --ga-track-lab: .14em; /* versalitas: tracking POSITIVO */ --ga-w-reg: 400; --ga-w-med: 500; --ga-w-semi: 600; /* tope del display */ --ga-w-mono-bold: 700; /* sólo para precios */ --ga-lh-tight: 1.15; --ga-lh-snug: 1.3; --ga-lh-body: 1.6; --ga-measure: 66ch; /* ancho máximo de texto corrido */ /* --------------------------------------------------------------------- FORMA — esquina viva. Cero radios. Estaban en 4/6/8/10px. El sistema no tiene ninguna esquina redondeada: ni las tarjetas, ni los botones, ni los inputs, ni los chips. Es lo que separa un catálogo de un panel de aplicación, y es la decisión que más cambia la lectura del sitio después del color. Los tokens se conservan —en vez de borrarlos y editar 200 llamadas— para que la decisión viva en UN lugar y se pueda revertir cambiando cuatro números. Que sigan existiendo no es deuda: es el interruptor. --------------------------------------------------------------------- */ --ga-r-xs: 0; --ga-r: 0; --ga-r-lg: 0; --ga-r-xl: 0; /* Sin elevación. Lo que separa un plano de otro es una línea, no una sombra: el sistema es ortogonal y las superficies se apoyan, no flotan. Mismo criterio que los radios — el token queda como interruptor. */ --ga-el: none; --ga-el-2: none; /* --------------------------------------------------------------------- ESPACIO Y LAYOUT --------------------------------------------------------------------- */ --ga-s-1: 4px; --ga-s-2: 8px; --ga-s-3: 12px; --ga-s-4: 16px; --ga-s-5: 20px; --ga-s-6: 24px; --ga-s-8: 32px; --ga-s-10: 40px; --ga-s-12: 48px; --ga-s-16: 64px; --ga-s-20: 80px; /* --------------------------------------------------------------------- ANCHO — el sitio es a sangre, no una columna centrada. Era `1200px` centrado. En un monitor de 1900 eso deja 350px de fondo muerto a cada lado y el sitio se lee como una hoja apoyada sobre una mesa: la barra de búsqueda del inicio flotaba en el medio en vez de cruzar la pantalla, y la banda oscura de entregas perdía la mitad de su superficie, que es justo lo que la hace funcionar. No hay tope: lo que evita que un párrafo se estire a 300 caracteres en una pantalla enorme es el `max-width` en `ch` de cada bloque de texto, que es donde tiene que estar. Una grilla de tarjetas, en cambio, gana columnas — que es lo que uno quiere de una pantalla más grande. --------------------------------------------------------------------- */ --ga-wrap: 100%; --ga-gutter: 40px; /* 54px, contra los 72px del sitio anterior. Ojo: el smooth-scroll de ga.js compensa esta altura al saltar a un ancla — si cambia acá, cambia allá. */ /* 72 y no 54: con el menú a cinco destinos la barra tiene aire de sobra, y una navbar apretada sobre un hero de 620px se lee como una franja pegada arriba en vez de como la cabecera del sitio. */ --ga-nav-h: 72px; /* --------------------------------------------------------------------- MOVIMIENTO — fade + rise, y nada más. Se eliminan a propósito: el ease con rebote, el tilt 3D de las cards, los glows y los contadores animados del sitio anterior. --------------------------------------------------------------------- */ --ga-ease: cubic-bezier(.4, 0, .2, 1); --ga-dur: 400ms; --ga-dur-fast: 180ms; }