/** * tokens.css — el sistema de diseño de SocialVideoHub 7.0 · PIEL V2 (30/08/2026). * * ══════════════════════════════════════════════════════════════════════════ * LA PIEL V2 — montada el 30/08/2026 desde el diseño cerrado de Claude * Design (PAPEL-ESCRITO-FINAL.md). Qué cambia respecto a la piel anterior: * * · El acento pasa del morado #7C3AED al ROSA DE MARCA de WomanWishes * (marca registrada de Sergio): #D8AECE en oscuro · #8C3F7A en claro. * Contrastes medidos por Design: 10,2:1 y 6,7:1 (AAA). No recalcular. * · El modo por defecto pasa a ser OSCURO (#0A0A0D). El claro (#FBFAFF) * se elige con el botón de la cabecera → `data-tema="claro"` en * y se recuerda en localStorage('svh-tema'). Decisión del papel §1. * · La letra pasa de Syne/DM Sans a SATOSHI (autoalojada, ver fuentes.css). * · Grupo nuevo de tokens: los colores oficiales de las 10 redes. * * LA ARQUITECTURA NO CAMBIA — tres niveles, no uno ni dos: * 1 · PRIMITIVOS — la paleta cruda, sin significado. `--svh-rosa-300`. * 2 · SEMÁNTICOS — para QUÉ sirve, no QUÉ color es. `--svh-fondo`. * **Esta capa la usa el 95 % del CSS.** * 3 · DE COMPONENTE — solo excepciones, dentro de su propia clase. * * Por eso este cambio de piel NO toca componentes.css: las 3.275 líneas * siguen leyendo los mismos nombres semánticos y se visten solas. * * ⚠️ NADA SE BORRA: los primitivos de la piel anterior (morados, grises) * siguen aquí abajo. Los usan los estados del semáforo, los bordes medidos * y el panel. La copia de la piel anterior entera: * `tokens.css.bak-20260830-antes-piel-v2`. * * ⚠️ TODOS LOS COLORES NUEVOS LLEGAN MEDIDOS del papel de Design (WCAG 2.2). * El rediseño de julio se revirtió por no comprobar contraste: aquí no se * añade ni un color sin su medición al lado. * ══════════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════ * CÓMO SE LE GANA A WOODMART SIN UN SOLO `!important` * * El plan era usar capas de cascada (`@layer`) y envolver Woodmart en una * capa `vendor`. **No funciona, y conviene saber por qué**: la única forma * de meter una hoja externa en una capa sin descargarla dos veces sería el * atributo ``, y **ningún navegador lo * soporta**. Y en CSS, lo que NO está en ninguna capa gana a todo lo que sí * lo está: envolver solo nuestro CSS en `@layer` hacía ganar a Woodmart. * * Lo que SÍ funciona, y es más simple: nuestro CSS **sin capa** y encolado * **después** del de Woodmart. A igual especificidad gana el último, y el * último somos nosotros. Cero `!important`, que era el objetivo de verdad. * * Y para los dos bloques de modo de abajo, `:root:not([data-tema="claro"])` * y `:root[data-tema="claro"]` valen 0,2,0: ganan a las variables de * Woodmart (0,1,0) pase lo que pase con el orden de encolado. Es el mismo * mecanismo que ya estaba comprobado en el navegador en la piel anterior. * ═══════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════ * NIVEL 1 · PRIMITIVOS — la paleta cruda. Nadie los usa directamente. * ═══════════════════════════════════════════════════════════════════ */ :root { /* ── LA MARCA V2 · el rosa de WomanWishes ────────────────────── Viene del logotipo real de la marca registrada de Sergio (tono 314°). Contrastes medidos por Design AL definirlos — no recalcular: · rosa-300 #D8AECE sobre #0A0A0D → 10,23:1 (AAA) y con texto #0A0A0D encima (botón relleno) → 10,23:1 (AAA) · rosa-700 #8C3F7A sobre blanco → 6,75:1 (AAA) */ --svh-rosa-300: #D8AECE; /* rosa de marca, modo oscuro */ --svh-rosa-700: #8C3F7A; /* rosa de marca, modo claro */ /* Los rosas de LA MARIPOSA — SOLO para el logo, medidos con cuentagotas del SVG oficial. PROHIBIDO usarlos en interfaz (regla del papel §1): a la mariposa no se la recolorea. */ --svh-rosa-mariposa-claro: #EBBFDA; /* el pétalo */ --svh-rosa-mariposa-oscuro: #E7B2D2; /* el cruce de pétalos */ --svh-rosa-mariposa-cuerpo: #E7B0D0; /* el cuerpo central */ /* La palabra «Video» del logotipo — como «Wishes» en el original, medido con cuentagotas de las letras del fichero real. */ --svh-rosa-letra-video: #F2A8CF; /* Las mariposas que vuelan (la magia de la portada). Tono y opacidad de la maqueta de Design — decorativas, aria-hidden. */ --svh-mariposa-vuelo-oscuro: #F5BADA; /* opacidad .8 en oscuro */ --svh-mariposa-vuelo-claro: #F2A4CE; /* opacidad .756 en claro */ /* Las estrellas de valoración. Solo estrellas: nada más. */ --svh-estrella: #F5B946; /* ── Marca anterior (morados) — SE QUEDAN, nada se borra ─────── Los referencia el panel React y son la vuelta atrás de la piel. */ --svh-morado-50: #F5F3FF; --svh-morado-100: #EDE9FE; --svh-morado-200: #DDD6FE; --svh-morado-500: #7C3AED; --svh-morado-600: #6D28D9; --svh-morado-700: #5B21B6; --svh-morado-900: #2E1065; /* ── Neutros V2 (la base del papel de Design) ──────────────────── */ --svh-negro-v2: #0A0A0D; /* el fondo oscuro */ --svh-blanco-v2: #FBFAFF; /* el fondo claro (blanco lila) */ --svh-superficie-v2: #26262B; /* tarjetas en oscuro */ --svh-superficie-v2-2: #2A2A32; /* campos y hover en oscuro */ --svh-gris-v2-claro: #A1A1AA; /* texto suave en oscuro — 7,4:1 */ --svh-gris-v2-oscuro: #52525B; /* texto suave en claro — 7,0:1 */ --svh-lila-v2: #F1EDF8; /* superficie-2 en claro */ /* ── Neutros anteriores — SE QUEDAN (estados, bordes medidos) ── */ --svh-gris-0: #FFFFFF; --svh-gris-50: #F9FAFB; --svh-gris-100: #F3F4F6; --svh-gris-200: #E5E7EB; --svh-gris-300: #D1D5DB; /* ⚠️ gris-400 y gris-500 RETOCADOS EL 24/08/2026 (contraste-capas): gris-400 #7E8694 → 3,67 blanco · 3,51 suave · 3,33 hundido (borde de campos, 1.4.11). gris-500 #606877 → 5,61 / 5,37 / 5,10. Medidos. */ --svh-gris-400: #7E8694; --svh-gris-500: #606877; --svh-gris-600: #4B5563; --svh-gris-700: #374151; --svh-gris-800: #1F2937; --svh-gris-900: #111827; --svh-gris-950: #0B0B0F; /* ── LAS 10 REDES · grupo aparte (identidad de terceros) ─────── Regla del papel: identidad de las redes, JAMÁS mezclada con el rosa de marca. Los usa la banda animada y los chips de red. Contrastes con texto blanco encima, medidos por Design: youtube 5,9 · instagram (peor tramo) 5,4 · facebook 5,4 · twitch 4,6 · pinterest 4,8 · linkedin 5,7 · x 21. Telegram va con TINTA #0B2530 encima (7,6:1), no con blanco. */ --svh-red-youtube: #CC0000; --svh-red-instagram-1: #A85208; /* el degradado oficial, 3 tramos */ --svh-red-instagram-2: #A31B59; --svh-red-instagram-3: #5E2380; --svh-red-tiktok: #010101; --svh-red-tiktok-cian: #25F4EE; --svh-red-tiktok-rosa: #FE2C55; --svh-red-facebook: #1565D8; --svh-red-twitch: #9146FF; --svh-red-pinterest: #E60023; --svh-red-threads: #101014; --svh-red-x: #000000; --svh-red-linkedin: #0A66C2; --svh-red-telegram: #26A5E4; --svh-red-telegram-tinta: #0B2530; /* ── Estados (el semáforo del panel) ─────────────────────────── Los tonos que pasan 3:1 sobre blanco, no los «bonitos». */ --svh-verde-500: #047857; --svh-verde-50: #ECFDF5; --svh-azul-500: #1D4ED8; --svh-azul-50: #EFF6FF; --svh-ambar-500: #B45309; --svh-ambar-50: #FFFBEB; --svh-rojo-500: #DC2626; /* rojo-700: el texto de error necesita 4,5:1 sobre su fondo rosa. */ --svh-rojo-700: #B91C1C; --svh-rojo-50: #FEF2F2; /* ── Espaciado: escala de 4 px, y solo esta ──────────────────── */ --svh-espacio-1: 0.25rem; --svh-espacio-2: 0.5rem; --svh-espacio-3: 0.75rem; --svh-espacio-4: 1rem; --svh-espacio-6: 1.5rem; --svh-espacio-8: 2rem; --svh-espacio-12: 3rem; --svh-espacio-16: 4rem; --svh-espacio-24: 6rem; /* ── Radios (papel §: píldora 999 · tarjeta 20 · campo 12) ───── */ --svh-radio-sm: 6px; --svh-radio-md: 12px; --svh-radio-lg: 20px; --svh-radio-full: 999px; /* ── Tamaños pulsables y el hueco del anuncio (papel §6) ─────── */ --svh-alto-boton: 52px; /* botones principales */ --svh-alto-pulsable: 44px; /* mínimo de CUALQUIER cosa pulsable */ --svh-anuncio-alto: 280px; /* SIEMPRE reservado: cero saltos */ /* ── Tipografía · SATOSHI (V2, cerrada en el papel §2) ───────── Autoalojada en assets/fonts/ — ver fuentes.css y su nota sobre el peso 600 (Satoshi no lo trae: 600 resuelve al corte 700, exactamente igual que hacían las maquetas). Cero peticiones a Fontshare ni a Google en producción. */ --svh-fuente-titulo: 'Satoshi', system-ui, -apple-system, 'Segoe UI', sans-serif; --svh-fuente-cuerpo: 'Satoshi', system-ui, -apple-system, 'Segoe UI', sans-serif; --svh-fuente-numero: 'Satoshi', system-ui, sans-serif; /* El titular apretado — LA decisión cerrada del papel §2: peso 600 · interlineado 0,95 · espaciado −0,05 em (al −0,08 las letras se tocaban: medido por Design). */ --svh-titular-peso: 600; --svh-titular-interlineado: 0.95; --svh-titular-espaciado: -0.05em; --svh-tarjeta-espaciado: -0.02em; /* títulos de tarjeta */ --svh-etiqueta-espaciado: 0.12em; /* etiquetas en mayúsculas */ /* ── EL MANDO DEL TAMAÑO DE LETRA (B21) ────────────────────── `--svh-escala` vale 1 y no se nota. El widget de accesibilidad pone `data-svh-letra` en y accesibilidad.css la sube a 1,15 / 1,3 / 1,5. Crece solo el TEXTO, no las cajas. ⚠️ No se toca `html { font-size }`: el panel React tiene su propio mando (--p-escala) y se multiplicarían. Medido 23/08. */ --svh-escala: 1; --svh-txt-micro: calc(0.8125rem * var(--svh-escala)); /* origen y fecha del dato */ --svh-txt-cuerpo: calc(1rem * var(--svh-escala)); --svh-txt-titulo: calc(1.5rem * var(--svh-escala)); --svh-txt-h1: calc(2.25rem * var(--svh-escala)); --svh-txt-h1-movil: calc(1.75rem * var(--svh-escala)); --svh-txt-numero: calc(2.5rem * var(--svh-escala)); /* el alcance total */ --svh-alto-linea: 1.6; /* V2: los titulares van APRETADOS (0,95). Los títulos pequeños de tarjeta usan su propio alto en componentes.css. */ --svh-alto-linea-titulo: var(--svh-titular-interlineado); /* ── Sombras (V2: «sin sombras fuertes») ───────────────────── */ --svh-sombra-sm: 0 1px 2px rgb(0 0 0 / 0.05); --svh-sombra-md: 0 4px 12px rgb(0 0 0 / 0.08); --svh-sombra-lg: 0 12px 32px rgb(0 0 0 / 0.12); /* ── Movimiento ────────────────────────────────────────────── */ --svh-transicion: 160ms cubic-bezier(0.4, 0, 0.2, 1); } /* ═══════════════════════════════════════════════════════════════════ * NIVEL 2 · SEMÁNTICOS — lo que usa el 95 % del CSS. * * V2: el OSCURO es el modo por defecto. `:root:not([data-tema="claro"])` * cubre «sin elegir» y «elegido oscuro»; `:root[data-tema="claro"]` es * la elección de claro (botón de la cabecera + localStorage). * Los dos bloques valen 0,2,0: ganan a Woodmart siempre. * ═══════════════════════════════════════════════════════════════════ */ :root:not([data-tema="claro"]) { color-scheme: dark; --svh-fondo: var(--svh-negro-v2); --svh-fondo-tarjeta: var(--svh-superficie-v2); --svh-fondo-suave: #101014; /* secciones alternas; A1A1AA da 7,2:1 */ --svh-fondo-hundido: #1E1E24; /* campos y chips; A1A1AA da 6,4:1 */ --svh-texto: #FFFFFF; /* 19,8:1 sobre el fondo */ --svh-texto-suave: var(--svh-gris-v2-claro); /* 7,4:1 */ --svh-texto-tenue: #9CA3AF; /* 5,1:1 incluso sobre la tarjeta */ --svh-marca: var(--svh-rosa-300); --svh-marca-hover: #E4C6DC; /* al pasar, MÁS contraste, no menos */ --svh-marca-suave: #2A1F27; /* fondo rosita; el rosa encima 8,0:1 */ --svh-marca-texto: var(--svh-negro-v2); /* texto de botón relleno */ /* Dos bordes, y la diferencia importa: · `--svh-borde` delimita CAMPOS Y CONTROLES → obligado 3:1 (1.4.11). #6B6B7D da 3,8:1 sobre #0A0A0D. El blanco al 6 % del papel NO llega a 3:1: para campos no vale, y por eso aquí no se usa. · `--svh-borde-suave` es decorativo (tarjetas, separadores) → el blanco al 6 % del papel de Design. */ --svh-borde: #6B6B7D; --svh-borde-suave: rgba(255, 255, 255, 0.06); --svh-foco: var(--svh-rosa-300); /* El semáforo en oscuro: tonos claros, comprobados sobre #0A0A0D. */ --svh-estado-ok: #34D399; --svh-estado-ok-fondo: #052E22; --svh-estado-curso: #93C5FD; --svh-estado-curso-fondo: #0B1E3D; --svh-estado-avisa: #FCD34D; --svh-estado-avisa-fondo: #2E1F05; --svh-estado-error: #FCA5A5; --svh-estado-error-fondo: #2E0B0B; --svh-estado-inactivo: #9CA3AF; --svh-sombra-tarjeta: 0 1px 2px rgb(0 0 0 / 0.5); --svh-sombra-flotante: 0 12px 32px rgb(0 0 0 / 0.6); /* Los nombres del papel de Design, como alias de los de la casa: así el CSS nuevo escrito con el papel delante funciona tal cual. */ --svh-rosa-marca: var(--svh-marca); --svh-sobre-rosa: var(--svh-marca-texto); --svh-superficie: var(--svh-fondo-tarjeta); --svh-superficie-2: var(--svh-superficie-v2-2); --svh-mariposa-vuelo: var(--svh-mariposa-vuelo-oscuro); --svh-mariposa-vuelo-opacidad: 0.8; /* ── EL PUENTE CON WOODMART (N-1, 23/08/2026 — se conserva) ────── Woodmart pinta th/label/dt con SUS variables de modo claro; sobre nuestro fondo oscuro daban 1,27:1. Se redefinen sus variables aquí y su propia regla pinta nuestro color. Un solo sitio, cero !important, y arregla también lo que aún no hemos mirado. En claro no se toca: sus colores ya contrastan. */ --wd-title-color: var(--svh-texto); --wd-entities-title-color: var(--svh-texto); --wd-text-color: var(--svh-texto-suave); --wd-link-color: var(--svh-marca); --wd-link-color-hover: var(--svh-marca-hover); --wd-form-color: var(--svh-texto); --wd-form-placeholder-color: var(--svh-texto-tenue); --wd-form-brd-color: var(--svh-borde); --wd-form-brd-color-focus: var(--svh-foco); --wd-main-bgcolor: var(--svh-fondo); /* Trío RGB suelto: Woodmart lo mete dentro de un rgb(...). */ --wd-navigation-color: 255, 255, 255; /* Su escala de grises: solo pintan `color` y tres border-left. Aclararlas no vuelve blanca ninguna caja (comprobado 23/08). */ --color-gray-900: var(--svh-texto); --color-gray-800: var(--svh-texto); --color-gray-700: var(--svh-texto-suave); --color-gray-600: var(--svh-texto-suave); --color-gray-500: var(--svh-texto-tenue); } /* ═══════════════════════════════════════════════════════════════════ * MODO CLARO — la elección del visitante (botón de la cabecera). * ═══════════════════════════════════════════════════════════════════ */ :root[data-tema="claro"] { color-scheme: light; --svh-fondo: var(--svh-blanco-v2); --svh-fondo-tarjeta: #FFFFFF; --svh-fondo-suave: var(--svh-lila-v2); --svh-fondo-hundido: #E9E4F2; /* un paso más hundido que el lila */ --svh-texto: var(--svh-negro-v2); /* 19,3:1 */ --svh-texto-suave: var(--svh-gris-v2-oscuro); /* 7,0:1 */ --svh-texto-tenue: var(--svh-gris-500); /* 5,6:1; 5,1 en hundido */ --svh-marca: var(--svh-rosa-700); --svh-marca-hover: #6F2F60; /* al pasar, MÁS contraste (8,5:1) */ --svh-marca-suave: #F6EBF3; /* fondo rosita; el rosa encima 5,8:1 */ --svh-marca-texto: #FFFFFF; /* sobre #8C3F7A → 6,75:1 (papel) */ /* Bordes: campos 3:1 obligado (gris-400 medido 3,67 sobre blanco); decorativo, el negro al 9 % del papel de Design. */ --svh-borde: var(--svh-gris-400); --svh-borde-suave: rgba(10, 10, 13, 0.09); --svh-foco: var(--svh-rosa-700); /* El semáforo en claro: los tonos que pasan sobre blanco. */ --svh-estado-ok: var(--svh-verde-500); --svh-estado-ok-fondo: var(--svh-verde-50); --svh-estado-curso: var(--svh-azul-500); --svh-estado-curso-fondo: var(--svh-azul-50); --svh-estado-avisa: var(--svh-ambar-500); --svh-estado-avisa-fondo: var(--svh-ambar-50); --svh-estado-error: var(--svh-rojo-700); --svh-estado-error-fondo: var(--svh-rojo-50); /* «Aún no disponible» es GRIS, nunca rojo (gris-600: 6,87:1 en fondo hundido — la lección medida del 19/08 se conserva). */ --svh-estado-inactivo: var(--svh-gris-600); --svh-sombra-tarjeta: var(--svh-sombra-sm); --svh-sombra-flotante: var(--svh-sombra-lg); /* Alias del papel de Design, lado claro. */ --svh-rosa-marca: var(--svh-marca); --svh-sobre-rosa: var(--svh-marca-texto); --svh-superficie: var(--svh-fondo-tarjeta); --svh-superficie-2: var(--svh-lila-v2); --svh-mariposa-vuelo: var(--svh-mariposa-vuelo-claro); --svh-mariposa-vuelo-opacidad: 0.756; }