/* ============================================================================= theme-describeme.css — PIEL A ----------------------------------------------------------------------------- NO es un port de DescribeMe. Es la INTENCIÓN de DescribeMe ejecutada en 2026. El CSS de 2016 (Bootstrap 3, Kendo, gradientes de gel, botones faux-3D) es arqueología y no entra. Lo que entra es qué quería comunicar cada decisión. Ver BRAND.md para el razonamiento completo. Sensación buscada: **cálido, personal, con peso institucional.** Un desconocido te está calificando; eso tiene que parecer serio y humano a la vez. Mecánica claro/oscuro: `light-dark()` + `color-scheme`. Un solo listado de declaraciones cubre las dos variantes, y `color-scheme` además alinea scrollbars y widgets nativos (algo que Execution Market resolvía a mano en ThemeContext.tsx:64). Todos los ratios de contraste están CALCULADOS (WCAG 2.1 relative luminance), no estimados. Formato del comentario: [claro / oscuro]. ============================================================================= */ [data-theme="describeme"] { color-scheme: light dark; /* =========================================================================== SUPERFICIES — "papel, no pantalla" INTENCIÓN: DescribeMe era blanco clínico (#ffffff hardcodeado en theme.custom.css:1-4). El blanco puro dice "formulario". El producto pedía calidez: te está describiendo una persona. En 2026 eso es un blanco cálido con la tarjeta MÁS clara que la página — la información flota sobre el papel. En oscuro NO es negro puro: es un índigo muy profundo, para que el modo oscuro siga siendo de esta marca y no del vecino. ======================================================================== */ --surface-page: light-dark(#f8f6f2, #141220); --surface-raised: light-dark(#ffffff, #1e1b2d); --surface-sunken: light-dark(#eeebe3, #0e0c18); --surface-inverse: light-dark(#1a1730, #f2f0ea); --surface-accent-soft: light-dark(#eceaf6, #221e3c); --surface-overlay: light-dark(rgb(26 23 48 / 0.55), rgb(6 5 12 / 0.7)); /* =========================================================================== TEXTO — la tinta también es índigo INTENCIÓN: el negro puro es neutro y anónimo. Toda la tinta lleva una gota del índigo de la marca, así el texto pertenece al logo. DescribeMe nunca logró eso: su índigo vivía SOLO en el favicon y no aparecía en ningún CSS. ======================================================================== */ --text-primary: light-dark(#1a1730, #f2f0ea); /* 16.09 / 16.21 sobre page */ --text-secondary: light-dark(#4a4668, #c3bfd4); /* 8.22 / 10.31 */ --text-tertiary: light-dark(#66627e, #9691ac); /* 5.38 / 6.11 · sunken 4.88 / 6.40 */ --text-on-inverse: light-dark(#f8f6f2, #141220); /* 16.09 / 16.21 */ --text-on-accent: light-dark(#ffffff, #141220); /* 11.38 / 8.18 */ --text-on-action: light-dark(#1a1730, #141220); /* 11.23 / 11.94 sobre el lima */ --text-link: light-dark(#332c86, #a9a2ff); /* 10.54 / 8.18 */ --text-link-hover: light-dark(#262066, #c0bbff); /* =========================================================================== LÍNEAS — el hairline es la estructura INTENCIÓN: DescribeMe separaba dos métricas con UN border-right de 1px (user-index.css:201), no con dos cajas. Ese minimalismo estructural es lo único de su CSS que envejeció bien y se conserva tal cual. ======================================================================== */ --border-subtle: light-dark(#e2ded4, #2c2840); --border-strong: light-dark(#8a8478, #736d8f); /* 3.44 / 3.45 — AA 3:1 gráfico */ --border-absent: light-dark(#8a8478, #736d8f); /* 3.44 / 3.45 */ --border-absent-style: dashed; --border-focus: light-dark(#332c86, #a9a2ff); --border-hover: var(--text-primary); /* =========================================================================== ACENTO — índigo: "esto es serio aunque te juzgue un desconocido" INTENCIÓN: el índigo del logo (#2C276B, la 'D') era el ÚNICO color que DescribeMe dibujó; el cian del sitio venía con la plantilla y contradecía al logo. Resolvemos la contradicción a favor de lo propio. Calibrado 2026: un punto más de croma para que respire en pantalla, misma profundidad. El azul acero (la MANO que forma el "me") sobrevive como acento de apoyo: se usa donde hay gesto humano — quién describió, cuándo, con qué peso. ======================================================================== */ --accent: light-dark(#332c86, #a9a2ff); /* 10.54 / 8.18 */ --accent-hover: light-dark(#262066, #c0bbff); --accent-support: light-dark(#35688c, #7fb4d8); /* 5.54 / 8.29 */ /* =========================================================================== ACCIÓN — el lima es EL VERBO, y solo el verbo INTENCIÓN: `btn-big-lime` (site.css:114) era el único color caliente de la página y estaba reservado a la única acción del producto: DescribeMe!. Se conserva el ROL exacto — un solo color de acción en toda la interfaz — y se tira el brillo 3D con sus 5 sombras apiladas. El relleno lima es demasiado claro para verse contra el papel (1.43:1), así que el control SIEMPRE lleva `--action-edge` de 1px: 3.56:1, AA de límite de componente. Sin ese borde, el botón no cumple. ======================================================================== */ --action: light-dark(#c3dc1f, #c3dc1f); --action-hover:light-dark(#b0c71b, #d2e93a); --action-edge: light-dark(#7a8a0f, #c3dc1f); /* 3.56 / 11.94 */ /* =========================================================================== ESTADOS — el color refuerza, el glifo informa ======================================================================== */ --state-positive: light-dark(#4e7a16, #9bc556); /* 4.60 / 7.84 sobre su surface */ --state-positive-surface: light-dark(#f1f5e6, #1d2616); --state-caution: light-dark(#8c4a16, #d79a5a); /* 5.70 / 6.64 */ --state-caution-surface: light-dark(#f5eadf, #2a1f14); --state-critical: light-dark(#b4231c, #ee8079); /* 5.36 / 6.40 */ --state-critical-surface: light-dark(#f7e4e2, #2e1715); --state-neutral: light-dark(#66627e, #9691ac); /* 4.88 / 5.42 */ --state-neutral-surface: light-dark(#eeebe3, #201d30); /* =========================================================================== SCORE — la rotación de matiz se hereda; la luminancia se CORRIGE INTENCIÓN heredada: `quick_rating.js:16` va rojo → ladrillo → marrón → oliva. **No pasa por el semáforo**, y eso es lo valioso: el juicio tiene polaridad sin recurrir al verde/amarillo/rojo de fábrica. 🔴 LO QUE NO SE HEREDA, porque medido no funciona: esa rampa NO sube en luminancia — es una U. Sus diez pasos van L=0.129 (paso 1) → 0.085 (paso 5, el MÁS OSCURO) → 0.139 (paso 9). El paso 1 y el paso 8 quedan a 1.07:1 entre sí: en escala de grises, "pésimo" y "muy bueno" son el mismo tono. Acá se conserva la familia de matices y se le impone una rampa de luminancia MONÓTONA — más tinta = mejor score en claro, más brillo = mejor score en oscuro. Anclas separadas ≥1.68:1 entre vecinas y 3.0:1 de extremo a extremo, así el score se lee sin percibir color. Mismo criterio que la piel B, que ya resolvía el score por luminancia: una sola barra, dos pieles. El track lleva borde: una pista sin borde no es un objeto gráfico. ======================================================================== */ --score-low: light-dark(#d05334, #cd5030); /* 3.55 / 4.41 sobre el track */ --score-mid: light-dark(#814410, #df9d4b); /* 6.37 / 8.36 */ --score-high: light-dark(#293706, #d8ee93); /* 10.73 / 15.28 */ --score-fill-neutral: light-dark(#332c86, #a9a2ff); --score-track: light-dark(#eeebe3, #0e0c18); --score-track-border: light-dark(#8a8478, #736d8f); /* 3.12 / 3.98 sobre el track */ --score-dot-size: 0.875rem; /* el punto de 10 pasos, no la estrella */ --score-dot-gap: 0.25rem; /* =========================================================================== SIN DATOS 🔴 — se corrige el error original INTENCIÓN: DescribeMe pintaba el punto sin calificar de oliva pálido (#A8C366, dmrating.css:26) y el score 10 de oliva oscuro (#487401). "Nadie opinó" y "excelente" eran primos cromáticos. Acá el "sin datos" sale de la familia del score por completo: gris cálido, borde PUNTEADO, un `—` donde iría el numeral. La distinción es estructural, no de matiz. Su voz también cambia: DescribeMe ya distinguía el 0 = "No sé" del 1 = "Para Nada" (describe-bar.js:52-90). Esa distinción es el producto. ======================================================================== */ --nodata-ink: light-dark(#6b6656, #9a9484); /* 5.32 / 6.11 · sunken 4.82 / 6.40 */ --nodata-border: light-dark(#8a8478, #736d8f); /* 3.44 / 3.45 */ --nodata-surface: transparent; --nodata-glyph: "—"; --nodata-opacity: 1; /* =========================================================================== FACETAS — la reputación son seis áreas de tu vida, no un número INTENCIÓN: las pestañas (user-index-tablooper.css) usaban una paleta apagada y terrosa, distintiva justamente por desaturada: nada del arcoíris saturado de cualquier librería de charts. Se hereda esa sensación, se recalibra a AA y se cambia el uso: punto o subrayado de 2px, nunca relleno de pestaña de 205×55px. Escalonadas por luminancia a propósito (≥1.28:1 entre vecinas, 3.62:1 de extremo a extremo) para que la serie sobreviva a la escala de grises. Aun así rige la REGLA DE CATEGÓRICAS del contrato: color + etiqueta, siempre. Ratios contra --surface-page [claro / oscuro]; los seis también cumplen 3:1 contra raised y sunken. ======================================================================== */ --facet-1: light-dark(#70903b, #d1e4b1); /* personality 3.39 / 13.58 */ --facet-2: light-dark(#a66c2a, #e1b37f); /* looks 4.05 / 9.63 */ --facet-3: light-dark(#3a6c8f, #6fa8d2); /* career 5.23 / 7.22 */ --facet-4: light-dark(#226155, #369b87); /* lifestyle 6.69 / 5.45 */ --facet-5: light-dark(#6d3350, #ba5788); /* relationships 8.69 / 4.23 */ --facet-6: light-dark(#2c325a, #5763b7); /* skills 11.37 / 3.41 */ /* =========================================================================== SERIES POR CADENA — la misma disciplina, ocho pasos Cada paso ≥3:1 contra page y raised, escalonado por luminancia. Tope duro en 8: la novena cadena entra en "otras". Colores terrosos, en familia con las facetas — es la misma marca graficando otra cosa. ======================================================================== */ --series-1: light-dark(#568bbf, #d4e4f3); /* 3.02 / 12.95 */ --series-2: light-dark(#bb612c, #ecc5af); /* 3.63 / 10.54 */ --series-3: light-dark(#297a5d, #60cda5); /* 4.37 / 8.62 */ --series-4: light-dark(#824a9d, #c298d8); /* 5.16 / 7.02 */ --series-5: light-dark(#685312, #b89321); /* 6.22 / 5.79 */ --series-6: light-dark(#22505a, #3a92a4); /* 7.46 / 4.66 */ --series-7: light-dark(#682b3f, #c25278); /* 8.79 / 3.82 */ --series-8: light-dark(#223916, #43772a); /* 10.59 / 3.13 */ --series-other: light-dark(#6b6656, #9a9484); --series-stroke-width: 2px; /* =========================================================================== TIER — el badge de nivel. "Sin probar" NO es el peor nivel. `unproven` toma la gramática de ausencia (punteado, sin relleno); los otros tres son tinta de texto sobre un tinte de su propia familia, todos ≥4.78:1. El nivel alto suma --border-width-emphasis: el tope no depende del matiz. ======================================================================== */ --tier-unproven-ink: light-dark(#6b6656, #9a9484); /* 5.32 / 6.11 */ --tier-unproven-surface: transparent; --tier-low-ink: light-dark(#b2452a, #cf715a); /* 4.78 / 4.86 */ --tier-low-surface: light-dark(#f9ebe6, #2c1a17); --tier-mid-ink: light-dark(#9a5816, #c28131); /* 4.81 / 4.87 */ --tier-mid-surface: light-dark(#f7eeda, #2b2113); --tier-high-ink: light-dark(#547314, #7c9c27); /* 4.83 / 4.89 */ --tier-high-surface: light-dark(#eef3e0, #1f2712); /* =========================================================================== CARGA Y FRESCURA ======================================================================== */ --skeleton-base: light-dark(#e8e4da, #272338); --skeleton-sheen: light-dark(#f5f2ec, #332e49); --skeleton-duration: 1400ms; --surface-stale: light-dark(#f4efe2, #252031); --text-stale: light-dark(#6b6656, #a49e8c); /* 5.00 / 5.90 */ /* =========================================================================== TABLA DENSA — esta piel sí usa cebra: es la cálida, y la fila alterna ayuda a seguir seis columnas sin regla vertical. ======================================================================== */ --table-row-height: 2.5rem; --table-rule: light-dark(#e2ded4, #2c2840); --table-header-surface: light-dark(#eeebe3, #0e0c18); --table-header-ink: light-dark(#4a4668, #c3bfd4); /* 7.42 / 12.36 */ --table-row-hover: light-dark(#eceaf6, #221e3c); --table-zebra: light-dark(#faf8f5, #1a1729); --table-sticky-edge: light-dark(#8a8478, #736d8f); /* 3.44 / 3.45 */ /* =========================================================================== FORMA — círculo = persona o juicio; recto = contenedor INTENCIÓN: sistemática en DescribeMe (sellos de 50px con radio 30px, puntos de 22px con radio 22px, avatar `img-circle`, navbar con radio 0). Se hereda tal cual. El radio de superficie es suave, no brutalista: esta piel es la cálida de las dos. ======================================================================== */ --radius-surface: 0.375rem; --radius-control: 0.375rem; --radius-chip: 0.25rem; --radius-pill: 9999px; --radius-circle: 50%; --seal-size: 3rem; --seal-radius: 50%; --avatar-radius: 50%; /* =========================================================================== TIPOGRAFÍA — dato en una familia, voz humana en otra INTENCIÓN: DescribeMe ponía manuscrita ('The Girl Next Door') exactamente donde hablaba una persona —el handle, el título de cada descripción— y sans en los números. Esa SEPARACIÓN SEMÁNTICA se hereda; la fuente novelty de 2014 no. En 2026: humanista para la interfaz, mono para todo dato, y una serif editorial en itálica para la cita de un humano. ======================================================================== */ --font-body: "Figtree", ui-sans-serif, system-ui, sans-serif; --font-display: var(--font-body); --font-data: "IBM Plex Mono", ui-monospace, Menlo, monospace; --font-voice: "Source Serif 4", Georgia, serif; /* se usa en itálica */ --weight-heading: 600; --tracking-label: 0.1em; /* =========================================================================== ELEVACIÓN Y TEXTURA INTENCIÓN: la sombra de la grilla masonry era `rgba(34,25,25,.4)` — negro TIBIO, no negro puro (waterfall.css:35). Ese detalle se conserva: la sombra lleva la tinta índigo. Lo que se tira: el halo `0 0 5px #888` en cada punto, el ruido tileado del navbar y los gradientes de gel. ======================================================================== */ --shadow-raised: light-dark(0 1px 2px rgb(26 23 48 / 0.08), none); --shadow-overlay: light-dark(0 12px 32px rgb(26 23 48 / 0.18), 0 12px 32px rgb(0 0 0 / 0.6)); --texture-page: none; /* el ruido de 2012 no vuelve */ } /* Modo explícito — el switcher estampa data-mode y gana sobre el sistema. Es lo mismo que hace Execution Market con .dark, pero además arregla scrollbars y controles nativos sin JS. */ [data-theme="describeme"][data-mode="light"] { color-scheme: light; } [data-theme="describeme"][data-mode="dark"] { color-scheme: dark; }