/* ============================================================================ DW JEANS — TOKENS · dirección «ÍNDIGO Y PUNTADA» ---------------------------------------------------------------------------- ESTE ES EL ÚNICO FICHERO DEL PROYECTO DONDE PUEDE HABER UN VALOR LITERAL. Todo lo demás consume var(). Si necesitas un color o una medida y no está aquí, la decisión es añadirlo aquí, no escribirlo en la regla. POR QUÉ SE CARGA EL ÚLTIMO El sitio nació como clon de tuNFC y arrastra tres capas heredadas (style.css, premium.css, refinamiento.css) que declaran sus propios tokens. Las propiedades personalizadas siguen la cascada: gana la última. Cargando esto al final, las ~3.300 líneas heredadas siguen funcionando tal cual y pasan a leer los valores nuevos. Cero reescritura, cero riesgo. LA DIRECCIÓN, EN UNA FRASE El índigo es el material que vendemos, no un adorno: manda en marca, en acción y en las superficies oscuras. El ámbar es el hilo del pespunte y aparece SOLO como línea, marca de estado o etiqueta — nunca como campo grande, que es donde el oro anterior perdía el contraste. CONTRASTE — medido con la fórmula WCAG 2.2, no estimado. Y medido contra las TRES superficies claras, no solo contra el fondo general: ahí es donde se escondía el único fallo de la primera ronda. tinta / papel ....... 17,51:1 índigo / papel ....... 13,16:1 tinta / lino ........ 15,36:1 índigo / lino ........ 11,55:1 lavado / papel ........ 6,31:1 lavado / lino ......... 5,53:1 lavado / línea ........ 4,51:1 papel / índigo ...... 13,16:1 bruma / índigo ....... 5,04:1 tierra / papel ........ 6,05:1 puntada / índigo ....... 4,73:1 tinta / puntada ...... 6,29:1 éxito / papel ........ 6,17:1 error / papel ........ 7,22:1 El anillo de foco es ÍNDIGO, no ámbar: el ámbar daba 2,79:1 sobre papel y el mínimo para un elemento no textual es 3:1. Se descartó por medición. ========================================================================== */ :root { /* --- SUPERFICIE ------------------------------------------------------- */ --c-papel: #fbfaf7; /* fondo general */ --c-lino: #efebe2; /* superficie alterna, tarjetas, franjas */ --c-linea: #dcd5c8; /* bordes suaves sobre claro */ /* --- TINTA ------------------------------------------------------------ */ --c-tinta: #131519; /* texto principal */ /* Estaba en #5c6b8a y daba 4,4997:1 sobre --c-lino. Sobre papel pasaba (5,13) y por eso la primera medición lo dio por bueno: solo se comprobó contra el fondo general. Pero --on-surface-variant ES este color y --surface-container ES lino, así que la combinación que falla se pinta de verdad. Oscurecido hasta que aguanta en las TRES superficies claras: papel 6,31 · lino 5,53 · línea 4,51. */ --c-lavado: #525d77; /* texto secundario sobre claro */ --c-bruma: #8e9dbc; /* texto secundario sobre índigo */ /* --- MARCA Y ACCIÓN --------------------------------------------------- */ --c-indigo: #1e2c4f; /* el denim: marca, botón, foco */ --c-indigo-alto: #152039; /* estado activo / superficies oscuras */ --c-indigo-velo: rgba(30, 44, 79, 0.08); /* fondo de selección */ --c-indigo-borde: rgba(30, 44, 79, 0.22); /* Los dos anteriores, al revés: para lo que se pinta SOBRE índigo. Hacían falta al arreglar el aviso de cookies, donde un botón fantasma con borde índigo sobre índigo no se veía. */ --c-papel-velo: rgba(251, 250, 247, 0.12); --c-papel-borde: rgba(251, 250, 247, 0.38); /* --- LA PUNTADA (el hilo del pespunte) -------------------------------- */ --c-puntada: #d98324; /* sobre índigo: línea, etiqueta, marca activa */ --c-puntada-tierra: #8a5310; /* sobre papel: línea y texto */ /* Velo oscuro para lo que se pinta ENCIMA de una foto (el botón «Ampliar»). Sobre foto no hay contraste garantizado: por eso lleva fondo propio. */ --c-tinta-velo: rgba(19, 21, 25, 0.62); /* --- SEMÁNTICA -------------------------------------------------------- */ --c-exito: #1f6b4a; --c-error: #a32118; /* Marca ajena. Está aquí, y no suelta en el markup, para que el barrido de «cero hex fuera de tokens» siga dando cero. */ --c-linkedin: #0a66c2; --c-linkedin-borde: rgba(10, 102, 194, 0.3); /* --- TIPOGRAFÍA ------------------------------------------------------- */ /* Bricolage Grotesque para titulares: grotesca de etiqueta de trabajo, que es de donde viene el jean. Inter para leer. Antes: 3 familias y 12 cortes (uno de ellos, Inter, no se usaba nunca). Ahora: 2 familias y 5 cortes. */ --dw-display: 'Bricolage Grotesque', 'Archivo', system-ui, sans-serif; --dw-texto: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; /* --- ESCALA TIPOGRÁFICA ---------------------------------------------- Ocho pasos. En la portada llegué a contar 25 tamaños pintados a la vez, con cinco de ellos entre 9,92 y 11,52 px: indistinguibles. Esto es lo que queda. --paso-* ya venía de refinamiento.css y se conserva. */ --paso-xs: 0.75rem; /* 12px — legales, microcopia */ --paso-sm: 0.875rem; /* 14px — apoyo, metadatos */ --paso-base: 1rem; /* 16px — cuerpo */ --paso-md: 1.125rem; /* 18px — entradilla */ --paso-lg: 1.375rem; /* 22px — título de tarjeta */ --paso-xl: 1.75rem; /* 28px — título de sección */ --paso-2xl: 2.25rem; /* 36px — título de página */ --paso-3xl: clamp(2.5rem, 6vw, 4rem); --peso-normal: 400; --peso-medio: 500; --peso-fuerte: 600; --peso-titulo: 700; --alto-apretado: 1.15; --alto-normal: 1.55; /* --- ESPACIADO — base de 4 px ----------------------------------------- */ --e-1: 0.25rem; --e-2: 0.5rem; --e-3: 0.75rem; --e-4: 1rem; --e-5: 1.5rem; --e-6: 2rem; --e-7: 3rem; --e-8: 4rem; /* --- RADIOS — cuatro, no dieciocho ------------------------------------ */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-xl: 16px; /* se fusiona con lg: 24 y 16 no se distinguían */ --radius-full: 999px; /* --- SOMBRAS — tres, no treinta y dos --------------------------------- */ --shadow-sm: 0 1px 2px rgba(19, 21, 25, 0.06); --shadow-md: 0 4px 12px rgba(19, 21, 25, 0.08); --shadow-lg: 0 12px 32px rgba(19, 21, 25, 0.12); /* --- MOVIMIENTO ------------------------------------------------------- */ --curva-salida: cubic-bezier(0.16, 1, 0.3, 1); --curva-suave: cubic-bezier(0.4, 0, 0.2, 1); --dur-corta: 150ms; --dur-media: 220ms; --dur-larga: 300ms; --transition: var(--dur-media) var(--curva-suave); /* --- FOCO — índigo, y del grosor que se ve ---------------------------- */ --foco-color: var(--c-indigo); --foco-grosor: 3px; --foco-salto: 3px; /* --- LA PUNTADA COMO OBJETO ------------------------------------------- */ --puntada-claro: 2px dashed var(--c-puntada-tierra); --puntada-oscuro: 2px dashed var(--c-puntada); --tacto-min: 44px; /* zona táctil mínima en móvil */ /* ========================================================================== PUENTE CON LO HEREDADO Debajo no hay decisiones nuevas: cada nombre viejo pasa a apuntar al token que le corresponde. Es lo que hace que cambiar la marca cueste treinta líneas y no tres mil. ====================================================================== */ /* Superficies (–– 65 usos de --surface-high) */ --surface: var(--c-papel); --surface-low: var(--c-lino); --surface-high: var(--c-papel); --surface-container: var(--c-lino); --dw-paper: var(--c-papel); --dw-paper-2: var(--c-papel); --dw-paper-3: var(--c-lino); /* Texto */ --on-surface: var(--c-tinta); --on-surface-variant: var(--c-lavado); --on-surface-dim: var(--c-lavado); --dw-on-light: var(--c-tinta); --dw-muted: var(--c-lavado); --dw-on-dark: var(--c-papel); --dw-on-dark-dim: var(--c-bruma); /* Superficies oscuras: dejan de ser negras y pasan a ser denim */ --dw-ink: var(--c-indigo-alto); --dw-ink-2: var(--c-indigo); --dw-ink-3: var(--c-indigo); /* El color primario. Se llamaba «cyan» por herencia de tuNFC y valía oro; ahora vale índigo. Estos ocho nombres son deuda del clon: se conservan porque los consumen 3.300 líneas, y se corrigen apuntándolos bien. */ --dw-cyan: var(--c-indigo); --dw-cyan-strong: var(--c-indigo-alto); --dw-cyan-dim: var(--c-lavado); --dw-cyan-border: var(--c-indigo-borde); --dw-cyan-glow: var(--c-indigo-velo); --dw-bright: var(--c-indigo-alto); /* El oro decorativo pasa a ser el hilo del pespunte */ --dw-gold: var(--c-puntada); --dw-gold-light: var(--c-puntada); --dw-gold-deep: var(--c-puntada-tierra); --dw-gold-sobre-oscuro: var(--c-puntada); --dw-gold-sobre-claro: var(--c-puntada-tierra); /* Tokens semánticos del clon, que se me habían escapado del puente: 28 usos entre CSS y markup. Sus valores originales eran los de una paleta genérica y ninguno llegaba a AA sobre papel — el verde #10B981 de «Disponible — 10 unidades», en la ficha de producto, daba 2,43:1. */ --success: var(--c-exito); /* 6,17:1 sobre papel */ --danger: var(--c-error); /* 7,22:1 */ --warning: var(--c-puntada-tierra); --info: var(--c-indigo); /* Líneas */ --dw-line: var(--c-linea); --dw-line-dark: rgba(251, 250, 247, 0.16); --outline-variant: var(--c-linea); /* Familias heredadas */ --dw-serif: var(--dw-display); --dw-sans: var(--dw-texto); --font-display: var(--dw-display); --font-body: var(--dw-texto); /* Sombras heredadas: las de color desaparecen. Una sombra teñida de oro sobre papel no se ve; solo ensucia. */ --shadow-cyan: var(--shadow-sm); --shadow-cyan-strong: var(--shadow-md); --shadow-emerald-aura: var(--shadow-md); --whatsapp-glow: rgba(19, 21, 25, 0.16); } /* ============================================================================ FOCO — una sola regla, y gana a todo Antes: anillo dorado a 2,41:1, por debajo del mínimo de 3:1. Ahora índigo a 13,16:1 sobre papel. Sobre superficie oscura se invierte al hilo ámbar, que ahí sí llega (4,73:1). ========================================================================== */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: var(--foco-grosor) solid var(--foco-color); outline-offset: var(--foco-salto); border-radius: var(--radius-sm); } /* `.site-footer` estaba aquí y NO existe en el proyecto: el pie es