/* ============================================================================ tokens.css — Design tokens de Mercurio Tracker ---------------------------------------------------------------------------- ÚNICA fuente de verdad visual: ninguna vista escribe colores, tamaños ni espaciados a mano. Si algo se repite, tokenízalo aquí. Paleta oficial Mercurio Bodega (Insumos/GuiaEstilo/Visual). ============================================================================ */ /* ---------------------------------------------------------------------------- Tipografías locales (sin CDN, subsets latinos, variables): Casablanca URW solo para la marca; Inter Tight para todo el texto (legible en móvil malo, números tabulares DE VERDAD para plata y tablas); Space Grotesk como voz del EQUIPO INTERNO (títulos de asesor/admin/tablero: carácter sin perder profesionalismo). Dos familias + la marca, ni una más (ítem 14). --------------------------------------------------------------------------- */ @font-face { font-family: 'Casablanca'; src: url('../assets/fonts/Casablanca-Light.otf') format('opentype'); font-weight: 300; font-display: swap; } @font-face { font-family: 'Casablanca'; src: url('../assets/fonts/Casablanca-Medium.otf') format('opentype'); font-weight: 500; font-display: swap; } @font-face { font-family: 'Casablanca'; src: url('../assets/fonts/Casablanca-Bold.otf') format('opentype'); font-weight: 700; font-display: swap; } @font-face { font-family: 'Inter Tight'; src: url('../assets/fonts/InterTight-Variable-latin.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Space Grotesk'; src: url('../assets/fonts/SpaceGrotesk-Variable-latin.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; } :root { /* -------------------------------------------------------------------------- 1 · PALETA DE MARCA (oficial — no inventar colores fuera de esta gama) ------------------------------------------------------------------------- */ /* Rojos: RESERVADOS para excepciones, errores y acentos de marca */ --rojo-vino: #7e1922; --rojo-marca: #981913; --rojo-pollito: #c4292d; /* rojo de la cresta del pollito (SVG oficial) */ /* Dorados / amarillos: acento principal del producto */ --dorado-arena: #c2966d; --dorado-bronce: #a96b03; --dorado-ambar: #c78001; --dorado-mostaza: #deb606; --amarillo-marca: #ffc70b; --amarillo-pollito: #ffd402; /* Neutros: superficies y texto */ --negro: #181818; --gris-oscuro: #404040; --gris-medio: #8d8d8c; --gris-claro: #cacac9; --blanco: #ffffff; /* Derivados suaves (mezclas de la propia paleta para fondos y bordes) */ --crema: #faf7f0; /* fondo general: blanco con 3% de dorado-arena */ --crema-media: #f3ede1; /* superficies secundarias */ --dorado-velo: #fdf3d2; /* fondo de resaltado dorado */ --rojo-velo: #f9e9e8; /* fondo de excepción */ --gris-velo: #efeeea; /* fondo neutro suave */ --borde-suave: #e4e0d5; /* bordes de tarjetas y campos */ /* AA: dorado oscurecido para texto/enlaces sobre blanco (≥ 4.5:1) */ --dorado-texto: #96610a; /* -------------------------------------------------------------------------- 2 · SEMÁNTICOS (lo que consumen los componentes) ------------------------------------------------------------------------- */ --color-fondo: var(--crema); --color-superficie: #fdf9ec; /* manila claro: NINGÚN fondo blanco puro en la app */ --color-superficie-2: var(--crema-media); --color-superficie-oscura: var(--negro); --color-texto: var(--negro); --color-texto-2: #2f2a22; /* texto secundario: casi negro cálido (legible en papel) */ --color-texto-suave: #6a5f4d; /* metadatos: gris cálido, AA sobre papel; nunca texto corrido largo */ --color-texto-inverso: var(--blanco); --color-borde: var(--borde-suave); --color-borde-fuerte: var(--gris-claro); --color-acento: var(--amarillo-marca); --color-acento-fuerte: var(--dorado-ambar); --color-acento-texto: var(--dorado-texto); --color-marca: var(--rojo-marca); --color-excepcion: var(--rojo-marca); --color-excepcion-oscuro: var(--rojo-vino); --color-excepcion-velo: var(--rojo-velo); --color-exito: var(--dorado-ambar); --color-exito-velo: var(--dorado-velo); --color-foco: var(--dorado-ambar); --color-icono: #7a520a; /* bronce profundo: iconos legibles sobre papel y kraft */ --rojo-sello: #b3282c; /* el rojo de la cresta, como tinta postal de la marca */ /* Colores por ESTADO del pedido: los usan badges, timeline, stepper, mapa y chips — el MISMO color en todo lugar donde aparezca el estado. */ --est-venta_registrada: #8a7a5c; /* venta registrada: papel kraft oscuro, aún sin comprar */ --est-venta_registrada-texto: #ffffff; --est-compra_realizada: var(--amarillo-marca); --est-compra_realizada-texto: #181818; --est-recibido_importador: #2e6ca8; --est-transito_internacional: #0e7674; --est-en_aduana: #5b49a8; --est-bodega_mercurio: #55731a; --est-despachado: #b35b0a; --est-entregado: #1f7a41; /* Colores SEMÁNTICOS de acción: cada tipo de botón/sello tiene el suyo y se reconoce sin leer. Con textura de papel encima quedan de la casa. */ --accion-ok: #2e8b57; /* confirmar, aplicar, aprobar */ --accion-ok-oscuro: #1f6b42; --accion-ok-velo: #e4f2e8; --accion-no: #b3282c; /* rechazar, borrar, cancelar duro */ --accion-no-oscuro: #8f1c1f; --accion-no-velo: #f7e4e4; --accion-info: #3f6d8e; /* enviar, proponer, informar */ --accion-info-oscuro: #2f5670; --accion-info-velo: #e3edf4; --accion-lila: #7a5ea8; /* solicitudes especiales, datos */ --accion-lila-oscuro: #5b4485; --accion-lila-velo: #efe9f6; /* -------------------------------------------------------------------------- 3 · TIPOGRAFÍA ------------------------------------------------------------------------- */ /* Casablanca queda RESERVADA para la marca (wordmark y sello): es lo que la hace especial. En títulos de interfaz leía "juguete"; una herramienta de trabajo titula con la misma familia del texto, en pesado y compacto. */ --fuente-marca: 'Casablanca', 'Inter Tight', system-ui, sans-serif; --fuente-titulos: 'Inter Tight', system-ui, -apple-system, sans-serif; --fuente-texto: 'Inter Tight', system-ui, -apple-system, sans-serif; /* Voz del EQUIPO: títulos de las pantallas internas (asesor/admin/tablero) */ --fuente-panel: 'Space Grotesk', 'Inter Tight', system-ui, sans-serif; --texto-2xs: 0.75rem; /* 12px — piso absoluto: contadores y sellos, nunca texto */ --texto-xs: 0.8125rem; /* 13px — solo metadatos, nunca texto corrido */ --texto-sm: 0.875rem; /* 14px — etiquetas y tablas densas */ --texto-base: 1rem; /* 16px — mínimo para texto corrido (dislexia) */ --texto-md: 1.125rem; /* 18px */ --texto-lg: 1.1875rem; /* 19px — H3 */ --texto-xl: 1.4375rem; /* 23px — H2 */ --texto-2xl: 1.75rem; /* 28px — H1: presencia sin gritar */ --peso-normal: 400; --peso-medio: 500; --peso-semibold: 600; --peso-titulo: 600; /* títulos en SemiBold */ --interlineado: 1.6; /* ≥ 1.5 (dislexia) */ --interlineado-titulos: 1.25; --ancho-lectura: 62ch; /* líneas ≤ 70 caracteres */ /* -------------------------------------------------------------------------- 4 · ESPACIADO Y DENSIDAD ------------------------------------------------------------------------- */ --esp-1: 0.25rem; /* 4px */ --esp-2: 0.5rem; /* 8px */ --esp-3: 0.75rem; /* 12px */ --esp-4: 1rem; /* 16px */ --esp-5: 1.5rem; /* 24px */ --esp-6: 2rem; /* 32px */ --esp-7: 3rem; /* 48px */ /* Factor de densidad: 1 = cómoda; 0.85 compacta */ --densidad: 1; --esp-tarjeta: calc(var(--esp-5) * var(--densidad)); --esp-celda: calc(var(--esp-3) * var(--densidad)); /* -------------------------------------------------------------------------- 5 · FORMA — radios contenidos y uniformes (El radio asimétrico "de firma" se retiró: en pantalla leía capricho, no marca. Los alias --radio-firma* se conservan por compatibilidad, pero resuelven a esquinas parejas.) ------------------------------------------------------------------------- */ --radio-xs: 6px; --radio-sm: 8px; --radio-md: 10px; --radio-lg: 12px; --radio-recorte: var(--radio-md); --radio-firma: var(--radio-md); --radio-firma-sm: var(--radio-sm); --radio-firma-lg: var(--radio-lg); --radio-pastilla: 999px; /* -------------------------------------------------------------------------- 6 · ELEVACIÓN — casi plana. La jerarquía la dan el borde y el fondo; la sombra solo despega lo que flota de verdad (menús, modales). ------------------------------------------------------------------------- */ --sombra-1: 0 1px 2px rgba(24, 24, 24, 0.05); --sombra-2: 0 1px 2px rgba(24, 24, 24, 0.05), 0 4px 12px -2px rgba(24, 24, 24, 0.08); --sombra-3: 0 2px 4px rgba(24, 24, 24, 0.06), 0 16px 40px -12px rgba(24, 24, 24, 0.18); /* -------------------------------------------------------------------------- 7 · MOVIMIENTO — funcional, nunca decorativo. El "rebote" se retiró: --curva-rebote queda como alias por compatibilidad. --anim-factor: 1 = completa · 0.5 = sutil · 0 = apagada (prefers-reduced-motion lo controla). Toda duración se multiplica por él. ------------------------------------------------------------------------- */ --anim-factor: 1; --dur-rapida: calc(120ms * var(--anim-factor)); --dur-media: calc(200ms * var(--anim-factor)); --dur-lenta: calc(300ms * var(--anim-factor)); --dur-escena: calc(450ms * var(--anim-factor)); --curva-salida: cubic-bezier(0.25, 0.6, 0.3, 1); --curva-rebote: var(--curva-salida); /* -------------------------------------------------------------------------- 8 · MARCA — textura kraft y logos (el superadmin puede reemplazarlos) ------------------------------------------------------------------------- */ --textura-kraft: url('../assets/img/kraft.webp'); --kraft-opacidad: 0.8; /* la guía pide ~80 % de opacidad */ --logo-principal: url('../assets/img/logo-lateral.webp'); --logo-inverso: url('../assets/img/logo-lateral-blanco.webp'); /* Recursos gráficos oficiales (paquete VSG). Ninguna superficie de la app queda en color plano: el papel y el cartón llevan su grano real. */ --textura-carton: url('../assets/img/decor/carton.webp'); --textura-papel: url('../assets/img/decor/papel.jpg'); /* Adornos (PNG con transparencia). Van SIEMPRE detrás del contenido, con pointer-events:none, y solo en zonas vacías. Del paquete se descartaron las tablillas y las cuerdas: una tablilla vacía se lee como etiqueta a la que no le cargó el texto, y una cuerda amarilla horizontal se confunde con un divisor de interfaz (el amarillo de marca es el único señalador de acción). */ --decor-caja: url('../assets/img/decor/caja-productos.webp'); --decor-sello: url('../assets/img/decor/sello.png'); /* -------------------------------------------------------------------------- 9 · ESTADOS DEL PEDIDO — color de apoyo (NUNCA es el único canal: cada estado lleva además icono + etiqueta + posición en el timeline) ------------------------------------------------------------------------- */ --estado-progreso-fondo: var(--gris-velo); --estado-progreso-texto: #4a3a1c; --estado-progreso-punto: var(--dorado-bronce); --estado-actual-fondo: var(--dorado-velo); --estado-actual-texto: #7a520a; /* dorado-bronce oscurecido, AA sobre velo */ --estado-actual-punto: var(--amarillo-marca); --estado-final-fondo: var(--amarillo-marca); --estado-final-texto: var(--negro); --estado-excepcion-fondo: var(--rojo-velo); --estado-excepcion-texto: var(--rojo-vino); --estado-excepcion-punto: var(--rojo-marca); /* -------------------------------------------------------------------------- 10 · CAPAS ------------------------------------------------------------------------- */ --z-cabecera: 40; --z-panel: 50; --z-modal: 60; --z-toast: 70; } /* La preferencia del sistema SIEMPRE gana: sin parpadeos ni movimiento */ @media (prefers-reduced-motion: reduce) { :root, :root[data-animaciones] { --anim-factor: 0; } }