/* ============================================================ Vinyala · Design Tokens — Dirección "Aurora Lila" Tema CLARO por defecto. Modo oscuro vía [data-theme="dark"]. Fuente única de verdad: DESIGN-SYSTEM.md Regla: referenciar SIEMPRE estas variables, nunca hex sueltos. Contrastes = objetivos calculados; validar antes de producción. ============================================================ */ :root{ color-scheme: light; /* ---- Superficies / texto (TEMA CLARO) ---- */ --kl-bg: #F4F1EA; /* Hueso Cloud — fondo de página */ --kl-surface: #E6E0D2; /* Lino — cards, paneles, toolbars */ --kl-surface-raised: #FBF8F2; /* near-white cálido — elevados */ --kl-border: #B5AE9C; /* Piedra — bordes, divisores (≥3:1 UI) */ --kl-text: #2A2A33; /* Tinta Zinc — cuerpo + titulares (~12:1) */ --kl-text-muted: #6B6557; /* Taupe — secundario/metadatos (~5.3:1 sobre Hueso; 4.40:1 sobre Lino) */ --kl-muted-strong: #5E594C; /* Taupe Hondo — secundario legible SOBRE Lino/--kl-surface (5.30:1; 6.19:1 sobre bg) — sellado F10 2026-07-10 */ /* ---- Marca / acentos ---- */ --kl-primary: #6E5FC9; /* Lila Profundo — CTA, links, texto de marca (5.3:1) */ --kl-primary-soft: #A99CE6; /* Lila Aurora — hero, fills grandes, glow 3D */ --kl-secondary: #2E7E78; /* Teal Puente — datos, heatmap, tabs (4.9:1) */ --kl-warm: #C98A86; /* Malva Arcilla — calidez, fichas cálidas */ --kl-accent: #CDE34A; /* Luz Cítrica — SOLO no-texto: progreso/foco/picos */ /* ---- Texto accesible (lilas/teales más oscuros, ≥4.5:1 sobre fondos claros) ---- */ --kl-primary-text: #5F54B8; /* lila para TEXTO/links sobre claro (5.4:1 sobre Hueso) */ --kl-secondary-text: #2A6E69; /* teal para TEXTO sobre claro (5.27:1 sobre Hueso) */ /* Semánticos endurecidos: para texto BLANCO sobre el relleno de color (≥4.5:1) */ --kl-success-strong: #357A6C; --kl-danger-strong: #B8473F; --kl-info-strong: #5068C0; --kl-warning-strong: #8A6212; /* Ámbar Tierra — texto/icono ámbar ≥4.5:1 sobre raised (5.16:1; 4.16:1 sobre Lino → exige fondo raised) — sellado F10 2026-07-10 */ /* ---- Semáforos (siempre con icono + texto) ---- */ --kl-success: #3E8E7E; /* Jade (~4.6:1) */ --kl-warning: #D99A2B; /* Ámbar Haze */ --kl-danger: #C9544B; /* Terracota Error (~4.6:1) */ --kl-info: #5E7BD0; /* Azul Lila Info (NO el periwinkle de Calm) */ /* ---- Texto sobre rellenos de color ---- */ --kl-on-primary: #FFFFFF; /* sobre Lila Profundo */ --kl-on-accent: #2E3406; /* sobre cítrico, solo si imprescindible (UI ≥3:1) */ --kl-on-warm: #4A1B0C; --kl-on-warning: #412402; /* ---- Heatmap muscular «la chispa» (carga: reposo → pico) — SELLADA 2026-07-11 (DECISION-RAMPA-MUSCULAR.md §7, candidata C). El reposo NO es un stop: es el CUERPO (heat-0 = base neutra, sin tinte). heat-1..4 = los 4 stops activos. ---- */ --kl-heat-0: #E6E0D2; /* reposo / sin dato (base neutra, no es color de rampa) */ --kl-body-rest: #DDD6C6; /* reposo de la silueta/huella muscular SOBRE cards (≠ heat-0, que se funde con Lino) — sellado F10 2026-07-10 */ --kl-heat-1: #CDE34A; /* bajo (cítrico · la chispa) */ --kl-heat-2: #D99A2B; /* medio (ámbar) */ --kl-heat-3: #C98A86; /* alto (coral) */ --kl-heat-4: #C9544B; /* pico / sobrecarga (terracota) */ /* ---- Capa CUERPO — maniquí 3D + imagen femenina 2D (independiente del tema) ---- La rampa de arriba (--kl-heat-1..4) viste el heatmap; estos calibran el shader. */ --kl-body: #8B79FF; /* color del cuerpo prerender (#6E5FC9 tras el sombreado) */ --kl-body-rim: #3a3162; /* = cRim del holoFrag (borde del cuerpo; tokenización, no hex nuevo) */ --kl-heat-knee: 0.60; /* «codo» de la rampa de opacidad (uTintKnee) — re-calibración sello v2 2026-07-15 (espejo del JSON heatKnee; 0.51 era pre-v2) */ --kl-heat-max: 0.60; /* opacidad máxima del tinte sobre el cuerpo (uTintMax) — sello v2 (espejo del JSON heatMax; 0.98 era pre-v2) */ --kl-heat-peak: 0.00; /* «pico que arde» (peak glow) RECHAZADO: 0 = apagado, NO cableado */ /* ---- Capa KIT — tokens del kit compartido (esc-*/bt-*), copiados EXACTOS del scope body.escuela-on de base_phase1.html. Promoción de scope = V0.1b. ---- */ --vy-line: color-mix(in srgb,var(--kl-border) 52%,var(--kl-bg)); --vy-sunk: color-mix(in srgb,var(--kl-surface) 72%,var(--kl-bg)); --vy-glow: color-mix(in srgb,var(--kl-primary-soft) 32%,transparent); --vy-sh: 0 1px 2px rgba(30,25,50,.07),0 6px 22px rgba(30,25,50,.06); --vy-sh-lg: 0 4px 14px rgba(30,25,50,.10),0 22px 54px color-mix(in srgb,var(--kl-primary) 15%,transparent); /* ---- Tipografía ---- */ --kl-font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --kl-font-body: 'Inter', system-ui, -apple-system, sans-serif; --kl-font-mono: 'IBM Plex Mono', ui-monospace, monospace; /* ---- Forma / espaciado ---- */ --kl-radius-sm: 9px; --kl-radius: 14px; --kl-radius-lg: 18px; } /* ---- Fuentes por escritura (i18n) — evita "tofu" en árabe/CJK/devanagari ---- El runtime fija ; aquí cambiamos la familia a una pila con glifos del idioma (Noto + fuentes de sistema; sin carga de CDN). Fraunces/Inter son latinas, por eso también se sustituye el display en escrituras no latinas. */ html[lang="ar"] { --kl-font-body:'Noto Sans Arabic','Geeza Pro','Segoe UI',system-ui,sans-serif; --kl-font-display:'Noto Naskh Arabic','Geeza Pro',Georgia,serif; } html[lang^="zh-Hans"]{ --kl-font-body:'Noto Sans SC','PingFang SC','Microsoft YaHei',system-ui,sans-serif; --kl-font-display:var(--kl-font-body); } html[lang^="zh-Hant"]{ --kl-font-body:'Noto Sans TC','PingFang TC','Microsoft JhengHei',system-ui,sans-serif; --kl-font-display:var(--kl-font-body); } html[lang^="ja"] { --kl-font-body:'Noto Sans JP','Hiragino Sans','Yu Gothic',system-ui,sans-serif; --kl-font-display:var(--kl-font-body); } html[lang^="ko"] { --kl-font-body:'Noto Sans KR','Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif; --kl-font-display:var(--kl-font-body); } html[lang^="hi"] { --kl-font-body:'Noto Sans Devanagari','Kohinoor Devanagari',system-ui,sans-serif; --kl-font-display:var(--kl-font-body); } /* CIRÍLICO · el hueco que quedaba. Se servían Fraunces e Inter en subsets `latin` y `latin-ext` (U+0100–024F), y el cirílico es U+0400–04FF: no lo cubre ninguno de los dos. Así que ruso y ucraniano NO caían a la fuente de marca — caían a la que el navegador tuviera a mano, con otra altura de x y otro peso, y la palabra «Vinyala» al lado en Fraunces para que se notara. Se cierra como las otras cinco escrituras: pila con glifos propios y sin CDN. Aquí sí se conserva una serif de marca para los titulares, porque las tres primeras de la lista SÍ traen cirílico completo. */ html[lang^="ru"], html[lang^="uk"] { --kl-font-body:'Noto Sans','PT Sans','Segoe UI',system-ui,sans-serif; --kl-font-display:'Noto Serif','PT Serif',Georgia,serif; } /* ============================================================ MODO OSCURO — opt-in (el default del producto es claro). near-black CÁLIDO, acentos desaturados/aclarados, texto crema. Valores marcados (*) = objetivos calculados, validar. ============================================================ */ [data-theme="dark"]{ color-scheme: dark; --kl-bg: #16151C; /* Noche Lila */ --kl-surface: #211F2B; --kl-surface-raised: #2A2836; --kl-border: #38354A; /* (*) lavanda apagado */ --kl-text: #EDEAF6; /* Bruma Lila (~14:1) */ --kl-text-muted: #A9A4BD; --kl-muted-strong: #B7B2CB; /* secundario legible sobre surface oscura (7.91:1) — sellado F10 */ --kl-primary: #A99CE6; /* Lila Aurora como CTA en oscuro */ --kl-primary-soft: #A99CE6; --kl-secondary: #5FB0A6; /* (*) teal aclarado */ --kl-warm: #D6A29E; /* (*) */ --kl-accent: #CDE34A; /* cítrico (bajar brillo en uso intenso) */ /* Texto accesible en oscuro (objetivos calculados; validar ≥4.5:1) */ --kl-primary-text: #C9BEF0; --kl-secondary-text: #7FC8BD; --kl-success-strong: #5FB39E; --kl-danger-strong: #E0837A; --kl-info-strong: #8AA0E0; --kl-warning-strong: #E6B24E; /* = --kl-warning dark (8.37:1 sobre surface) — sellado F10 */ --kl-body-rest: #312E40; /* reposo de silueta/huella en oscuro — sellado F10 */ --kl-success: #5FB39E; /* (*) */ --kl-warning: #E6B24E; /* (*) */ --kl-danger: #E0837A; /* (*) */ --kl-info: #8AA0E0; /* (*) */ --kl-on-primary: #16151C; /* texto oscuro sobre lila claro */ --kl-on-accent: #2E3406; /* Capa KIT en oscuro (sombras más densas; --vy-line/--vy-sunk/--vy-glow se heredan de :root y se recalculan solos contra los --kl-* oscuros). Copiado EXACTO de [data-theme="dark"] body.escuela-on de base_phase1.html. */ --vy-sh: 0 1px 2px rgba(0,0,0,.35),0 6px 22px rgba(0,0,0,.30); --vy-sh-lg: 0 4px 14px rgba(0,0,0,.42),0 22px 54px color-mix(in srgb,var(--kl-primary) 18%,transparent); }