/* ═══════════════════════════════════════════════════════════════════════════ EL SISTEMA VISUAL (ADR-044) Un fichero, y sólo declaraciones: aquí no hay ni una regla que pinte nada. Todo lo que decide CÓMO se ve BUHOS —color, tipografía, ritmo, elevación, movimiento y geometría del chasis— se declara una vez en este sitio. POR QUÉ ESTÁ SEPARADO. La hoja anterior tenía los tokens y las 1.100 reglas que los consumen en el mismo bloque. Eso permitió que `--s1..--s4` (las superficies) y una escala de espaciado con el mismo nombre convivieran en el mismo `:root` veinte líneas aparte: ganaba la última, y setenta y cinco reglas pedían un color y recibían una longitud. En un fichero que sólo declara, una colisión de nombres se ve leyéndolo. TRES COSAS CAMBIAN DE FONDO RESPECTO AL PANEL ANTERIOR: 1. HAY DOS TEMAS DE VERDAD. Antes sólo existía el oscuro, con el claro "pendiente". Una aplicación de escritorio que se usa diez horas al día tiene que poder trabajar con la luz de la habitación, no contra ella. Los dos temas declaran EXACTAMENTE los mismos nombres: ninguna regla de las hojas siguientes sabe en qué tema está. 2. LA ESCALA TIPOGRÁFICA ES UNA. Convivían 9,5 · 10 · 10,5 · 11 · 11,5 · 12 · 12,5 · 13 · 13,5 y 14,5 px elegidos a ojo panel por panel: diez tamaños para una jerarquía que tiene cinco niveles. Ahora son seis pasos con nombre, y lo que no es un paso no se escribe. 3. LA DENSIDAD ES UN AJUSTE. Las seis zonas se miden contra `--densidad`, de modo que «cómodo» y «compacto» son el mismo chasis con otro número — no dos hojas de estilo que se van separando con cada bloque. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ── TIPOGRAFÍA ──────────────────────────────────────────────────────────── `ui-sans-serif`/`system-ui` primero: la aplicación tiene que verse escrita con la letra DEL SISTEMA en el que corre, que es la mitad de por qué un programa nativo parece nativo. Inter va después por si está instalada. */ --font: ui-sans-serif, system-ui, 'Segoe UI Variable Text', 'Segoe UI', Inter, -apple-system, BlinkMacSystemFont, sans-serif; --mono: ui-monospace, 'Cascadia Mono', 'Cascadia Code', 'SF Mono', 'JetBrains Mono', Consolas, monospace; /* Seis pasos. `--fz-2` es el cuerpo: todo lo que se lee de corrido. */ --fz-1: 10.5px; /* rótulos en versal, coletillas, unidades */ --fz-2: 12px; /* CUERPO — filas, celdas, controles */ --fz-3: 13px; /* texto de lectura: el chat, las descripciones */ --fz-4: 15px; /* títulos de sección, ⌘K */ --fz-5: 20px; /* cifras y titulares de panel */ --fz-6: 28px; /* la cifra grande de una tarjeta */ --lh-apretado: 1.35; --lh-normal: 1.55; --lh-lectura: 1.65; /* La versalita de los rótulos, escrita una vez. */ --rotulo-tam: var(--fz-1); --rotulo-esp: .085em; --rotulo-peso: 600; /* ── RITMO ───────────────────────────────────────────────────────────────── Rejilla de 4. Un panel que necesita 9 px está mal medido, no necesita un token nuevo. */ --sp1: 4px; --sp2: 8px; --sp3: 12px; --sp4: 16px; --sp5: 24px; --sp6: 32px; --sp0: 2px; /* ── GEOMETRÍA ───────────────────────────────────────────────────────────── Radios de escritorio, no de panel web: 6/8/10/14. Los 20 px de antes son de una tarjeta de marketing; en una fila de 26 px de alto redondean tanto que la fila deja de leerse como una fila. */ --r1: 6px; --r2: 8px; --r3: 10px; --r4: 14px; /* ── DENSIDAD ────────────────────────────────────────────────────────────── 1 = cómodo, .88 = compacto. Lo cambia el ajuste de densidad y NADA más. */ --densidad: 1; --h-titulo: calc(38px * var(--densidad)); /* la barra de título propia */ --h-pestana: calc(34px * var(--densidad)); --h-estado: calc(24px * var(--densidad)); --h-fila: calc(26px * var(--densidad)); /* una fila de lista */ --h-control: calc(28px * var(--densidad)); /* botón, campo, chip */ --w-riel: calc(48px * var(--densidad)); --w-lateral: 260px; /* lo mueve el usuario */ --w-chat: 400px; --h-dock: 220px; --w-asa: 5px; /* el asa entre zonas */ /* ── MOVIMIENTO ──────────────────────────────────────────────────────────── Una sola curva y tres duraciones. Nada rebota. En una herramienta que se abre cien veces al día, media segundo de animación es media segundo de espera repetida cien veces. */ --curva: cubic-bezier(0.32, 0.72, 0, 1); --curva-sal: cubic-bezier(0.4, 0, 1, 1); --tx-fast: 110ms var(--curva); --tx: 170ms var(--curva); --tx-slow: 280ms var(--curva); /* ── ELEVACIÓN ───────────────────────────────────────────────────────────── Tres niveles y ni uno más: e1 pega al fondo (tarjetas), e2 flota (menús), e3 tapa (diálogos, ⌘K). Cada sombra inventada es una jerarquía nueva que el ojo tiene que aprender. */ --e1: 0 1px 2px rgba(0,0,0,.10), 0 1px 3px rgba(0,0,0,.06); --e2: 0 4px 12px rgba(0,0,0,.16), 0 1px 3px rgba(0,0,0,.10); --e3: 0 16px 48px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.14); --anillo: 0 0 0 3px var(--foco); /* el aro de foco, uno para todo */ } /* ═══ TEMA OSCURO — el de partida ═════════════════════════════════════════════ Gris muy oscuro con una gota de azul, no negro puro: el negro absoluto contra texto claro produce el halo que cansa a las tres horas. */ :root, :root[data-tema="oscuro"] { color-scheme: dark; --bg: #0B0C0F; --s0: #0F1014; /* el escenario y las barras de fondo */ --s1: #14161B; /* paneles: lateral, chat, dock */ --s2: #1A1D24; /* controles en reposo */ --s3: #23262F; /* controles al pasar por encima */ --s4: #2E323D; /* el escalón más alto */ --b1: rgba(255,255,255,.055); /* separadores */ --b2: rgba(255,255,255,.095); /* bordes de control */ --b3: rgba(255,255,255,.165); /* borde marcado */ --t1: #E9EBF2; /* lo que se lee */ --t2: #9CA3B5; /* lo secundario */ /* MEDIDO, no elegido: con #6B7284 los rótulos de tarjeta daban 3,76:1 sobre `--s1` y la barra de estado 3,95:1 sobre `--s0`. Por debajo de 4,5:1 no es texto legible, es decoración con forma de texto. */ --t3: #7C8497; /* coletillas, rótulos — 4,7:1 medido */ --t4: #474D5C; /* lo apagado — nunca texto que importe */ /* Los tres acentos, y ni uno más. Cada uno SIGNIFICA algo: dorado = BUHOS y lo que es tuyo · azul = lo que TÚ accionas · morado = la IA y lo que ella hace. */ --dorado: #E0B252; --dorado2: #F0C976; --azul: #4C86FF; --azul2: #78A5FF; --morado: #A175FF; --morado2: #BE9BFF; /* Estado. Verde/ámbar/rojo, con la saturación bajada: en una pantalla oscura el verde puro (#00FF7F) vibra y no se lee. */ --verde: #35C97E; --rojo: #FF5468; --ambar: #F5A03C; --amarillo: #F2CC4F; /* DOS BLANCOS QUE NO SON DEL TEMA, y por eso valen igual en oscuro y en claro: · `--papel` es el fondo de UNA WEB AJENA dentro de un marco (las miniaturas de Proyectos y Mis webs, la vista de Conversar). Una web producida se pinta sobre papel blanco aunque BUHOS esté en oscuro: teñirlo del tema sería enseñar la web con un color que no tiene. · `--sobre-color` es la tinta encima de un relleno de acento —la píldora «ABIERTO» sobre morado—, donde el texto no puede seguir al tema porque el fondo tampoco lo sigue. */ --papel: #FFFFFF; --sobre-color: #FFFFFF; --foco: rgba(76,134,255,.22); --seleccion: rgba(76,134,255,.26); /* Superficies translúcidas: lo que flota deja intuir lo que hay debajo para no perder el sitio, y nada más. */ --vidrio: rgba(20,22,27,.86); --vidrio-filtro: saturate(150%) blur(20px); --velo: rgba(6,7,10,.62); --grad: linear-gradient(135deg, var(--morado), var(--azul)); --grad-oro: linear-gradient(135deg, #E0B252, #C08F2C); /* La tinta que va ENCIMA del degradado de IA. Es blanca en los dos temas —el degradado es el mismo morado/azul en ambos—, y por eso vive aquí en vez de repetirse en cada regla que pinta sobre él. */ --tinta-ia: #FFFFFF; --halo-ia: 0 0 0 1px rgba(161,117,255,.30), 0 0 20px rgba(161,117,255,.14); --halo-oro: 0 0 0 1px rgba(224,178,82,.32), 0 0 20px rgba(224,178,82,.12); } /* ═══ TEMA CLARO — el mismo chasis con la luz al otro lado ════════════════════ No es el oscuro invertido: los grises claros necesitan MENOS contraste entre superficies (si no, cada panel parece una tarjeta recortada) y MÁS contraste de borde (si no, no se ve dónde acaba cada zona). */ :root[data-tema="claro"] { color-scheme: light; --bg: #EFF1F4; --s0: #F7F8FA; --s1: #FFFFFF; --s2: #F1F3F6; --s3: #E5E8ED; --s4: #D7DBE3; --b1: rgba(16,20,32,.075); --b2: rgba(16,20,32,.125); --b3: rgba(16,20,32,.22); --t1: #14171F; --t2: #545C6E; --t3: #697084; --t4: #9AA1B0; --dorado: #96690F; --dorado2: #6F4C08; --azul: #2563EB; --azul2: #1D4ED8; --morado: #7043D6; --morado2: #5A32B8; --verde: #16965B; --rojo: #D42B44; --ambar: #C2700D; --amarillo: #A88410; --foco: rgba(37,99,235,.18); --seleccion: rgba(37,99,235,.16); --vidrio: rgba(255,255,255,.88); --vidrio-filtro: saturate(160%) blur(20px); --velo: rgba(30,35,48,.28); --grad: linear-gradient(135deg, var(--morado), var(--azul)); --grad-oro: linear-gradient(135deg, #C08F2C, #9A7020); --halo-ia: 0 0 0 1px rgba(112,67,214,.24), 0 0 16px rgba(112,67,214,.10); --halo-oro: 0 0 0 1px rgba(180,128,26,.26), 0 0 16px rgba(180,128,26,.10); /* En claro, las sombras tienen que ser más suaves o todo parece despegado. */ --e1: 0 1px 2px rgba(16,20,32,.06), 0 1px 3px rgba(16,20,32,.04); --e2: 0 4px 12px rgba(16,20,32,.10), 0 1px 3px rgba(16,20,32,.06); --e3: 0 16px 48px rgba(16,20,32,.16), 0 2px 8px rgba(16,20,32,.08); } /* Quien no ha elegido tema sigue al sistema. Elegirlo a mano (`data-tema`) gana siempre: es una decisión, no una preferencia heredada. */ @media (prefers-color-scheme: light) { :root:not([data-tema]) { color-scheme: light; --bg: #EFF1F4; --s0: #F7F8FA; --s1: #FFFFFF; --s2: #F1F3F6; --s3: #E5E8ED; --s4: #D7DBE3; --b1: rgba(16,20,32,.075); --b2: rgba(16,20,32,.125); --b3: rgba(16,20,32,.22); --t1: #14171F; --t2: #545C6E; --t3: #697084; --t4: #9AA1B0; --dorado: #96690F; --dorado2: #6F4C08; --azul: #2563EB; --azul2: #1D4ED8; --morado: #7043D6; --morado2: #5A32B8; --verde: #16965B; --rojo: #D42B44; --ambar: #C2700D; --amarillo: #A88410; --foco: rgba(37,99,235,.18); --seleccion: rgba(37,99,235,.16); --vidrio: rgba(255,255,255,.88); --velo: rgba(30,35,48,.28); --grad-oro: linear-gradient(135deg, #C08F2C, #9A7020); --halo-ia: 0 0 0 1px rgba(112,67,214,.24), 0 0 16px rgba(112,67,214,.10); --halo-oro: 0 0 0 1px rgba(180,128,26,.26), 0 0 16px rgba(180,128,26,.10); --e1: 0 1px 2px rgba(16,20,32,.06), 0 1px 3px rgba(16,20,32,.04); --e2: 0 4px 12px rgba(16,20,32,.10), 0 1px 3px rgba(16,20,32,.06); --e3: 0 16px 48px rgba(16,20,32,.16), 0 2px 8px rgba(16,20,32,.08); } } :root[data-densidad="compacta"] { --densidad: .88; } /* ═══ ALIAS HEREDADOS ═════════════════════════════════════════════════════════ Las doce capacidades que se han portado tal cual (el Centro de control, el Experience Studio, el chat, la fábrica…) pintan su HTML con los nombres antiguos. Traducirlos aquí —en una tabla de quince líneas que se lee de un vistazo— cuesta menos y arriesga menos que reescribir 4.000 líneas de lógica probada para renombrar un color. Lo NUEVO usa los nombres de arriba. */ :root { --gold: var(--dorado); --gold2: var(--dorado2); --blue: var(--azul); --blue2: var(--azul2); --purple: var(--morado); --purple2: var(--morado2); --green: var(--verde); --red: var(--rojo); --orange: var(--ambar); --yellow: var(--amarillo); --cyan: var(--azul); --grad-gold: var(--grad-oro); --glow-ia: var(--halo-ia); --glow-gold: var(--halo-oro); --shadow: var(--e1); --shadow-lg: var(--e3); --glass: var(--vidrio); --glass-b: var(--vidrio-filtro); --h-top: var(--h-titulo); --h-status: var(--h-estado); --w-rail: var(--w-riel); --w-side: var(--w-lateral); --w-grip: var(--w-asa); }