/* ============================================================================ TOKENS — gris sobre grises (macOS 26 / iOS 26), claro por defecto ---------------------------------------------------------------------------- Mismos valores que el lienzo de diseño (Sistema de diseño). El tema se elige con ; sin atributo sigue al sistema. Ajuste de contraste en oscuro (≥ 4.5:1 sobre --raised y --fill, regla del SPEC): --ink2 #aeaeb4 → #b7b7bd y --accent-text #4da3ff → #5aabff. --red-text (texto de peligro, «Eliminar» sobre --fill en un panel): claro #d70015 → #c80014 y oscuro #ff6961 → #ff7d76. --canvas área de dibujo --desk fondo detrás de la hoja --paper hoja de solución --glass barras y controles flotantes --panel paneles laterales --raised controles blancos --real momento real M (cian) --virt carga unitaria, m(x) (violeta) --defl desplazamientos δ, θ (naranja) --hl el marcador: lo de este tiempo en el pizarrón de Salviati (amarillo de marcatextos, translúcido; nunca cambia el tono de lo que marca: tinta, --real, --virt y --defl sobre él, sobre --paper, pasan de 4.5:1, tools/contraste.js) --brand azul de la marca Uttensio (isotipo), no de la interfaz --salviati modo Salviati, el que explica (pizarra) --sagredo modo Sagredo, el que pregunta y resuelve (azul de acción) (*-soft: fondo de su chip; nunca solo color: ícono + nombre) --fundador insignia de fundador (bronce conmemorativo, sobrio): el emblema y el nombre en .chip-fundador, sobre --fundador-soft (docs/fundadores.md; tools/contraste.js lo mide) ========================================================================== */ :root { color-scheme: light; --ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro", "Helvetica Neue", system-ui, sans-serif; --disp: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro", "Helvetica Neue", system-ui, sans-serif; --math: "STIX Two Text", "Cambria Math", "Times New Roman", serif; --mono: "SF Mono", ui-monospace, Menlo, Consolas, monospace; --desk: #e8e8eb; --canvas: #f6f6f8; --grid: #ebedf0; --grid2: #dde0e5; --paper: #ffffff; --paper-grid: rgba(30, 60, 110, .055); --paper-edge: rgba(0, 0, 0, .08); --glass: rgba(246, 246, 249, .72); --glass2: rgba(255, 255, 255, .84); --glass-hi: rgba(255, 255, 255, .8); --glass-line: rgba(0, 0, 0, .09); --panel: rgba(243, 243, 246, .9); --raised: #ffffff; --fill: rgba(118, 118, 128, .12); --fill2: rgba(118, 118, 128, .2); --sel: rgba(0, 0, 0, .065); --sep: rgba(0, 0, 0, .09); --sep2: rgba(0, 0, 0, .16); --ink: #1d1d1f; --ink2: #5c5c61; --ink3: #a1a1a6; --accent: #007aff; --accent-text: #0062cc; --accent-fill: #0071e3; --accent-soft: rgba(0, 122, 255, .11); --brand: #0071e3; --green: #34c759; --red: #ff3b30; --red-text: #c80014; --real: #0071a4; --real-soft: rgba(0, 113, 164, .12); --virt: #8944ab; --virt-soft: rgba(137, 68, 171, .11); --defl: #c93400; --defl-soft: rgba(201, 52, 0, .1); --hl: rgba(255, 214, 10, .36); --salviati: #2f4a57; --salviati-soft: rgba(47, 74, 87, .10); --sagredo: #0062cc; --sagredo-soft: rgba(0, 98, 204, .10); --fundador: #85600f; --fundador-soft: rgba(176, 128, 20, .14); --beam: #c7c7cc; --beam-edge: #8e8e93; --float: 0 10px 30px rgba(0, 0, 0, .10), 0 2px 6px rgba(0, 0, 0, .06); --glass-fx: blur(24px) saturate(1.8); --backdrop: rgba(20, 20, 24, .28); /* medidas */ --tb-h: 52px; --rb-h: 72px; --sb-h: 30px; --pl-w: 256px; --pr-w: 296px; --gap-panel: 8px; --r-panel: 14px; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --desk: #1b1b1d; --canvas: #161618; --grid: #1f1f22; --grid2: #2a2a2e; --paper: #232326; --paper-grid: rgba(255, 255, 255, .05); --paper-edge: rgba(255, 255, 255, .1); --glass: rgba(40, 40, 43, .72); --glass2: rgba(58, 58, 62, .82); --glass-hi: rgba(255, 255, 255, .14); --glass-line: rgba(255, 255, 255, .1); --panel: rgba(38, 38, 41, .9); --raised: #3a3a3e; --fill: rgba(118, 118, 128, .24); --fill2: rgba(118, 118, 128, .34); --sel: rgba(255, 255, 255, .09); --sep: rgba(255, 255, 255, .09); --sep2: rgba(255, 255, 255, .16); --ink: #f2f2f7; --ink2: #b7b7bd; --ink3: #6c6c72; --accent: #0a84ff; --accent-text: #5aabff; --accent-fill: #0a6ee0; --accent-soft: rgba(10, 132, 255, .16); --brand: #0a84ff; --green: #30d158; --red: #ff453a; --red-text: #ff7d76; --real: #64d2ff; --real-soft: rgba(100, 210, 255, .15); --virt: #da8fff; --virt-soft: rgba(218, 143, 255, .15); --defl: #ffb340; --defl-soft: rgba(255, 179, 64, .14); --hl: rgba(255, 214, 10, .15); --salviati: #9fbccb; --salviati-soft: rgba(159, 188, 203, .16); --sagredo: #5aabff; --sagredo-soft: rgba(90, 171, 255, .16); --fundador: #e0b85c; --fundador-soft: rgba(224, 184, 92, .16); --beam: #636366; --beam-edge: #8e8e93; --float: 0 10px 30px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .3); --backdrop: rgba(0, 0, 0, .45); } } :root[data-theme="dark"] { color-scheme: dark; --desk: #1b1b1d; --canvas: #161618; --grid: #1f1f22; --grid2: #2a2a2e; --paper: #232326; --paper-grid: rgba(255, 255, 255, .05); --paper-edge: rgba(255, 255, 255, .1); --glass: rgba(40, 40, 43, .72); --glass2: rgba(58, 58, 62, .82); --glass-hi: rgba(255, 255, 255, .14); --glass-line: rgba(255, 255, 255, .1); --panel: rgba(38, 38, 41, .9); --raised: #3a3a3e; --fill: rgba(118, 118, 128, .24); --fill2: rgba(118, 118, 128, .34); --sel: rgba(255, 255, 255, .09); --sep: rgba(255, 255, 255, .09); --sep2: rgba(255, 255, 255, .16); --ink: #f2f2f7; --ink2: #b7b7bd; --ink3: #6c6c72; --accent: #0a84ff; --accent-text: #5aabff; --accent-fill: #0a6ee0; --accent-soft: rgba(10, 132, 255, .16); --brand: #0a84ff; --green: #30d158; --red: #ff453a; --red-text: #ff7d76; --real: #64d2ff; --real-soft: rgba(100, 210, 255, .15); --virt: #da8fff; --virt-soft: rgba(218, 143, 255, .15); --defl: #ffb340; --defl-soft: rgba(255, 179, 64, .14); --hl: rgba(255, 214, 10, .15); --salviati: #9fbccb; --salviati-soft: rgba(159, 188, 203, .16); --sagredo: #5aabff; --sagredo-soft: rgba(90, 171, 255, .16); --fundador: #e0b85c; --fundador-soft: rgba(224, 184, 92, .16); --beam: #636366; --beam-edge: #8e8e93; --float: 0 10px 30px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .3); --backdrop: rgba(0, 0, 0, .45); }