/* ========================================================================== Fénix · T1.2 — Capa de tokens -------------------------------------------------------------------------- Variables nombradas POR ROL, no por valor. En oscuro no se invierten colores: se intercambian roles. Este archivo SOLO declara. No selecciona ningún elemento de la página y no aplica ninguna propiedad visual. Cargarlo no mueve un píxel de la web pública: una custom property sin consumidor no pinta nada. Los ratios anotados son de contraste WCAG, calculados, no estimados. Umbrales exigidos: 4,5:1 texto · 3:1 bordes y componentes. ========================================================================== */ :root { /* --- Superficies --- */ --fx-superficie: #E2DEDA; --fx-superficie-alt: #D3CDC6; /* --- Tinta --- */ --fx-tinta: #171717; /* 13,40 sobre superficie · 11,45 sobre alt */ --fx-tinta-2: #585755; /* 5,39 sobre superficie · 4,58 sobre alt [AÑADIDO] */ /* --- Estructura --- */ --fx-borde: #6F6E6C; /* 3,81 sobre superficie · 3,23 sobre alt [AÑADIDO] */ /* --- Acento --- */ --fx-acento: #BB0F0F; /* 4,92 sobre superficie */ --fx-sobre-acento: #FFFFFF; /* 6,59 sobre acento */ /* --- Botón primario --- Piedra, no rojo. #E53828 nunca como relleno: da 4,21 con texto negro y 4,26 con blanco, ambos por debajo del mínimo AA. */ --fx-btn-fondo: #171717; --fx-btn-tinta: #E2DEDA; /* 13,40 */ /* --- Llamada a la accion (CTA) --- El boton «Apúntate» de la web es el patron: pastilla roja con borde de tinta. Tiene rol propio y NO reutiliza --fx-btn-*, porque esos tokens visten tambien los chips de estado de la app (tema y longitud elegidos) y ahi el rojo no significaria lo mismo. El texto va en BLANCO, no en #D3CDC6 como el boton de la cabecera: sobre #BB0F0F ese gris da 4,18 y se queda por debajo del 4,5 exigido. El blanco da 6,59. Calculado, no estimado. */ --fx-cta-fondo: #BB0F0F; --fx-cta-tinta: #FFFFFF; /* 6,59 sobre el fondo */ --fx-cta-borde: #171717; --fx-cta-fondo-hover: #272727; /* 13,40 con el texto blanco */ /* --- Estado --- */ --fx-acierto: #14713B; /* 4,54 sobre superficie */ /* --- Foco --- El anillo se dibuja SIEMPRE con separación: el hueco de outline-offset deja ver la superficie de la página, no el relleno del control. Sobre el botón primario el acento solo da 2,72 y no cumpliría; sobre la superficie da 4,92 y sobre la superficie-alt 4,18. La separación no es estética. [AÑADIDO] */ --fx-foco: #BB0F0F; --fx-foco-ancho: 2px; --fx-foco-sep: 2px; /* --- Medidas --- */ --fxa-barra-alto: calc(40px + 13px * var(--fxa-escala)); /* barra de la app; el body reserva este hueco */ --fxa-lanzador-alto: calc(58px + 30px * var(--fxa-escala)); /* lanzador fijo (contador + botón), apoyado encima de la barra */ /* Margen lateral ÚNICO de la app. Existe para que no se acumulen los de varios contenedores: a 390 px se perdían 67 px, un 17 % de la pantalla. */ --fxa-margen: 16px; /* --- Escala de texto --- Un único factor del que cuelgan todos los tamaños. Cambiar este número cambia la app entera de forma proporcional, sin descuadrar nada: los altos de la barra y del lanzador también salen de aquí. 1 = tamaños de referencia (14 / 16 / 17 px). 1,5 = valor elegido por Biotza: 21 / 24 / 26 px. */ --fxa-escala: 1.5; --fxa-txt-xs: calc(.75rem * var(--fxa-escala)); /* etiquetas de la barra */ --fxa-txt-s: calc(.875rem * var(--fxa-escala)); /* apoyos y recuentos */ --fxa-txt-m: calc(1rem * var(--fxa-escala)); /* texto normal */ --fxa-txt-l: calc(1.0625rem* var(--fxa-escala)); /* enunciados y opciones */ /* Objetivo táctil mínimo, también proporcional. */ --fxa-tactil: calc(44px + 8px * var(--fxa-escala)); } /* --- Oscuro por preferencia del sistema --- Se excluye el forzado a claro para que el selector de T6 pueda ganar. */ @media (prefers-color-scheme: dark) { :root:not([data-fx-tema="claro"]) { --fx-superficie: #171717; --fx-superficie-alt: #272727; --fx-tinta: #E2DEDA; /* 13,40 sobre superficie · 10,55 sobre alt */ --fx-tinta-2: #918E8C; /* 5,51 sobre superficie · 4,59 sobre alt [AÑADIDO] */ --fx-borde: #767573; /* 3,89 sobre superficie · 3,25 sobre alt [AÑADIDO] */ --fx-acento: #E53828; /* 4,21 sobre superficie · como texto, icono y borde */ --fx-sobre-acento: #171717; /* sin uso en oscuro: el acento no rellena */ --fx-btn-fondo: #E2DEDA; --fx-btn-tinta: #171717; /* 13,40 */ /* CTA: en oscuro el acento es #E53828 y no puede rellenar, asi que la llamada a la accion pasa a piedra clara igual que el boton primario. */ --fx-cta-fondo: #E2DEDA; --fx-cta-tinta: #171717; /* 13,40 */ --fx-cta-borde: #E2DEDA; --fx-cta-fondo-hover: #D3CDC6; --fx-acierto: #2E9E5B; /* 5,26 sobre superficie · #14713B daría 2,95 e sería ilegible */ --fx-foco: #E53828; /* 4,21 sobre superficie · 3,51 sobre alt */ } } /* --- Forzado explícito (base para el selector de T6) --- */ :root[data-fx-tema="oscuro"] { --fx-superficie: #171717; --fx-superficie-alt: #272727; --fx-tinta: #E2DEDA; --fx-tinta-2: #918E8C; --fx-borde: #767573; --fx-acento: #E53828; --fx-sobre-acento: #171717; --fx-btn-fondo: #E2DEDA; --fx-btn-tinta: #171717; --fx-cta-fondo: #E2DEDA; --fx-cta-tinta: #171717; --fx-cta-borde: #E2DEDA; --fx-cta-fondo-hover: #D3CDC6; --fx-acierto: #2E9E5B; --fx-foco: #E53828; } /* --- color-scheme ----------------------------------------------------------- Va aquí y NO en :root a secas, a propósito. Esta propiedad repinta los controles nativos y las barras de desplazamiento, así que declararla sin condición cambiaría píxeles de la web pública. Solo se aplica cuando el alumno ha elegido modo expresamente, que es cuando queremos que los controles nativos le acompañen. -------------------------------------------------------------------------- */ :root[data-fx-tema="claro"] { color-scheme: light; } :root[data-fx-tema="oscuro"] { color-scheme: dark; }