/* ========================================================================== tokens.css — origen único de los valores del sistema visual. Se carga al final del , junto a tecnomercado.css: define, no pinta. Va despues del tema porque el bloque puente de abajo redefine variables que style.css declara, y en CSS la ultima declaracion de :root es la que gana. Ninguna regla de este archivo aplica estilos a un selector; solo declara variables para que el resto del CSS (y el que inyecta script.js) las consuma. Por qué existe -------------- La plantilla trae `--theme-color` y nueve variantes numeradas que nadie usa, y el JavaScript del sitio tenía 167 colores escritos a mano sin una sola referencia a una variable: tres rojos distintos para el mismo concepto de error, y dos escalas de gris mezcladas (una de Tailwind, otra de otro kit). Cambiar el azul de marca obligaba a buscar y reemplazar en 34 archivos. Cómo se usa ----------- Siempre `var(--tm-x)`, nunca el hexadecimal. Si un valor no tiene token, es que falta el token, no que haya que escribir el hex. Los `--theme-color` de la plantilla se conservan: los consumen las 33 hojas de módulo del tema, que no se han migrado. Aquí quedan alineados con los tokens propios para que ambos mundos digan lo mismo mientras dure la mezcla. ========================================================================== */ :root { /* ---- Marca --------------------------------------------------------- */ --tm-brand: #003eac; /* azul Tecnomercado */ --tm-brand-hover: #002f83; /* el mismo, 12 % más oscuro */ --tm-brand-tint: #eef2f8; /* fondo suave para destacados */ --tm-brand-ink: #ffffff; /* texto sobre el azul (9,19:1) */ --tm-accent: #ffac00; /* ámbar de acento */ --tm-accent-ink: #111111; /* texto sobre ámbar (9,72:1) */ /* Rojo corporativo de Transbank. NO es el rojo de error: vive aparte justamente para que nadie lo confunda ni lo reutilice. */ --tm-webpay: #e30613; /* ---- Neutros ------------------------------------------------------- */ /* Una sola escala, con una pizca de azul para que case con la marca. Sustituye a las dos que convivían. Los pares -ink son legibles sobre blanco; los -line y -surface no llevan texto encima. */ --tm-ink: #0f172a; /* titulares */ --tm-ink-2: #1f2937; /* texto fuerte */ --tm-ink-3: #475467; /* texto secundario (6,9:1) */ --tm-ink-4: #5b6577; /* apoyo, etiquetas (5,4:1) */ --tm-ink-5: #6b7280; /* mínimo legible (4,9:1) */ --tm-line-strong: #cbd5e1; /* bordes marcados */ --tm-line: #d5dae1; /* bordes normales */ --tm-line-soft: #e2e8f0; /* separadores */ --tm-surface-3: #e9edf2; /* superficie hundida */ --tm-surface-2: #eef1f5; /* superficie alterna */ --tm-surface-1: #f1f5f9; /* fondo de bloque */ --tm-surface: #ffffff; /* superficie base */ --tm-ground: #f6f8fb; /* fondo de página */ /* ---- Semánticos ---------------------------------------------------- */ /* Un color por concepto. Antes había tres rojos (#dc2626, #e63946, #ef4444) usados indistintamente para lo mismo. */ --tm-ok: #1b8a4b; --tm-ok-strong: #15803d; --tm-ok-tint: #e7f7ec; --tm-ok-line: #b7e4c7; --tm-ok-ink: #1b4332; --tm-warn: #d97706; --tm-warn-strong: #b45309; --tm-warn-tint: #fbf0e2; --tm-warn-ink: #3f2d00; --tm-critical: #b02338; /* el único rojo de error */ --tm-critical-strong: #8d1c2d; --tm-critical-tint: #fbe9ec; --tm-critical-line: #f3c2cb; --tm-critical-ink: #7d182a; /* Franja de aviso del sitio en desarrollo */ --tm-notice: #f59e0b; --tm-notice-2: #fbbf24; /* ---- Tipografía ---------------------------------------------------- */ /* Solo se cargan dos familias. Las cuatro que la plantilla declaraba y nunca pedía a Google (Nunito, Outfit, Baloo 2, Playfair Display) caían en Arial sin avisar, en 29 reglas repartidas por 14 módulos. */ --tm-font-title: "Rethink Sans", "Segoe UI", system-ui, sans-serif; --tm-font-body: "Roboto", "Segoe UI", system-ui, sans-serif; /* Escala modular 1,25 — sustituye a los once tamaños sueltos del tema */ --tm-text-xs: 12px; --tm-text-sm: 14px; --tm-text-md: 16px; --tm-text-lg: 20px; --tm-text-xl: 25px; --tm-text-2xl: 31px; --tm-text-3xl: 39px; /* ---- Espaciado (base 4) -------------------------------------------- */ --tm-space-1: 4px; --tm-space-2: 8px; --tm-space-3: 12px; --tm-space-4: 16px; --tm-space-5: 20px; --tm-space-6: 24px; --tm-space-8: 32px; --tm-space-10: 40px; --tm-space-12: 48px; --tm-space-16: 64px; /* ---- Radios -------------------------------------------------------- */ /* De catorce valores distintos a cuatro más el círculo. */ --tm-radius-sm: 4px; --tm-radius-md: 8px; --tm-radius-lg: 16px; --tm-radius-pill: 999px; --tm-radius-circle: 50%; /* ---- Objetivo táctil ----------------------------------------------- */ --tm-target: 44px; /* ---- Foco ----------------------------------------------------------- */ --tm-focus-width: 2px; --tm-focus-offset: 2px; /* ---- Movimiento ----------------------------------------------------- */ --tm-ease: cubic-bezier(.4, 0, .2, 1); --tm-duration-fast: 150ms; --tm-duration: 250ms; /* ---- Elevación ------------------------------------------------------ */ --tm-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06); --tm-shadow-md: 0 4px 14px rgba(15, 23, 42, .08); --tm-shadow-lg: 0 24px 70px rgba(15, 23, 42, .35); /* ====================================================================== Puente con la plantilla Las 33 hojas del tema consumen `--theme-color` y compañía. Se redefinen aquí en función de los tokens propios para que no haya dos verdades. Cuando el tema termine de migrar, este bloque se borra entero. ====================================================================== */ --theme-color: var(--tm-brand); --secondary-color: var(--tm-ink-2); /* Las cuatro familias fantasma apuntan a las que sí se cargan. */ --title-font-two: var(--tm-font-title); --title-font-three: var(--tm-font-title); --title-font-four: var(--tm-font-title); --title-font-five: var(--tm-font-title); }