/* ════════════════════════════════════════════════════════════════════════════ TheWaveRadar — Tokens [SL-185] Ola 2 de la auditoría premium (docs/AUDITORIA-PREMIUM-2026-08/). QUÉ ES ESTO Una sola fuente para tamaños, espaciado, radios, elevación y motion. Antes había 36 tamaños de fuente distintos, 14 radios y 188 paddings sueltos repartidos entre 13 hojas y 34 vistas; el sistema que sí existía (`ui-v2.css`) tenía adopción 0 fuera de su propio fichero. QUÉ **NO** ES No es un cambio de dirección visual. La paleta se conserva **tal cual está hoy** salvo un arreglo de contraste (ver `--tw-text-soft`). El informe recomienda además sacar el verde del botón primario para que verde y rojo queden reservados a dirección de mercado (UX-09): eso es decisión de Damián (D-A) y está preparado abajo, a una línea de distancia, sin aplicar. REGLA DE USO Si algo debe sonar más bajo, se baja el TAMAÑO o el PESO — nunca el contraste. Y no se añaden valores sueltos: si falta un paso, se discute el paso, no se escribe un px a mano. ════════════════════════════════════════════════════════════════════════════ */ :root { /* ── Superficies (sin cambios respecto a hoy) ─────────────────────────── */ --tw-bg: #0b0d10; /* lienzo */ --tw-bg-elev: #12151a; /* elevado */ --tw-bg-card: #151a21; /* tarjetas */ --tw-bg-soft: #1b2029; /* hover, filas alternas */ --tw-border: rgba(255,255,255,0.08); --tw-border-str: rgba(255,255,255,0.14); --tw-overlay: rgba(4,5,7,.72); /* Alias semánticos para migrar sin tocar los valores. */ --tw-surface-1: var(--tw-bg-card); --tw-surface-2: var(--tw-bg-elev); --tw-surface-3: var(--tw-bg-soft); --tw-line: var(--tw-border); --tw-line-strong: var(--tw-border-str); /* ── Texto ──────────────────────────────────────────────────────────────── Tres niveles. El cuarto que existía (`--tw-text-soft` = #6b7280) daba **4,02:1** sobre el fondo y 3,61:1 sobre tarjeta: por debajo de AA, y se usaba en 56 reglas, muchas a 10-13px. Sube a #838c99 = 5,4:1 sobre tarjeta. Es el único cambio de color de esta ola. */ --tw-text: #e6e8ec; /* 15,4:1 · titulares y cifras */ --tw-text-mute: #9aa3af; /* 7,5:1 · cuerpo secundario */ --tw-text-soft: #838c99; /* 5,4:1 · metadatos. NO bajar de aquí. */ --tw-text-1: var(--tw-text); --tw-text-2: var(--tw-text-mute); --tw-text-3: var(--tw-text-soft); /* ── Marca y acento ────────────────────────────────────────────────────── [D-A · PENDIENTE DE DECISIÓN] Hoy `--tw-accent` hace de marca Y de "sube" a la vez: el mismo verde pinta el botón primario y una subida del 2%. El informe propone separarlos (y Bloomberg, por cierto, ni siquiera usa verde/rojo para dirección: usa azul/rojo, por daltonismo). Para aplicarlo basta cambiar `--tw-accent` aquí; `--tw-pos` ya está separado y todo lo semántico debe migrarse a él. */ --tw-accent: #22c55e; --tw-accent-d: #16a34a; --tw-accent-fg: #0b0d10; /* texto sobre el acento: 8,5:1 */ /* ── Datos: dirección de mercado. Uso exclusivo. ──────────────────────── */ --tw-pos: #4ade80; --tw-pos-bg: rgba(74,222,128,.12); --tw-neg: #f87171; --tw-neg-bg: rgba(248,113,113,.12); --tw-flat: #8a93a0; --tw-flat-bg: rgba(138,147,160,.10); /* ── Estado / avisos ─────────────────────────────────────────────────── */ --tw-warn: #d97706; --tw-danger: #ef4444; --tw-info: #0891b2; --tw-violet: #7c3aed; /* [UX-25] Estas dos se invocaban sin existir y caían siempre al valor de respaldo. Se declaran para que dejen de ser variables fantasma. */ --tw-red: var(--tw-danger); --tw-green: var(--tw-accent); /* ── Tipografía ────────────────────────────────────────────────────────── Escala de 10 pasos. Nada por debajo de 12px: había 108 declaraciones a 10-11px, que es el suelo donde un dato deja de leerse. Lo que hacía legibles esas versales no era el tamaño, era el interletrado. */ --tw-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --tw-font-num: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace; /* [SL-217] Los dos escalones de abajo. NO son un capricho: la escala empezaba en 12 px y este producto es un panel financiero denso —había **160 declaraciones por debajo de 12 px** en filas del radar, versales y chips—. Una escala que no cubre la mitad densa del producto no se ignora por descuido: se ignora porque no sirve. Ese, y no la pereza, era el motivo de que `tokens.css` llevara dos auditorías sin adoptarse. */ --tw-fs-4xs: 0.625rem; /* 10px · la fila más densa del radar */ --tw-fs-3xs: 0.6875rem; /* 11px · chips, sufijos, unidades */ --tw-fs-2xs: 0.75rem; /* 12px · versales, notas al pie */ --tw-fs-xs: 0.8125rem; /* 13px · metadatos, chips */ --tw-fs-sm: 0.875rem; /* 14px · UI densa, tablas */ --tw-fs-base: 1rem; /* 16px · CUERPO */ --tw-fs-md: 1.125rem; /* 18px · entradilla */ --tw-fs-lg: 1.25rem; /* 20px · h3 */ --tw-fs-xl: 1.5rem; /* 24px · h2 de tarjeta */ --tw-fs-2xl: 1.875rem; /* 30px · h2 de sección — ÚNICO nivel de h2 */ --tw-fs-3xl: 2.375rem; /* 38px · h1 de página interior */ --tw-fs-display: clamp(2.5rem, 5vw, 3.5rem); /* h1 de landing */ --tw-lh-tight: 1.08; --tw-lh-snug: 1.25; --tw-lh-normal: 1.55; --tw-lh-relaxed: 1.7; /* prosa larga: blog, metodología */ --tw-ls-display: -0.028em; --tw-ls-head: -0.015em; --tw-ls-body: 0; --tw-ls-caps: 0.085em; /* obligatorio en cualquier versal ≤13px */ /* Pesos. PROHIBIDO 900: Inter se descarga hasta 800, así que el 900 lo falsifica el navegador con negrita sintética (UX-07). */ --tw-fw-normal: 400; --tw-fw-medium: 500; --tw-fw-semi: 600; --tw-fw-bold: 700; --tw-fw-display: 800; /* ── Espaciado — base 4px ────────────────────────────────────────────── */ --tw-s-1: 4px; --tw-s-2: 8px; --tw-s-3: 12px; --tw-s-4: 16px; --tw-s-5: 20px; --tw-s-6: 24px; --tw-s-8: 32px; --tw-s-10: 40px; --tw-s-12: 48px; --tw-s-16: 64px; --tw-s-20: 80px; --tw-s-24: 96px; --tw-space: 16px; /* alias v1 */ /* Ritmo vertical de sección: UNO. Siempre padding, nunca margin — los márgenes colapsan entre hermanos y por eso había 9 ritmos distintos. */ --tw-sec-y: clamp(64px, 8vw, 96px); /* Dos anchos y solo dos. */ --tw-w-page: 1120px; --tw-w-prose: 640px; /* ≈68 caracteres a 16px */ --tw-maxw: var(--tw-w-page); /* alias v1 */ /* ── Radios — 6 pasos donde había 14 ─────────────────────────────────── */ --tw-r-xs: 4px; /* chips diminutos, barras */ --tw-r-sm: 6px; /* inputs, badges */ --tw-r-md: 10px; /* botones */ --tw-r-lg: 14px; /* tarjetas, paneles */ --tw-r-xl: 20px; /* modales */ --tw-r-full: 999px; --tw-radius: var(--tw-r-lg); /* alias v1 (era 12px) */ --tw-radius-lg: var(--tw-r-xl); /* alias v1 (era 18px) */ /* ── Elevación — hairline + sombra. Nunca una sombra sola ────────────── */ /* Valores actuales del producto, movidos aquí desde ui-v2.css para que haya una sola fuente. El informe propone añadirles un hairline superior (`inset 0 1px 0 rgba(255,255,255,.05)`) para que la separación la haga el borde y no la sombra; eso cambia el aspecto de cada tarjeta, así que va con la dirección visual (D-A) y no se aplica aquí. */ --tw-elev-0: none; --tw-elev-1: 0 1px 2px rgba(0,0,0,.35); --tw-elev-2: 0 4px 14px rgba(0,0,0,.35); --tw-elev-3: 0 12px 32px rgba(0,0,0,.45); --tw-elev-4: 0 24px 60px rgba(0,0,0,.6); --tw-ring: 0 0 0 1px var(--tw-line-strong); --tw-shadow-sm: var(--tw-elev-1); /* alias v1 */ --tw-shadow-md: var(--tw-elev-2); /* alias v1 */ /* ── Motion — 100ms hover / 250ms estado / ease-out siempre ──────────── */ --tw-ease-out: cubic-bezier(.22, 1, .36, 1); --tw-ease-in: cubic-bezier(.4, 0, 1, 1); --tw-ease-spring: cubic-bezier(.34, 1.56, .64, 1); --tw-dur-fast: 120ms; --tw-dur-base: 200ms; --tw-dur-view: 260ms; --tw-dur-slow: 450ms; --tw-dur-count: 700ms; } /* ── Utilidades mínimas ────────────────────────────────────────────────── Solo lo que se usa en todas las superficies. No es un framework. */ .tw-num, .tw-tabular { font-variant-numeric: tabular-nums lining-nums; } .tw-prose { max-width: var(--tw-w-prose); line-height: var(--tw-lh-relaxed); } .tw-caps { font-size: var(--tw-fs-2xs); letter-spacing: var(--tw-ls-caps); text-transform: uppercase; font-weight: var(--tw-fw-semi); }