/* ============================================================ Tokens del contrato · layout NEO ------------------------------------------------------------ Capa: layout Negro profundo + verde lima #AAFF00. Los valores salen del :root del monolito `_layout-apunte-neo.php`, traducidos al vocabulario del contrato (apuntes/docs/CONTRATO-TOKENS.md). ⚠️ LA SEMANTICA DE LOS MODOS ESTA INVERTIDA RESPECTO DEL MONOLITO, y es a proposito. El Neo viejo nacia oscuro en `:root` y usaba `.neo-light` para aclararlo. Los componentes comunes —los 13 que ya estan verificados con Premium— asumen lo contrario: `:root` es el modo claro y `body.dark-mode` es el oscuro. Migrarlos a `data-theme` para contemplar las dos convenciones habria tocado los 20 archivos de Premium ya verificados, a cambio de nada visible. Asi que Neo adopta `.dark-mode` con SU sentido: el modo claro vive en `:root` y el oscuro —que es la identidad de Neo— en `.dark-mode`. Lo que hace que Neo se vea oscuro por defecto no es el CSS sino `'modo_por_defecto' => 'dark'` del manifest. `.neo-light` ya no existe. Nadie mas la nombra: el unico apunte que usaba este layout la recibia del monolito. ============================================================ */ :root { /* ══════════════════════════════════════════════════ MODO CLARO Los valores de `body.neo-light` del monolito. ══════════════════════════════════════════════════ */ /* ── Superficies ── */ --bg: #ffffff; --bg2: #f4f4f4; /* El monolito no tenia --bg3: nace acá, un paso mas que --bg2 en la misma direccion, para que el contrato este completo. */ --bg3: #ececec; --card: #ffffff; --card2: #f0f0f0; --border: #dddddd; --border-2: rgba(111,163,0,.32); /* ── Texto ── */ --text: #111111; --text-2: #333333; --gray: #555555; --gray-light: #777777; /* ── Acento principal ── En claro el lima puro es ilegible sobre blanco (1,3:1), asi que el monolito ya usaba un verde oliva. Se conserva. */ --accent: #6FA300; --accent-strong: #5a8500; --accent-glow: rgba(111,163,0,.25); --accent-dim: rgba(111,163,0,.12); /* Negro y no blanco: sobre #6FA300 el blanco da 3,05:1 y el negro 6,20:1. El mismo valor sirve en los dos modos. */ --on-accent: #0d0d0d; --accent-rgb: 111,163,0; /* ── Acento secundario ── Neo no tiene un segundo color de marca: es monocromo. Pero --accent-2 no es solo "el segundo color": los componentes lo usan para el TEXTO que estructura —titulos de seccion, etiquetas, el boton de volver arriba— sobre superficies neutras. En Premium eso es un navy oscuro y funciona solo. Apuntarlo al mismo lima que --accent lo rompia: el titulo de seccion daba 2,66:1 sobre el gris del encabezado. Asi que en claro es un lima OSCURECIDO, que es lo mismo que hacia el monolito cuando pintaba esos titulos de negro. Sobre el gris del encabezado da 4,89:1. Queda anotado como pendiente del contrato: --accent-2 hoy mezcla dos roles (segundo color de marca / color de texto con autoridad) y recien se nota con un layout monocromo. */ --accent-2: #4d7000; --accent-2-strong: #3d5a00; --accent-2-dim: rgba(77,112,0,.12); --accent-2-rgb: 77,112,0; /* Blanco y no negro: --accent-2 es oscuro en este modo, asi que lo legible encima se da vuelta respecto del modo oscuro. */ --on-accent-2: #ffffff; /* ── Estado ── Semaforo propio, como preve el contrato: el verde de Premium (#2d7a2d) al lado del lima se lee como un lima apagado, no como "todo bien". Estos tres estan calculados sobre blanco. El aviso se oscurecio de #b35c00 a #a85700: sobre --bg2 (#f4f4f4) daba 4,29:1, por debajo de AA. Mismo tono (31°), -1 de luminosidad, 4,74:1. */ --estado-ok: #3d7a00; --estado-aviso: #a85700; --estado-critico: #b3121f; /* ── Tipografia por ROL ── */ --font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif; --font-heading: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif; --font-mono: 'DM Mono', monospace; /* ── Sistema ── Radios mas chicos que Premium (8/10/14/18 contra 10/16/24/32): es lo que hace que Neo se vea tecnico y Premium editorial. Eso es identidad, no desviacion. */ --navbar-h: 64px; --radius-sm: 8px; --radius: 10px; --radius-lg: 14px; --radius-xl: 18px; --t: .3s ease; /* ── Sombras ── */ --shadow-sm: 0 2px 8px rgba(0,0,0,.06); --shadow: 0 4px 16px rgba(0,0,0,.08); --shadow-lg: 0 12px 40px rgba(0,0,0,.12); --shadow-accent: 0 0 20px rgba(111,163,0,.18); /* ══════════════════════════════════════════════════ PROPIO DEL LAYOUT · fuera del contrato ══════════════════════════════════════════════════ Ningun componente comun puede usar estos nombres. */ /* Grilla de puntos del hero */ --hero-dots: radial-gradient(circle, rgba(100,180,0,.13) 1px, transparent 1px); /* Alto aproximado de .nav-buttons cuando queda sticky */ --navbtns-h: 54px; /* SVG — valores de referencia (NO usar en atributos SVG directos) */ --svg-fondo: #f8f8f8; /* Relleno OPACO de las caras de una malla 3D: tapa lo que queda detras, que es de lo que vive el algoritmo del pintor. Por eso no puede ser --svg-fondo con alfa. Es el fondo tenido hacia --svg-curva. Ver apuntes/docs/REFERENCIA-graficos-3d.md. */ --svg-superficie: #edf1e4; --svg-ejes: #cccccc; --svg-labels: #777777; --svg-curva: #6FA300; --svg-punto-gold: #6FA300; --svg-punto-naranja: #88cc00; --svg-asintota-v: #88cc00; --svg-asintota-h: #999999; } /* ══════════════════════════════════════════════════════ MODO OSCURO — la identidad de Neo ------------------------------------------------------ Los dos selectores llevan lo mismo: html.dark-mode lo pone el script anti-FOUC al parsear, para que el PRIMER pintado ya salga oscuro body.dark-mode lo agrega applyTheme() al ejecutarse, y es el que usan los 13 componentes comunes Duplicado y no `html.dark-mode, body.dark-mode { … }` en un solo bloque? No: eso ES un solo bloque con dos selectores, que es exactamente lo que hay abajo. Lo que NO se puede hacer es declararlos en distintos elementos y esperar que un alias con var() se recalcule — esa es la trampa que documenta el contrato en §4. ══════════════════════════════════════════════════════ */ html.dark-mode, body.dark-mode { /* ── Superficies ── */ --bg: #0d0d0d; --bg2: #111111; --bg3: #141414; --card: #161616; --card2: #1a1a1a; --border: #2a2a2a; --border-2: rgba(170,255,0,.25); /* ── Texto ── */ --text: #e8e8e8; --text-2: #c8c8c8; --gray: #888888; --gray-light: #aaaaaa; /* ── Acento ── el lima puro, que es de lo que se trata todo */ --accent: #AAFF00; --accent-strong: #c2ff4d; --accent-glow: rgba(170,255,0,.25); --accent-dim: rgba(170,255,0,.10); --on-accent: #0d0d0d; --accent-rgb: 170,255,0; --accent-2: #AAFF00; --accent-2-strong: #c2ff4d; --accent-2-dim: rgba(170,255,0,.10); --accent-2-rgb: 170,255,0; --on-accent-2: #0d0d0d; /* ── Estado ── Estos tres son los que el monolito ya usaba en su modal (#6ec800 / #e8a000 / #e83030): estan pensados para fondo negro y ahi funcionan. Neo puede tener variante oscura del semaforo sin discusion porque es un layout nuevo sobre el nucleo — no hay nada previo que cambiar. El critico se aclaro de #e83030 a #ec4444 al medirlo contra --bg2 (#111111): daba 4,40:1, apenas por debajo de AA, y "Membresia vencida" es justo el mensaje que no se puede leer a medias. Mismo tono (0°), +5 de luminosidad: 4,92:1. */ --estado-ok: #6ec800; --estado-aviso: #e8a000; --estado-critico: #ec4444; /* ── Sombras ── */ --shadow-sm: 0 2px 8px rgba(0,0,0,.25); --shadow: 0 4px 16px rgba(0,0,0,.35); --shadow-lg: 0 12px 40px rgba(0,0,0,.5); --shadow-accent: 0 0 24px rgba(170,255,0,.15); /* ── Propio del layout ── */ --hero-dots: radial-gradient(circle, rgba(170,255,0,.07) 1px, transparent 1px); --svg-fondo: #111111; /* Relleno OPACO de las caras de una malla 3D: tapa lo que queda detras, que es de lo que vive el algoritmo del pintor. Por eso no puede ser --svg-fondo con alfa. Es el fondo tenido hacia --svg-curva. Ver apuntes/docs/REFERENCIA-graficos-3d.md. */ --svg-superficie: #232e0f; --svg-ejes: #3a3a3a; --svg-labels: #666666; --svg-curva: #AAFF00; --svg-punto-gold: #AAFF00; --svg-punto-naranja: #88cc00; --svg-asintota-v: #88cc00; --svg-asintota-h: #555555; } /* El anti-FOUC pone la clase en antes de que exista . Sin esto, el primer pintado sale con el fondo del por defecto —blanco— y se ve un flash antes de que aparezca el negro. Premium hace lo mismo por el mismo motivo. */ html.dark-mode body { background: var(--bg); color: var(--text); }