/* ========================================================================== Sistema de diseño · Agencia IA — tokens base -------------------------------------------------------------------------- Tres capas, siempre en este orden: 1. SEMILLAS (--piel-*) Las pone cada piel: 5 colores, 2 familias, 4 ajustes. Aquí solo hay valores de respaldo (neutros, provisionales). Opcional: ajustes finos por tema (--piel-claro-, --piel-noche-) para fijar un rol con un valor exacto. 2. ESCALAS Tipo, espacio, radios, capas y movimiento. No cambian entre clientes; la piel solo toca fuentes y radio base. 3. ROLES POR TEMA Lo único que usan los componentes: --fondo, --tinta, --marca… Dos juegos de valores del mismo rol: «panel-claro» (backoffice) y «sitio-noche» (público). Cada rol = ajuste fino de la piel, o si no existe, una derivación de las semillas. Reglas de uso - Los componentes NUNCA leen --piel-* ni un hex: leen roles. - Una piel SOLO declara variables en su propio [data-piel="…"], sin selectores descendientes. Así una isla con otra piel nunca hereda ajustes de la de afuera (en cada [data-piel] los ajustes finos se reinician a «initial»). - data-piel va en (o en un ancestro del elemento con data-tema). - data-tema va en o en cualquier contenedor: un tema es un ámbito. Una isla oscura dentro del panel es
. - Si una isla lleva OTRA piel, lleva también su data-tema en el mismo elemento (los roles se calculan donde se declara data-tema). ========================================================================== */ /* -------------------------------------------------------------------------- 1 · Semillas de respaldo (piel provisional neutra) Especificidad cero con :where() para que cualquier piel las sobrescriba sin importar el orden de carga. -------------------------------------------------------------------------- */ :where(:root) { --piel-profunda: #1d2127; /* color oscuro de marca: fondos nocturnos y riel de navegación */ --piel-marca: #2a2f37; /* acción sobre claro (botón primario del panel) */ --piel-sobre-marca: #ffffff; /* tinta sobre --piel-marca */ --piel-luz: #e9e7e2; /* la «luz» de la marca sobre oscuro: acción e indicadores de noche */ --piel-sobre-luz: #15171b; /* tinta sobre --piel-luz */ --piel-fuente-texto: ui-sans-serif, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --piel-fuente-display: var(--piel-fuente-texto); --piel-display-peso: 700; --piel-display-estilo: normal; --piel-display-tracking: -0.015em; --piel-radio: 6px; } /* Ajustes finos por tema: vacíos («initial») en cada frontera de piel, para que una piel anidada no herede los de la piel de afuera. Una piel afinada los llena en su propio [data-piel="…"]; ver skins/gps-car-solution/skin.css. */ :where([data-piel]) { --piel-senal: initial; /* semilla opcional: color de señal de la marca (si falta, --senal = --acento) */ --piel-claro-fondo: initial; --piel-claro-superficie: initial; --piel-claro-superficie-2: initial; --piel-claro-tinta: initial; --piel-claro-tinta-suave: initial; --piel-claro-linea: initial; --piel-claro-linea-fuerte: initial; --piel-claro-marca: initial; --piel-claro-marca-hover: initial; --piel-claro-sobre-marca: initial; --piel-claro-marca-tinta: initial; --piel-claro-acento: initial; --piel-claro-foco: initial; --piel-claro-velo: initial; --piel-claro-exito: initial; --piel-claro-exito-fondo: initial; --piel-claro-aviso: initial; --piel-claro-aviso-fondo: initial; --piel-claro-peligro: initial; --piel-claro-peligro-fondo: initial; --piel-claro-senal: initial; --piel-claro-sobre-senal: initial; --piel-noche-fondo: initial; --piel-noche-superficie: initial; --piel-noche-superficie-2: initial; --piel-noche-tinta: initial; --piel-noche-tinta-suave: initial; --piel-noche-linea: initial; --piel-noche-linea-fuerte: initial; --piel-noche-marca: initial; --piel-noche-marca-hover: initial; --piel-noche-sobre-marca: initial; --piel-noche-marca-tinta: initial; --piel-noche-acento: initial; --piel-noche-foco: initial; --piel-noche-velo: initial; --piel-noche-exito: initial; --piel-noche-exito-fondo: initial; --piel-noche-aviso: initial; --piel-noche-aviso-fondo: initial; --piel-noche-peligro: initial; --piel-noche-peligro-fondo: initial; --piel-noche-senal: initial; --piel-noche-sobre-senal: initial; } /* -------------------------------------------------------------------------- 2 · Escalas (independientes del tema) Se declaran también en [data-piel] y [data-tema] para que una isla con otra piel recalcule fuentes y radios en su propio ámbito. -------------------------------------------------------------------------- */ :where(:root, [data-piel], [data-tema]) { /* Familias ---------------------------------------------------------------- */ --fuente-texto: var(--piel-fuente-texto); --fuente-display: var(--piel-fuente-display); --fuente-cifra: var(--piel-fuente-display); /* Escala tipográfica fluida: mínimo a 360 px, máximo a 1280 px de ancho. El término en rem conserva el zoom del usuario (WCAG 1.4.4). */ --tipo-display: clamp(2.5rem, 1.3261rem + 5.2174vw, 5.5rem); /* 40 → 88 px */ --tipo-titular: clamp(2.25rem, 1.3696rem + 3.913vw, 4.5rem); /* 36 → 72 px: titular de sección del sitio (entre h1 y display) */ --tipo-h1: clamp(1.875rem, 1.4348rem + 1.9565vw, 3rem); /* 30 → 48 px */ --tipo-h2: clamp(1.5rem, 1.2554rem + 1.087vw, 2.125rem); /* 24 → 34 px */ --tipo-h3: clamp(1.1875rem, 1.1141rem + 0.3261vw, 1.375rem);/* 19 → 22 px */ --tipo-cuerpo: clamp(1rem, 0.9755rem + 0.1087vw, 1.0625rem); /* 16 → 17 px */ --tipo-pequeno: clamp(0.8125rem, 0.788rem + 0.1087vw, 0.875rem); /* 13 → 14 px */ --tipo-cifra: clamp(1.75rem, 1.4565rem + 1.3043vw, 2.5rem); /* 28 → 40 px */ --interlineado-display: 0.94; --interlineado-titular: 0.98; --interlineado-h1: 1.04; --interlineado-h2: 1.12; --interlineado-h3: 1.25; --interlineado-cuerpo: 1.55; --interlineado-pequeno: 1.45; --interlineado-cifra: 1; --peso-display: var(--piel-display-peso); --peso-titulo: 700; --peso-enfasis: 600; --peso-cuerpo: 400; --estilo-display: var(--piel-display-estilo); --tracking-display: var(--piel-display-tracking); --tracking-titulo: -0.005em; --medida-lectura: 66ch; /* renglón máximo de texto corrido */ /* Espaciado: múltiplos de 4 px. --esp-N = N × 4 px = la utilidad p-N de Tailwind. */ --esp-0: 0; --esp-1: 0.25rem; /* 4 */ --esp-2: 0.5rem; /* 8 */ --esp-3: 0.75rem; /* 12 */ --esp-4: 1rem; /* 16 */ --esp-5: 1.25rem; /* 20 */ --esp-6: 1.5rem; /* 24 */ --esp-8: 2rem; /* 32 */ --esp-10: 2.5rem; /* 40 */ --esp-12: 3rem; /* 48 */ --esp-16: 4rem; /* 64 */ --esp-20: 5rem; /* 80 */ --esp-24: 6rem; /* 96 */ --esp-32: 8rem; /* 128 */ --esp-seccion: clamp(4rem, 2.0435rem + 8.6957vw, 9rem); /* 64 → 144 px entre secciones del sitio */ --esp-margen: clamp(1rem, 0.413rem + 2.6087vw, 2.5rem); /* 16 → 40 px de margen lateral */ --ancho-contenido: 72rem; --ancho-lectura: 40rem; --objetivo-tactil: 44px; /* alto mínimo de todo lo que se toca */ --objetivo-compacto: 36px; /* solo en tablas densas del panel, nunca en el sitio */ /* Radios: jerarquía, no un solo valor para todo. */ --radio-chico: 4px; /* píldoras cuadradas, marcas internas */ --radio-control: var(--piel-radio); /* botones, campos */ --radio-tarjeta: calc(var(--piel-radio) * 1.5); /* tarjetas */ --radio-dialogo: calc(var(--piel-radio) * 2); /* diálogos, paneles grandes */ --radio-pildora: 999px; /* Capas (z-index): siempre por nombre, nunca un número suelto. */ --z-base: 0; --z-elevado: 10; /* tarjeta levantada, texto sobre lienzo */ --z-pegajoso: 100; /* encabezado del sitio, encabezados de tabla */ --z-barra: 200; /* barra inferior del panel en celular */ --z-flotante: 300; /* botón flotante de WhatsApp */ --z-menu: 400; /* menús y listas desplegables */ --z-dialogo: 500; /* diálogo modal y su velo */ --z-aviso: 600; /* avisos (toasts): encima de todo lo demás */ --z-saltar: 1000; /* enlace «Saltar al contenido» */ /* Movimiento ------------------------------------------------------------- */ --dur-instante: 90ms; /* respuesta al presionar */ --dur-rapida: 150ms; /* hover, cambio de color, casilla */ --dur-media: 240ms; /* abrir/cerrar algo chico, aviso que entra */ --dur-lenta: 420ms; /* diálogo, panel lateral, cambio de paso */ --dur-escena: 900ms; /* el único momento orquestado de una página */ --curva-estandar: cubic-bezier(0.2, 0, 0, 1); /* cambios de estado en su lugar */ --curva-salida: cubic-bezier(0.16, 1, 0.3, 1); /* lo que ENTRA: arranca rápido y se posa */ --curva-entrada: cubic-bezier(0.7, 0, 0.84, 0); /* lo que SE VA: acelera hacia afuera */ --curva-scroll: linear; /* scrub: el dedo ya es la curva */ --dist-corta: 4px; --dist-media: 12px; --dist-larga: 32px; --escala-presion: 0.97; --escala-aparecer: 0.98; --latido: 1.6s; /* pulso del pin: SOLO para un dato en vivo */ } /* Movimiento reducido: sin desplazamientos ni escalas; los fundidos cortos se quedan porque orientan sin mover nada. data-movimiento="reducido" lo fuerza (lo usa el preview y sirve como preferencia guardada del usuario). */ @media (prefers-reduced-motion: reduce) { :where(:root, [data-piel], [data-tema]) { --dur-instante: 0ms; --dur-media: 120ms; --dur-lenta: 150ms; --dur-escena: 0ms; --dist-corta: 0px; --dist-media: 0px; --dist-larga: 0px; --escala-presion: 1; --escala-aparecer: 1; } } [data-movimiento="reducido"], [data-movimiento="reducido"] :where([data-piel], [data-tema]) { --dur-instante: 0ms; --dur-media: 120ms; --dur-lenta: 150ms; --dur-escena: 0ms; --dist-corta: 0px; --dist-media: 0px; --dist-larga: 0px; --escala-presion: 1; --escala-aparecer: 1; } /* -------------------------------------------------------------------------- 3 · Roles por tema Cada rol toma el ajuste fino de la piel (--piel-claro-* / --piel-noche-*) y, si no hay, lo DERIVA de las semillas (color-mix en oklab): una piel nueva funciona con 5 colores. Verifica siempre en el preview: la matriz de contraste calcula cada par en las dos pieles y los dos temas. -------------------------------------------------------------------------- */ /* Panel claro: backoffice, para operar. Es el tema por defecto. -------------- */ :where(:root), [data-tema="panel-claro"] { color-scheme: light; --fondo: var(--piel-claro-fondo, color-mix(in oklab, var(--piel-profunda) 5%, #ffffff)); --superficie: var(--piel-claro-superficie, #ffffff); --superficie-2: var(--piel-claro-superficie-2, color-mix(in oklab, var(--piel-profunda) 8%, #ffffff)); --tinta: var(--piel-claro-tinta, color-mix(in oklab, var(--piel-profunda) 62%, #000000)); --tinta-suave: var(--piel-claro-tinta-suave, color-mix(in oklab, var(--tinta) 64%, #ffffff)); --linea: var(--piel-claro-linea, color-mix(in oklab, var(--piel-profunda) 14%, #ffffff)); /* divisores (decorativo) */ --linea-fuerte: var(--piel-claro-linea-fuerte, color-mix(in oklab, var(--piel-profunda) 52%, #ffffff)); /* borde de controles, ≥ 3:1 */ --marca: var(--piel-claro-marca, var(--piel-marca)); --marca-hover: var(--piel-claro-marca-hover, color-mix(in oklab, var(--piel-marca) 80%, #000000)); --sobre-marca: var(--piel-claro-sobre-marca, var(--piel-sobre-marca)); --marca-tinta: var(--piel-claro-marca-tinta, color-mix(in oklab, var(--piel-marca) 82%, #000000)); /* texto de marca, enlaces */ --acento: var(--piel-claro-acento, var(--piel-marca)); /* indicadores, nunca texto */ --foco: var(--piel-claro-foco, var(--piel-marca)); --exito: var(--piel-claro-exito, #17683f); --exito-fondo: var(--piel-claro-exito-fondo, #e2f3e9); --aviso: var(--piel-claro-aviso, #87520a); --aviso-fondo: var(--piel-claro-aviso-fondo, #fdf0da); --peligro: var(--piel-claro-peligro, #a8321c); --peligro-fondo: var(--piel-claro-peligro-fondo, #fce9e5); --velo: var(--piel-claro-velo, color-mix(in oklab, var(--piel-profunda) 55%, transparent)); /* detrás de diálogos */ /* Señal de la marca (p. ej. el rojo Vigía de GPS): marca, alertas propias y llamadas puntuales. No sustituye a --peligro (error) ni a --marca (acción). Sin semilla, es el acento. */ --senal: var(--piel-claro-senal, var(--piel-senal, var(--acento))); --sobre-senal: var(--piel-claro-sobre-senal, var(--sobre-marca)); --sombra-0: none; --sombra-1: 0 1px 2px color-mix(in oklab, var(--piel-profunda) 8%, transparent), 0 1px 3px color-mix(in oklab, var(--piel-profunda) 6%, transparent); --sombra-2: 0 4px 12px -2px color-mix(in oklab, var(--piel-profunda) 14%, transparent), 0 2px 4px color-mix(in oklab, var(--piel-profunda) 6%, transparent); --sombra-3: 0 24px 48px -12px color-mix(in oklab, var(--piel-profunda) 30%, transparent), 0 4px 12px color-mix(in oklab, var(--piel-profunda) 8%, transparent); --realce-marca: 0 0 0 0 transparent; /* halo del primario al pasar el cursor */ --resplandor: 0 0 0 2px var(--acento); /* elección marcada (tarjeta de plan) */ } /* Sitio noche: la página pública. -------------------------------------------- */ [data-tema="sitio-noche"] { color-scheme: dark; --fondo: var(--piel-noche-fondo, color-mix(in oklab, var(--piel-profunda) 42%, #000000)); --superficie: var(--piel-noche-superficie, color-mix(in oklab, var(--piel-profunda) 72%, #000000)); --superficie-2: var(--piel-noche-superficie-2, var(--piel-profunda)); --tinta: var(--piel-noche-tinta, color-mix(in oklab, var(--piel-profunda) 5%, #ffffff)); --tinta-suave: var(--piel-noche-tinta-suave, color-mix(in oklab, var(--piel-profunda) 36%, #ffffff)); --linea: var(--piel-noche-linea, color-mix(in oklab, var(--tinta) 14%, transparent)); --linea-fuerte: var(--piel-noche-linea-fuerte, color-mix(in oklab, var(--tinta) 56%, var(--fondo))); --marca: var(--piel-noche-marca, var(--piel-luz)); --marca-hover: var(--piel-noche-marca-hover, color-mix(in oklab, var(--piel-luz) 82%, #ffffff)); --sobre-marca: var(--piel-noche-sobre-marca, var(--piel-sobre-luz)); --marca-tinta: var(--piel-noche-marca-tinta, color-mix(in oklab, var(--piel-luz) 70%, #ffffff)); --acento: var(--piel-noche-acento, var(--piel-luz)); --foco: var(--piel-noche-foco, color-mix(in oklab, var(--piel-luz) 55%, #ffffff)); --exito: var(--piel-noche-exito, #5fd49b); --exito-fondo: var(--piel-noche-exito-fondo, #0c2a20); --aviso: var(--piel-noche-aviso, #ffc468); --aviso-fondo: var(--piel-noche-aviso-fondo, #2c2110); --peligro: var(--piel-noche-peligro, #ff8f7a); --peligro-fondo: var(--piel-noche-peligro-fondo, #34150f); --velo: var(--piel-noche-velo, rgb(0 0 0 / 0.66)); --senal: var(--piel-noche-senal, var(--piel-senal, var(--acento))); --sobre-senal: var(--piel-noche-sobre-senal, var(--sobre-marca)); --sombra-0: none; --sombra-1: inset 0 1px 0 rgb(255 255 255 / 0.05), 0 1px 2px rgb(0 0 0 / 0.5); --sombra-2: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 10px 28px -6px rgb(0 0 0 / 0.7); --sombra-3: inset 0 1px 0 rgb(255 255 255 / 0.07), 0 32px 64px -16px rgb(0 0 0 / 0.85); --realce-marca: 0 0 0 1px color-mix(in oklab, var(--acento) 45%, transparent), 0 10px 30px -8px color-mix(in oklab, var(--acento) 60%, transparent); --resplandor: 0 0 0 2px var(--acento), 0 0 36px -4px color-mix(in oklab, var(--acento) 55%, transparent); }