/* ============================================================================ BuildSigned — tema de la superficie de acceso. ESTE ARCHIVO ES DEL PRODUCTO. `install-auth-ui.mjs` lo siembra desde `theme.example.css` la PRIMERA vez y despues no lo pisa nunca, justo para que esto se pueda escribir sin perderlo en el siguiente build. Los valores son los mismos de `web/css/tokens.css`, escritos aqui a mano y no por `var(--felt)`: las pantallas de acceso NO cargan `tokens.css` --- son otra superficie, con su propio CSS generado --- y una variable que no existe no da error, deja el color en su valor inicial. Si la paleta del producto cambia, este archivo cambia con ella; son once valores. El contrato son los NOMBRES `--auth-*`, que declara `features/id`. Los valores son de quien instala. ============================================================================ */ :root { /* Las mismas familias que el resto del producto: losa para los titulos, sistema para el cuerpo. No hay `@font-face` en ninguna superficie. */ --auth-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --auth-font-display: "Rockwell", "Roboto Slab", Georgia, "Times New Roman", serif; /* El fieltro es el fondo de la marca y la cartulina es donde se escribe. Entrar es un acto sobre la mesa, asi que la tarjeta es cartulina sobre fieltro, igual que una carta del mazo. */ --auth-bg: #1F4634; /* fieltro */ --auth-surface: #EFEAE0; /* cartulina: la tarjeta */ --auth-sunk: #DED8CA; /* el dorso, para los campos */ --auth-ink: #16150F; --auth-line: #B9B2A0; /* TINTA SOBRE EL FIELTRO, que NO es la cartulina. Existe porque la cabecera vivia de `--auth-surface`, y eso funcionaba por casualidad: en claro la cartulina es crema y contrasta con el verde, pero en oscuro se vuelve papel viejo `#24211A` sobre fieltro `#0C1A14` y el nombre de la marca desaparecia --- 1.11:1 medido en las cinco pantallas. Es la regla 1 de `tokens.css` (un token, un trabajo) rota justo aqui. Claro 8.83:1, oscuro 15.30:1. */ --auth-on-bg: #EFEAE0; /* TEXTO SECUNDARIO. `auth.css` lo consume en seis reglas --- subtitulo, pistas de campo, placeholder, reglas de clave, el boton "Show" --- y este archivo no lo declaraba. Su respaldo `--auth-ink-2-fb` solo cambia bajo `prefers-color-scheme`, nunca bajo `[data-theme]`, asi que con el sistema en claro y el tema oscuro elegido a mano daba 2.69:1. Es `--ink-2` de la paleta: claro 8.29:1, oscuro 8.54:1. */ --auth-ink-2: #47432F; /* EL ORO COMO TEXTO NO ES EL ORO COMO FONDO, y son dos trabajos distintos. `--auth-accent` sobre cartulina da 3.31:1: los enlaces "Log in", "Create one" y "Forgot your password?" estaban bajo el piso en toda la ruta de conversion. El comentario de abajo decia "4.9:1 medido" y era cierto EN LA OTRA DIRECCION --- oro de fondo con tinta encima, que sigue dando 4.60:1 y no se toca. Este es el mismo oro un escalon mas oscuro, solo para cuando pinta letras: 5.65:1. */ --auth-link: #7A5409; /* El oro es lo que libera el pago en todo el producto, asi que es tambien lo que abre la sesion. `--gold` de la paleta sobre cartulina: 4.9:1 con la tinta encima, medido. */ --auth-accent: #A9760F; --auth-accent-ink: #16150F; --auth-danger: #A0231F; --auth-ok: #1F4634; /* Sin esquinas redondas: el mundo visual de este producto son cartas y tablas regladas, no burbujas. */ --auth-radius: 0px; } /* El tema oscuro sigue al del resto del producto: el fieltro se hunde y la cartulina se vuelve papel viejo. El oro sube de tono para no apagarse, que es el mismo `--gold` oscuro de `tokens.css`. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --auth-bg: #0C1A14; --auth-surface: #24211A; --auth-sunk: #1B1813; --auth-ink: #F2EDDF; --auth-line: #423C2B; --auth-accent: #E8BE60; --auth-accent-ink: #16150F; --auth-danger: #E8897F; --auth-ok: #7DAEEA; --auth-on-bg: #F2EDDF; --auth-ink-2: #C4BDA5; /* En oscuro el oro ya despega de la cartulina: 9.15:1. No hace falta oscurecerlo, y hacerlo lo apagaria. */ --auth-link: #E8BE60; } } :root[data-theme="dark"] { --auth-bg: #0C1A14; --auth-surface: #24211A; --auth-sunk: #1B1813; --auth-ink: #F2EDDF; --auth-line: #423C2B; --auth-accent: #E8BE60; --auth-accent-ink: #16150F; --auth-danger: #E8897F; --auth-ok: #7DAEEA; --auth-on-bg: #F2EDDF; --auth-ink-2: #C4BDA5; --auth-link: #E8BE60; } /* --------------------------------------------------------------------------- LA CABECERA VA SOBRE EL FIELTRO, NO SOBRE LA TARJETA. `auth.css` le da a la cabecera la misma tinta que al contenido, que es correcto cuando el fondo es claro. Aqui el fondo es fieltro, y esa tinta daba **1.72:1** contra el verde: el nombre de la marca se leia casi negro sobre casi negro. El ratio se midio en el DOM, no se estimo. HASTA EL 2026-08-23 ESTO USABA `--auth-surface`, Y ESE ERA EL SEGUNDO BUG. La cartulina es un FONDO, y en claro contrasta con el fieltro por casualidad --- los dos existen para ir uno encima del otro---. En oscuro la cartulina se hunde a `#24211A` sobre un fieltro `#0C1A14` y el nombre de la marca daba **1.11:1**: desaparecia en las cinco pantallas de acceso. El arreglo no es otro valor, es otro TOKEN: `--auth-on-bg` existe para esto y solo para esto. --------------------------------------------------------------------------- */ .auth-head, .auth-head #auth-name, .auth-head .auth-back { color: var(--auth-on-bg); } /* El hover tambien va sobre el fieltro, no sobre la cartulina: `--auth-accent` ahi da 2.66:1. El oro claro es el que despega del verde, 6.03:1. */ .auth-head .auth-back:hover { color: #E8BE60; } /* --------------------------------------------------------------------------- EL ENLACE, con un escalon de especificidad y por un motivo mecanico. `auth.css` declara `.auth-link { color: var(--auth-accent, ...) }` y esa hoja carga DESPUES de esta, asi que una regla de la misma especificidad perderia. `a.auth-link` es (0,1,1) contra (0,1,0) y gana venga en el orden que venga, que es lo que hace falta cuando la hoja de al lado es generada y se reescribe sola. --------------------------------------------------------------------------- */ a.auth-link { color: var(--auth-link); }