/* ────────────────────────────────────────────────────────────────────────────── JARVIS 2.0 -- sistema de tokens visuales. Estilo Auros. ────────────────────────────────────────────────────────────────────────────── Julian, 12/10/2026: *"y en cuanto el diseno, aprende de esto para aplicarlo al nuevo JARVIS2"*. La referencia Auros estaba guardada como skill desde el 06/10 **sin aplicar**, porque adoptarla en el panel del 1.0 habria sido un rediseno: alli hay 57 `box-shadow` que Auros prohibe y 41 blancos puros en texto de cuerpo que tambien prohibe, mas dos temas completos -claro y oscuro- cuando Auros es solo oscuro. EN EL 2.0 NO HAY NADA DE ESO QUE DESHACER. Nace limpio, asi que aqui la referencia se aplica entera y desde el primer archivo. TIPOGRAFIA: Matter es comercial y no se puede cargar. Y la politica de contenido de este sitio es `default-src 'none'`, que impide traer fuentes de fuera -y eso no se relaja por una fuente-. Se usa una pila geometrica del sistema. Lo que SI se reproduce es la disciplina, que es donde vive la identidad: un solo peso medio en titulos, interletrado negativo a tamanos grandes y positivo ancho en las etiquetas en mayusculas. CONTRASTES MEDIDOS el 12/10/2026 (WCAG 2.1, sobre el lienzo #012624): blanco #ffffff 16.10 plateado #bbc7c6 9.28 niebla #edfffe 15.60 lavanda #fde9ff 14.02 pizarra #707777 3.52 <- NO llega a 4.5: es color de BORDE, no de texto ────────────────────────────────────────────────────────────────────────────── */ :root { /* ── Superficies: la pila teal, y nada mas ──────────────────────────────── Auros prohibe expresamente superficies grises, negras o azules. La jerarquia se lee como profundidad de agua, no como sombra sobre papel. */ --abismo: #012624; /* nivel 0: lienzo de pagina */ --hundido: #011d1c; /* nivel 1: pie de pagina y paneles que se hunden */ --alga: #003734; /* nivel 2: tarjeta elevada y boton principal */ --pizarra: #707777; /* nivel 3: tinte de enfasis bajo y BORDES */ /* ── Texto ──────────────────────────────────────────────────────────────── El blanco puro es SOLO para titulos y navegacion. El cuerpo va en plateado o niebla: es una regla de Auros y la que mas se incumple. */ --platino: #ffffff; /* titulos, navegacion, trazos de icono */ --niebla: #edfffe; /* cuerpo enfatizado y etiquetas de seccion */ --plateado: #bbc7c6; /* cuerpo secundario y descripciones */ --lavanda: #fde9ff; /* SOLO cifras grandes y estadisticas */ /* ── Los dos degradados ─────────────────────────────────────────────────── AURORA es el del boton: medido, el texto #222222 pasa AA en sus cuatro tramos (11.84 a 15.67). BIOLUMINISCENTE es DECORATIVO Y NO PUEDE LLEVAR TEXTO. Medido: #222222 falla en su extremo teal (3.40) y el blanco falla en el pale (1.09). No hay un solo color de texto que funcione de un extremo al otro. La referencia no lo advierte; aqui queda escrito. */ --aurora: linear-gradient(90deg, rgb(203, 255, 252) 0%, rgb(237, 255, 254) 26.25%, rgb(255, 253, 250) 47.57%, rgb(250, 209, 255) 88.96%); --bioluminiscente: linear-gradient(90deg, rgb(0, 130, 124) 0%, rgb(203, 255, 252) 100%); --sobre-aurora: #222222; /* el unico texto que va sobre el degradado aurora */ /* ── Estados: la EXCEPCION declarada ────────────────────────────────────── Auros dice "ningun color fuera de la escala teal, los neutros plateados y el acento lavanda". Para el resto de la interfaz se cumple. Para los estados NO, y es deliberado: EN EL MONITOR, EL COLOR DE ESTADO ES EL DATO. Un enlace caido no se puede pintar en plateado "por coherencia de paleta": el color es la informacion, no la decoracion. Son los seis valores del 1.0, ya endurecidos un paso con sus contrastes medidos a mano. COMO SE USAN: como RELLENO con glifo blanco encima, nunca como texto sobre el lienzo. Medido sobre el abismo, `degradada` da 2.83 y `caido` 3.33, que no llegan ni a 3:1; con glifo blanco encima dan 5.70 y 4.83. */ --estado-caido: #dc2626; /* glifo blanco encima: 4.83 */ --estado-intermitente: #d97706; /* 3.19 */ --estado-lento: #ca8a04; /* 2.94 */ --estado-ok: #16a34a; /* 3.30 */ --estado-desconocido: #64748b; /* 4.76 */ --estado-degradada: #7c3aed; /* 5.70 */ /* ── Tipografia ─────────────────────────────────────────────────────────── Un solo peso en titulos -500, ni negrita ni fina-: es el nucleo de la confianza mecanica de Auros. */ --tipo: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --tipo-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace; --peso-normal: 400; --peso-medio: 500; /* Escala. El interletrado negativo crece con el tamano: es lo que compensa las letras geometricas a escala grande. */ --t-micro: 10px; --tk-micro: 0.15em; /* mayusculas, etiquetas minimas */ --t-mini: 12px; --tk-mini: 0.12em; /* mayusculas, etiquetas */ --t-pequeno: 13px; --t-base: 16px; --tk-base: 0; --t-sub: 24px; --tk-sub: -0.02em; --t-titulo: 36px; --tk-titulo: 0; --t-grande: 61px; --tk-grande: -0.04em; --t-display: 96px; --tk-display: -0.046em; /* Interlineado: 1.0 para display, 1.4 para cuerpo. El contraste entre los dos ES el ritmo tipografico; no hay valores intermedios. */ --alto-display: 1; --alto-cuerpo: 1.4; --alto-sub: 1.3; /* ── Forma: dos valores y ninguno mas ──────────────────────────────────── 16px en tarjetas, 6px en todo lo pequeno. Nada por encima de 16px: el sistema es de esquina redondeada, no de pildora. */ --radio-tarjeta: 16px; --radio-control: 6px; /* ── Espaciado: base de 4px, densidad generosa ───────────────────────────── */ --e-12: 12px; --e-16: 16px; --e-20: 20px; --e-24: 24px; --e-32: 32px; --e-36: 36px; --e-48: 48px; --e-64: 64px; --e-80: 80px; --e-120: 120px; --ancho-pagina: 1440px; --hueco-seccion: 68px; } /* SIN SOMBRAS. No hay --sombra-* en este archivo y es a proposito: en Auros la profundidad viene del salto de superficie dentro de la pila teal. El panel del 1.0 tiene 57 box-shadow; si aqui aparece el primero, es que alguien resolvio con sombra lo que tocaba resolver con superficie. */ *, *::before, *::after { box-sizing: border-box; } html { color-scheme: dark; } body { margin: 0; background: var(--abismo); color: var(--plateado); font-family: var(--tipo); font-size: var(--t-base); font-weight: var(--peso-normal); line-height: var(--alto-cuerpo); -webkit-font-smoothing: antialiased; } h1, h2, h3 { margin: 0; color: var(--platino); font-weight: var(--peso-medio); line-height: var(--alto-display); } h1 { font-size: clamp(2.2rem, 6vw, var(--t-grande)); letter-spacing: var(--tk-grande); } h2 { font-size: var(--t-titulo); letter-spacing: var(--tk-titulo); } h3 { font-size: var(--t-sub); letter-spacing: var(--tk-sub); line-height: var(--alto-sub); } /* La etiqueta en mayusculas con interletrado ancho es la firma de Auros: se lee como rotulacion de instrumento, no como texto. */ .etiqueta { margin: 0; color: var(--plateado); font-size: var(--t-mini); font-weight: var(--peso-medio); letter-spacing: var(--tk-mini); text-transform: uppercase; } /* Cifra grande en lavanda. SOLO para esto: nunca en texto de cuerpo ni en un control. */ .cifra { color: var(--lavanda); font-size: var(--t-titulo); font-weight: var(--peso-medio); line-height: var(--alto-display); letter-spacing: var(--tk-titulo); }