/* ============================================================ CAJA BLANCA · Sistema de diseño Héctor R. Pico ------------------------------------------------------------ REGLA 1. El cromo de la interfaz es monocromo. REGLA 2. El color sólo aparece cuando SIGNIFICA algo. REGLA 3. Ningún hexadecimal fuera de este archivo. Nunca. ============================================================ */ :root{ color-scheme: light dark; /* — Superficies — Medido antes de tocarlas: #FFFFFF sobre #FBFBFA daba 1,035:1. La tarjeta y la página eran el mismo blanco y no había planos, solo una hoja. El papel ahora tiene temperatura y cada plano se separa del anterior de verdad. */ --paper: #F4F1E8; /* fondo de página: papel, no blanco puro */ --surface: #FDFCF8; /* 1,10:1 sobre el papel (antes 1,035) */ --raised: #EAE6D9; --sunken: #DED9C9; --line: #B4AA94; /* 2,24:1 sobre superficie (antes 1,30) */ --line-soft: #D2CCBA; --grid: #CFC8B5; /* retícula milimetrada, por fin visible */ /* Ejes y marcas de escala de los 75 lienzos. Antes usaban --line, a 1,30:1: el esqueleto de todas las figuras era invisible en claro. WCAG 1.4.11 pide 3:1 para un elemento gráfico; éste da 3,08. */ --axis: #9A9078; /* — Tinta — */ --ink: #16181B; --ink-2: #3D4248; --muted: #5E6168; --faint: #71747D; /* 4,55:1 (antes 2,64, ilegible) */ /* — Acento de interfaz (afordancia, foco, estado activo) — Era #0A5BD3, el MISMO hexadecimal que --c-model: un botón y «lo que el modelo predice» eran indistinguibles, incumpliendo la Regla 2 en la propia definición. La afordancia pasa a ser tinta y el matiz queda entero para el dato. */ --accent: #16181B; --accent-ink: #FDFCF8; --accent-soft:#E6E1D2; /* — PALETA SEMÁNTICA DE DATOS — Cada color es un concepto. No se usan decorativamente. Recalibrados para el tema claro: antes promediaban 5,5:1 mientras el tema oscuro promediaba 8,5:1, y por eso las series se veían lavadas. Ahora los dos temas van parejos. AVISO: el color NO basta para distinguir cinco series. Está comprobado que es imposible — no caben cinco con ≥1,6:1 entre sí y ≥4,5:1 sobre el fondo. Quien lo resuelve de verdad es la forma del marcador y el patrón de trazo; ver --forma-* más abajo. */ --c-model: #14489E; /* la predicción, el modelo, lo aprendido 8,35:1 */ --c-data: #8A4A06; /* la observación, el dato real, la verdad 6,68:1 */ --c-error: #A3104A; /* el error, el residuo, la pérdida 7,49:1 */ --c-ok: #06614A; /* la convergencia, el acierto, lo correcto 7,26:1 */ --c-latent: #512CA8; /* lo latente, lo abstracto, lo oculto 8,99:1 */ --c-model-soft: #E3ECFA; --c-data-soft: #F7EBD8; --c-error-soft: #FAE2EB; --c-ok-soft: #DCF0E8; --c-latent-soft:#EAE3FA; /* — FORMA Y TRAZO POR SERIE — Lo que de verdad distingue las series cuando el color falla: con daltonismo, las diez parejas de la paleta caen por debajo de 1,3:1 y el tono deja de informar. Estos valores los leen CB.Draw.dot y la leyenda. */ --forma-model: circulo; --trazo-model: 0; --forma-data: cuadrado; --trazo-data: 6 3; --forma-error: rombo; --trazo-error: 2 3; --forma-ok: triangulo;--trazo-ok: 0; --forma-latent:cruz; --trazo-latent:9 3 2 3; /* — Rampas perceptuales para campos continuos — flux: secuencial (densidad, probabilidad, magnitud) residual: divergente con el cero en el neutro del tema */ --ramp-flux-0:#0B1026; --ramp-flux-1:#1B3F7A; --ramp-flux-2:#2C7FBF; --ramp-flux-3:#49C0AE; --ramp-flux-4:#CFE78C; --ramp-res-neg:#A3104A; --ramp-res-mid:#EAE6D9; --ramp-res-pos:#14489E; /* Texto sobre una rampa de datos. Estos dos NO se redefinen en oscuro: la rampa es la misma en ambos temas, así que su contraste también. */ --on-dark:#FFFFFF; --on-light:#0B0D0F; /* — Profundidad — */ --shadow-1: 0 1px 2px rgba(17,19,21,.05), 0 2px 8px rgba(17,19,21,.04); --shadow-2: 0 2px 4px rgba(17,19,21,.06), 0 12px 32px rgba(17,19,21,.07); --shadow-3: 0 8px 24px rgba(17,19,21,.10), 0 32px 64px rgba(17,19,21,.10); /* — Tipografía — */ --font-ui: "Inter Tight","Inter",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --font-read: "Source Serif 4","Iowan Old Style",Georgia,"Times New Roman",serif; --font-mono: "JetBrains Mono","SFMono-Regular",ui-monospace,Consolas,monospace; /* escala modular 1.25 sobre 17px */ --t-xs:13.6px; --t-sm:15px; --t-base:17px; --t-md:21px; --t-lg:27px; --t-xl:33px; --t-2xl:42px; --t-3xl:52px; --t-4xl:66px; /* — Ritmo: rejilla de 4px — */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; --radius:14px; --radius-sm:8px; --radius-lg:22px; --measure:68ch; /* — Movimiento — Nunca ease-in-out en datos: miente sobre la aceleración. */ --ease-std: cubic-bezier(.2,.8,.25,1); --ease-in: cubic-bezier(.4,0,1,1); --ease-out: cubic-bezier(0,0,.2,1); --d-instant: 0ms; /* seguimiento de puntero */ --d-fast: 120ms; /* hover, feedback */ --d-value: 240ms; /* cambio de valor */ --d-layout: 420ms; /* reconfiguración de layout */ --d-beat: 900ms; /* compás narrativo */ --sidebar: 268px; --header: 64px; } /* ── Modo oscuro ── Un único punto de redefinición. Los roles no cambian, los valores sí. */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --paper:#0A0C0E; --surface:#121518; --raised:#1A1E22; --sunken:#07090A; --line:#282D33; --line-soft:#1F2429; --grid:#1C2126; --axis:#5E636A; --ink:#F0F2F4; --ink-2:#C4CAD0; --muted:#949CA4; --faint:#787F88; --accent:#F0F2F4; --accent-ink:#0A0C0E; --accent-soft:#232A31; --c-model:#6BB2FF; --c-data:#F2A93C; --c-error:#FF7FAB; --c-ok:#3FD3A0; --c-latent:#B296FF; --c-model-soft:#10233A; --c-data-soft:#2E220E; --c-error-soft:#33131F; --c-ok-soft:#0A2820; --c-latent-soft:#1E1838; --ramp-res-mid:#1A1E22; --ramp-res-neg:#FF7FAB; --ramp-res-pos:#6BB2FF; --shadow-1:0 1px 2px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.3); --shadow-2:0 2px 4px rgba(0,0,0,.45),0 12px 32px rgba(0,0,0,.4); --shadow-3:0 8px 24px rgba(0,0,0,.5), 0 32px 64px rgba(0,0,0,.45); } } :root[data-theme="dark"]{ --paper:#0A0C0E; --surface:#121518; --raised:#1A1E22; --sunken:#07090A; --line:#282D33; --line-soft:#1F2429; --grid:#1C2126; --axis:#5E636A; --ink:#F0F2F4; --ink-2:#C4CAD0; --muted:#949CA4; --faint:#787F88; --accent:#F0F2F4; --accent-ink:#0A0C0E; --accent-soft:#232A31; --c-model:#6BB2FF; --c-data:#F2A93C; --c-error:#FF7FAB; --c-ok:#3FD3A0; --c-latent:#B296FF; --c-model-soft:#10233A; --c-data-soft:#2E220E; --c-error-soft:#33131F; --c-ok-soft:#0A2820; --c-latent-soft:#1E1838; --ramp-res-mid:#1A1E22; --ramp-res-neg:#FF7FAB; --ramp-res-pos:#6BB2FF; --shadow-1:0 1px 2px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.3); --shadow-2:0 2px 4px rgba(0,0,0,.45),0 12px 32px rgba(0,0,0,.4); --shadow-3:0 8px 24px rgba(0,0,0,.5), 0 32px 64px rgba(0,0,0,.45); }