/* ═══════════════════════════════════════════════════════════════════ WEBLYM · LA MARCA (unificado el 19/08, ampliado el 20/09) El ÚNICO sitio donde se escribe lo que es "de Weblym" y no de una página concreta: el color de acción, los cantos, los radios y las sombras. Y el verde, que ya no es lo primero de esta lista. POR QUÉ EXISTE Hasta el 19/08 el verde #066844 estaba escrito a pelo en cuatro archivos y dieciocho sitios: el de Home, styles.css de SignIn, el de SignUp y LandingPage.html. Cambiar el color de marca era tocar cuatro archivos y confiar en no dejarse ninguno — que es exactamente el tipo de cosa que se deja a medias y acaba con dos verdes distintos en la misma web. Lo mismo empezaba a pasar el 20/09 con los cantos y los radios del editor, así que entran aquí por el mismo motivo. ── ⚠ EL VERDE ES HERENCIA, Y ESTO ES LO PRIMERO QUE HAY QUE SABER ── El verde YA NO ES EL COLOR DE ACCIÓN de Weblym desde el 10/08: los botones primarios son NEGRO PURO, y en la misma jornada los seis interruptores de Ajustes pasaron también a negro. Lo nuevo se pinta con --marca-accion, NO con --marca. NO SE HA BORRADO NINGÚN TOKEN VERDE, y no por pereza: contados el 20/09, todos menos uno siguen teniendo quien los lea, y quitarlos apaga cosas que hoy se ven. Dónde vive cada uno, para que el día que se retiren se sepa por dónde empezar: --marca / --marca-rgb ...... la portada, SignIn, SignUp, el ::selection de Home, el destello de un modal y la bienvenida del chat IA --marca-clara(-rgb) ........ el tema oscuro de Home --marca-e1 … --marca-e5 .... los degradados de la portada (el borde giratorio y la onda del fondo) --marca-e2-rgb / e3-rgb .... la fila elegida de la paleta de Home --marca-oscura ............. NADIE. Cero usos en todo el proyecto; es el único que se puede borrar sin mirar nada más. Y EN LOS TRES APARTADOS QUE MANDAN HOY —el nav, Tiendas y el editor— no queda ni un verde, salvo las casillas "Activa" y "Pausada" de los filtros (text-linear-accent en partes\12-menus-tiendas.html), que se quedaron atrás el día que los toggles pasaron a negro. CÓMO SE USA Se enlaza ANTES que la hoja de la página, y la página lee las variables en vez de repetir los valores. Home además necesita algunos en canales sueltos (--marca-rgb) porque sus tokens se componen con alfa al estilo Tailwind: rgb(var(--c-accent) / 0.5). LO QUE NO ENTRA AQUÍ, Y LA REGLA NO HA CAMBIADO Los grises, las superficies y cualquier valor CALIBRADO CONTRA UN FONDO. El nav de Home vive sobre el chrome y no sobre el contenido, y sus grises salen de otra escala; el cajón del editor redefine su hover porque es blanco y el nav es gris. Meter eso aquí sería igualar cosas que no son la misma. La prueba de si algo entra: ¿valdría igual en la portada y en el editor? Si la respuesta depende del fondo, NO. OJO: HOY HAY DOS VOCABULARIOS Y ESTE ES EL BUENO Home ya tenía --canto-doble (01-base), --cia-canto-gris (18-controles-ia) y --ed-radio (17-editor-tienda) con estos MISMOS valores, escritos antes de que este bloque existiera. No se han tocado —son de la sesión que está trabajando en el dashboard— pero lo que se escriba NUEVO debe leer de aquí, y esos tres deberían acabar apuntando a estas variables en vez de repetir los números. ═══════════════════════════════════════════════════════════════════ */ :root { /* ── 1 · EL COLOR DE ACCIÓN ────────────────────────────────────── NEGRO, desde el 10/08. Es lo que pinta un botón primario, un interruptor encendido y cualquier cosa que diga "hecho" o "activo". Hay 35 `bg-black` en partes\ que son exactamente esto; están a pelo porque son clases de Tailwind, y el día que se pasen a variable leerán de aquí. */ --marca-accion: #000000; --marca-accion-hover: #1a1a1a; /* ── 2 · LOS CANTOS ────────────────────────────────────────────── El contorno de una caja. UN SOLO PÍXEL SIEMPRE: si hace falta más peso, se añade un filo o un bisel, no un borde más gordo. */ --marca-canto: #cdd0d3; --marca-canto-oscuro: #101010; /* el mismo papel en tema oscuro */ /* SOBRE UNA CAJA TRANSLÚCIDA, AL 70%. Un canto opaco sobre un relleno que deja pasar el fondo se lee como un marco pegado encima. Y NO DA EL MISMO GRIS EN TODAS PARTES A PROPÓSITO: al ser translúcido se mezcla con lo que tenga debajo (sobre un relleno de 250 se ve 218; sobre uno de 255, 220). Misma regla, dos puntos. */ --marca-canto-suave: color-mix(in srgb, var(--marca-canto) 70%, transparent); /* EL FILO: el pelo BLANCO por dentro, pegado al canto. Va con inset y no con un segundo borde, porque un borde de verdad empujaría el contenido. La receta completa, para copiar: box-shadow: inset 0 1px 0 0 var(--marca-filo), inset 1.25px 0 0 0 var(--marca-filo), inset -1.25px 0 0 0 var(--marca-filo), inset 0 -1.25px 0 0 var(--marca-filo); ARRIBA 1 Y LOS OTROS TRES 1,25. El porqué de esa diferencia no está escrito en ninguna parte: es el valor que quedó. Si se igualan, mirar antes el borde de arriba, que es el único que se apoya sobre otra pieza. */ --marca-filo: #ffffff; /* EL PIE: la raya oscura del borde de abajo, por dentro. MEDIA línea y no una entera — con una entera parece una banda, no un apoyo. box-shadow: inset 0 -0.5px 0 0 var(--marca-pie); */ --marca-pie: color-mix(in srgb, color-mix(in srgb, var(--marca-canto) 15%, #000) 40%, transparent); /* ── 3 · EL BISEL Y EL RELIEVE ─────────────────────────────────── BISEL = luz arriba y sombra abajo, las dos por dentro. Es lo que hace que un botón secundario parezca una tecla: box-shadow: inset 0 1px 0 0 var(--marca-bisel-luz), inset 0 -1px 0 0 var(--marca-bisel-sombra); EN OSCURO SE INVIERTEN LAS FUERZAS, NO LOS LADOS: la luz baja al 10% y la sombra sube al 25%. Un blanco al 85% sobre una caja oscura es una raya de neón. */ --marca-bisel-luz: rgb(255 255 255 / 0.85); --marca-bisel-sombra: rgb(0 0 0 / 0.09); /* RELIEVE = el bisel de los botones FUERTES, los que además tiñen. El canto se cierra en negro y el brillo va solo abajo: border: 1.5px solid var(--marca-accion); box-shadow: inset 0 -1px 0 0 var(--marca-relieve-brillo); El 1,5 viene de tres vueltas (1 → 2 → 1,5) y es el único borde de la casa que se sale del píxel. */ --marca-relieve-brillo: rgb(255 255 255 / 0.28); /* ── 4 · LOS RADIOS ────────────────────────────────────────────── La escala entera, de dentro hacia fuera. No hay valores sueltos: si algo pide un radio que no está aquí, o encaja en uno de estos o hay que discutir si la escala se queda corta. */ --marca-radio-icono: 6px; /* la pastilla de un icono de acción */ --marca-radio-boton: 8px; /* botones y filas del nav */ --marca-radio-tarjeta: 12px; /* una tarjeta de tienda */ --marca-radio-armazon: 16px; /* el armazón del editor */ --marca-radio-caja: 18px; /* el aviso y la tabla de Páginas */ --marca-radio-panel: 27px; /* el panel grande de Tiendas */ --marca-radio-pastilla: 999px; /* todo lo que es una píldora */ /* ── 5 · LAS SOMBRAS ───────────────────────────────────────────── DOS, Y CADA CAPA HACE UNA COSA. Una sola sombra no puede ser nítida y amplia a la vez, por eso ninguna de las dos es una capa gorda. APOYO: para una pieza pequeña posada sobre el contenido. La primera capa es el contacto y la segunda el volumen; los desenfoques negativos son lo que la mantiene ABAJO en vez de derramarse por los costados y parecer que flota. */ --marca-sombra-apoyo: 0 2px 4px -1px rgb(0 0 0 / 0.07), 0 6px 14px -6px rgb(0 0 0 / 0.10); /* PANEL: para las piezas grandes. Tres capas — halo, contacto y peso. */ --marca-sombra-panel: 0 0 18px rgb(0 0 0 / 0.075), 0 3px 6px rgb(0 0 0 / 0.05), 0 10px 20px -10px rgb(0 0 0 / 0.13); /* PULSADO: hacia DENTRO. La casa no levanta nada al pulsar, lo hunde. */ --marca-sombra-pulsado: inset 0 4px 5px -3px rgb(0 0 0 / 0.28), inset 0 0 0 1px rgb(0 0 0 / 0.05), inset 0 0 0 999px rgb(0 0 0 / 0.05); /* ── 6 · EL VERDE (herencia; ver la cabecera) ──────────────────── Se queda entero y en su sitio porque todavía hay quien lo lee. No se usa en nada nuevo. */ /* EL VERDE DE WEBLYM. En canales sueltos para poder componerlo con alfa —rgb(var(--marca-rgb) / 0.25)— y en hex para quien lo use tal cual. */ --marca-rgb: 6 104 68; --marca: #066844; /* El mismo, un punto más oscuro: era el hover de los botones sólidos de SignIn y SignUp. HOY NO LO LEE NADIE (0 usos, contado el 20/09). */ --marca-oscura: #055336; /* EL VERDE ACLARADO DEL MODO OSCURO. Sobre fondo oscuro el #066844 no llega al contraste mínimo para leerse, así que el tema oscuro de Home usa este. Vive aquí y no en el bloque oscuro de Home porque sigue siendo la marca. */ --marca-clara-rgb: 62 176 130; --marca-clara: #3eb082; /* LA ESCALA, de la marca hacia la luz. La usan los degradados de la portada (el borde giratorio y la onda del fondo). Van en orden, del más cerrado al más claro; si algún día se recalibra la marca, se recalibra la escala entera y no un tono suelto. */ --marca-e1: #066844; --marca-e2: #0e9f6e; --marca-e3: #34d399; --marca-e4: #6ee7b7; --marca-e5: #a7f3d0; /* DOS ESCALONES TAMBIÉN EN CANALES SUELTOS (19/08). Los pide la fila elegida de la paleta de Home, que los usa TINTADOS —rgb(var(--x) / alfa)— y para eso el hex no vale. Van aquí y no en el de Home por la regla de este archivo: el verde de la marca vive en un solo sitio, y la escala es la marca. Son los mismos valores de e2 y e3, no unos nuevos: si se recalibra la escala, se recalibran estos con ella y no se quedan atrás. */ --marca-e2-rgb: 14 159 110; --marca-e3-rgb: 52 211 153; } /* ── EL TEMA OSCURO DE LOS CANTOS ────────────────────────────────── Solo lo que CAMBIA de valor. Los radios no cambian nunca —una esquina no depende de la luz— y las sombras de aquí no se redefinen porque cada página tiene la suya calibrada contra su propio fondo: una sombra al 7% sobre un fondo casi negro no existe, no hay a dónde oscurecer. HOME LO MARCA CON html.tema-oscuro; se respeta ese selector para que las dos formas de pedir oscuro —la clase y la preferencia del sistema— acaben en el mismo sitio. */ html.tema-oscuro { --marca-canto: var(--marca-canto-oscuro); --marca-filo: rgb(255 255 255 / 0.06); --marca-bisel-luz: rgb(255 255 255 / 0.10); --marca-bisel-sombra: rgb(0 0 0 / 0.25); --marca-relieve-brillo: rgb(0 0 0 / 0.18); --marca-sombra-apoyo: 0 2px 4px -1px rgb(0 0 0 / 0.30), 0 6px 14px -6px rgb(0 0 0 / 0.42); --marca-sombra-pulsado: inset 0 4px 5px -3px rgb(0 0 0 / 0.55); }