fix(contribuir): corregir colores en modo oscuro

[CodeKei02]

En la page de contribuir al estar en modo oscuro se muestra el formulario con fondo blanco adaptado a los colores de modo claro lo que hace que los títulos y textos sean poco visibles

Con esta PR se puede corregir los colores en el formulario en modo oscuro

[DataDave-Dev]

Revisando la PR encontré algunos detalles, medidos con contraste real contra el backdrop compuesto (.proposal-form sobre --bg da #1d1d1b en oscuro).

1. Token equivocado en las sombras

Cuatro sombras quedaron con --text-rgb, que en oscuro vale 230,225,218 (crema) → la sombra se vuelve un halo claro. Para esto existe --shadow-rgb (41,31,23 claro / 0,0,0 oscuro), y el repo ya lo usa en 19 de 19 sombras. Hay una regla hermana idéntica en global.css:744:

.topic-page-hero-logos img { filter: drop-shadow(0 18px 18px rgba(var(--shadow-rgb), 0.14)); }

Cambiar var(--text-rgb) → var(--shadow-rgb) en .contribute-hero-logos svg, .proposal-form, .preview-card y .secondary-action.

Y los dos que quedaron en negro puro duplican la sombra en modo claro respecto al original (0.12→0.24, 0.14→0.3):

legend span    { box-shadow: 0 5px 12px rgba(var(--shadow-rgb), 0.12); }
.primary-action{ box-shadow: 0 12px 24px rgba(var(--shadow-rgb), 0.14), inset 0 1px 0 rgba(255,255,255,0.14); }

2. Los bordes de los campos se desvanecen en modo claro

--border-rgb en claro es 230,225,218, casi el mismo color que la superficie del input (#fffefd). Contraste del borde contra el campo:

borde de input/select/textarea	claro	oscuro
original rgba(84,63,44,.18)	1.35	—
esta PR --border-rgb @0.75	1.21	1.14
--text-rgb @0.18	1.46	1.64
--text-rgb @0.25	1.71	2.04

Subir el alpha de --border-rgb no sirve (@0.9 sólo llega a 1.25). Para hairlines que necesitan verse conviene --text-rgb, que sí invierte con el tema:

input, select, textarea       { border: 1px solid rgba(var(--text-rgb), 0.18); }
.field-card                   { border: 1px solid rgba(var(--text-rgb), 0.14); }
fieldset, .form-head, .form-actions { border-color: rgba(var(--text-rgb), 0.12); }
.preview-note                 { border-top: 1px dashed rgba(var(--text-rgb), 0.18); }

--border-rgb sí es el token correcto para los contornos de tarjeta (.preview-card, .issue-preview, .proposal-form) — ahí subirlo a 0.85 alinea con el uso del repo (0.82–0.92 en global.css).

3. El botón de envío sigue invisible en oscuro

.primary-action y legend span quedaron hardcoded con linear-gradient(180deg, #2d241d, #111110), y #111110 es --bg en oscuro → 1.12:1 contra el panel. El botón principal y los badges numerados desaparecen.

El mismo patrón ya existe en global.css:345 (.header-cta), así que no lo introdujo esta PR.

Cambiar el relleno casi no ayuda (#474742 sólo llega a 1.81:1). El que mueve la aguja es el borde:

:root.dark .primary-action,
:root.dark legend span { border-color: rgba(var(--text-rgb), 0.4); }  /* 3.18:1 */

Confirmé con build que :root.dark dentro del <style> scoped de Astro emite :root.dark .primary-action[data-astro-cid-…], así que funciona sin :global().

4. Los .check-card no tienen contorno en oscuro

El verde 47,107,69 es muy oscuro sobre fondo oscuro: borde a 1.26:1, y accent-color: #2f6b45 a 2.66:1 (el check marcado casi no se distingue).

:root.dark .check-card { border-color: rgba(124,196,148,0.5);   /* 3.07:1 */
  background: linear-gradient(180deg, rgba(var(--glass-bg),0.62), rgba(124,196,148,0.09)); }
:root.dark .check-card:hover,
:root.dark .check-card:focus-within { border-color: rgba(124,196,148,0.65); }
:root.dark .check-card input { accent-color: #5ea876; }  /* 5.90:1 */

5. Los colores de estado se quedan cortos de AA

Mejoran bastante (de 2.66 / 2.57), pero no llegan a 4.5:1 sobre el panel oscuro: ok 3.98:1, error 3.74:1.

Bajando la mezcla de 78% a 65% quedan en 4.97 y 4.66 en oscuro, y en claro se mantienen por encima de 9:1:

[data-state="ok"]    { color: color-mix(in srgb, #2f6b45 65%, var(--text) 35%); }
[data-state="error"] { color: color-mix(in srgb, #a33a2c 65%, var(--text) 35%); }

¿Lo puedes revisar?