/* GENERADO — no editar. Fuente: 02-brand/tokens/tokens.css * Regenerar con: 05-website/build.py */ /* Wall Experts — design tokens * FUENTE ÚNICA DE VERDAD DE COLOR. * Fluye hacia el sitio, el Figma de desarrollo y la papelería. Nunca al revés. * Si aparece un hex fuera de este archivo, es un bug. * * Los valores salen de MEDIR el markup del 2026-08-03 * (`gemini-2.5-flash-image_Residential_interior_painting_website_white_version-0.jpg`), * no de estimarlos a ojo. Dónde el markup falla accesibilidad, se corrige y se * deja escrito el porqué: la marca no puede depender de un color que no se lee. */ :root { /* ---- Marca ---- */ --we-navy: #0D437F; /* titular. Medido del markup. 9.88:1 sobre blanco */ --we-navy-deep: #104384; /* iconos y trazos. Medido. 8.76:1 sobre #F2F3F5 */ --we-navy-ink: #294664; /* etiquetas bajo icono. Medido. 9.75:1 */ /* El cian del markup, EXACTO. 2.15:1 contra blanco: no lleva texto blanco * encima jamás. Se conserva porque es el color de marca y funciona como * relleno decorativo o con texto navy. */ --we-cyan: #66BBE2; /* Cian para RELLENO CON TEXTO BLANCO. Mismo matiz (198°) y misma saturación * (68%) que el del markup; solo baja la luz del 64% al 38%. Da 4.86:1 con * blanco. Es el que usa el botón principal. * * La alternativa era conservar #66BBE2 y poner el texto en navy (4.60:1, que * también pasa). Se descarta: un botón principal con texto oscuro sobre * pastel se lee como deshabilitado, y el markup lo dibuja con texto blanco. */ --we-cyan-deep: #1F79A3; /* Cian para TEXTO sobre fondo claro. Mismo problema al revés. */ --we-cyan-text: #1A6B91; /* ---- Neutros ---- */ --we-white: #FFFFFF; --we-paper: #F5F6F8; /* fondo del header. Medido */ --we-mist: #F2F3F5; /* círculo de icono. Medido */ /* El markup dibuja el borde del botón secundario en #E2E3E5: 1.28:1 sobre * blanco. Un control de interfaz necesita 3:1 para que se vea dónde acaba, * así que el botón "View Our Work" del markup es, literalmente, invisible. * #8B9199 es el más claro que llega (3.18:1). */ --we-line: #8B9199; --we-line-soft: #E2E3E5; /* separadores decorativos, no bordes de control */ /* Eyebrow y texto secundario. El markup lo dibuja en #6B727A, que da 4.87:1 sobre BLANCO y pasa — pero 4.39:1 sobre --we-mist, que es el fondo de la banda alterna, y ahí falla. Se oscurece lo justo: #626971 da 5.56 sobre blanco y 5.01 sobre la banda. El markup medía contra blanco y por eso no lo veía. */ --we-slate: #626971; --we-ink: #404549; /* lede. Medido. 9.70:1 */ --we-ink-nav: #394750; /* nav. Medido. 8.86:1 sobre --we-paper */ /* ---- Semánticos ---- */ --we-bg: var(--we-white); --we-surface: var(--we-white); --we-surface-alt: var(--we-mist); --we-text: var(--we-ink); --we-text-muted: var(--we-slate); --we-border: var(--we-line); --we-primary: var(--we-cyan-deep); --we-primary-hover: #17627F; --we-heading: var(--we-navy); --we-accent: var(--we-navy-deep); /* ---- Estado ---- */ --we-success: #1E7A4B; --we-warning: #A8681B; --we-danger: #B3261E; /* ---- Espaciado ---- */ --we-space-1: 4px; --we-space-2: 8px; --we-space-3: 12px; --we-space-4: 16px; --we-space-5: 24px; --we-space-6: 32px; --we-space-7: 48px; --we-space-8: 64px; --we-space-9: 96px; --we-space-10: 128px; /* ---- Radios ---- * El markup usa pastilla completa en los dos botones del héroe y en el CTA * del header. Los círculos de icono son circunferencias exactas. */ --we-radius-sm: 6px; --we-radius-md: 10px; --we-radius-lg: 16px; --we-radius-xl: 20px; --we-radius-pill: 999px; /* ---- Layout ---- * El markup mide 1024×1024, o sea que es un render CUADRADO de una página que * en pantalla es apaisada. Los porcentajes horizontales son utilizables; las * proporciones verticales NO se pueden trasladar tal cual. * header 9.5% de alto * héroe termina en 69.8% * texto arranca en el 7% del ancho */ --we-container: 1320px; --we-gutter: var(--we-space-5); --we-bp-md: 810px; --we-bp-lg: 1200px; --we-bp-xl: 1440px; /* ---- Tipografía ---- * Manrope, autohospedada en WOFF2 y reutilizada de Home Refresh y SparkBin: * cero peticiones de red por fuentes, que es un punto fijo del workflow. */ --we-font-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --we-font-display: var(--we-font-sans); --we-text-xs: 12px; --we-text-sm: 14px; --we-text-base: 16px; --we-text-lg: 18px; --we-text-xl: 22px; --we-text-2xl: 28px; --we-text-3xl: 36px; --we-text-4xl: 48px; --we-text-5xl: 60px; --we-leading-display: 1.1; --we-leading-tight: 1.15; --we-leading-normal: 1.55; --we-leading-loose: 1.6; --we-tracking-tight: -.02em; --we-tracking-tighter: -.04em; --we-tracking-caps: .08em; /* ---- Sombras ---- */ --we-shadow-sm: 0 1px 2px rgba(13,67,127,.06); --we-shadow-md: 0 4px 14px rgba(13,67,127,.08); --we-shadow-lg: 0 12px 32px rgba(13,67,127,.10); } /* ---- Modo oscuro ---- * NO se implementa. En Home Refresh se retiró el 2026-07-31 porque las hojas * por página usaban hex claros fijos y el resultado era medio sitio oscuro. * Empezar sin él es más barato que quitarlo después. */ /* NOTAS DE ACCESIBILIDAD * Ratios medidos sobre los colores reales del markup, no estimados. * * Dos correcciones frente al markup, ambas obligatorias: * * 1. CTA. #66BBE2 con texto blanco da 2.15:1 contra un mínimo de 4.5. El * botón principal del markup —"Book a Consultation" y "Request a Free * Quote"— es ilegible tal cual está dibujado. --we-cyan-deep lo resuelve * conservando matiz y saturación. * * 2. Borde del botón secundario. #E2E3E5 sobre blanco da 1.28:1 contra un * mínimo de 3 para control de interfaz. "View Our Work" no tiene borde * visible en la práctica. * * El resto de la paleta del markup pasa. --we-slate (eyebrow) va justo, 4.87:1: * no bajar su luminosidad ni usarlo a menos de 14px. */