/* ================================================================ Nexus JANO — Temas (piel × claro/oscuro) · Grupo SI Now Un solo archivo con las 6 combinaciones, misma API --nj-*. Se activa con atributos en : Sin atributos (o sin JS) = azul claro. Puede sustituir a nexus-jano-tokens.css o convivir con él. Pareja: nexus-jano-theme.js (persistencia + selector). ================================================================ */ /* ---------- Base = AZUL · claro (fallback sin JS) ---------- */ :root { /* Marca */ --nj-primary: #1b4f7e; --nj-primary-dark: #163F65; /* hover de primario */ --nj-accent: #378ADD; --nj-accent-soft: #EAF3FC; --nj-sky: #7CC4F8; --nj-navy: #0F2E4C; /* Neutros */ --nj-bg: #F5F5F3; --nj-card: #FFFFFF; --nj-text: #2C2C2A; --nj-text-soft: #888780; --nj-border: #E8E7E3; /* Semáforos de estado (el color base NUNCA cambia de piel/tema) */ --nj-ok: #2F9E62; --nj-ok-bg: #E8F5EE; --nj-ok-text: #1F6B42; --nj-warn: #E39B2D; --nj-warn-bg: #FBF1DE; --nj-warn-text: #96601A; --nj-crit: #D65745; --nj-crit-bg: #FAE9E7; --nj-crit-text: #A03B31; --nj-info-bg: #EAF3FC; --nj-info-text: #1F5FA8; /* Geometría y sombra */ --nj-radius: 12px; --nj-radius-sm: 8px; --nj-shadow: 0 1px 3px rgba(21,42,61,0.07), 0 6px 18px rgba(21,42,61,0.06); /* Gradientes */ --nj-gradient-header: linear-gradient(120deg, #1b4f7e, #378ADD); --nj-gradient-beam: linear-gradient(180deg, #7CC4F8, #378ADD); /* Isotipo sobre el header con gradiente (versión -dark de cada piel) */ --nj-iso-legado: #378ADD; --nj-iso-futuro: #7CC4F8; --nj-iso-luz-a: #FFFFFF; --nj-iso-luz-b: #CFE8FC; /* Tipografía */ --nj-font: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif; --nj-wordmark-weight: 600; --nj-wordmark-tracking: 0.03em; } /* ---------- AZUL · oscuro ---------- */ :root[data-nj-skin="azul"][data-nj-theme="dark"] { --nj-primary: #3E90DE; --nj-primary-dark: #5AA5E8; /* en oscuro el hover aclara */ --nj-accent: #7CC4F8; --nj-accent-soft: rgba(124,196,248,0.14); --nj-sky: #A6D7FB; --nj-bg: #081A2C; --nj-card: #0F2E4C; --nj-text: #E9F1F8; --nj-text-soft: #8FA9C0; --nj-border: #21456A; --nj-ok-bg: rgba(47,158,98,0.18); --nj-ok-text: #83D9AC; --nj-warn-bg: rgba(227,155,45,0.18); --nj-warn-text: #F2C377; --nj-crit-bg: rgba(214,87,69,0.20); --nj-crit-text: #F4A093; --nj-info-bg: rgba(124,196,248,0.16); --nj-info-text: #A6D7FB; --nj-shadow: 0 1px 3px rgba(0,0,0,0.45), 0 6px 18px rgba(0,0,0,0.40); --nj-gradient-header: linear-gradient(120deg, #0C2440, #1E5285); } /* ---------- UMBRAL · claro ---------- */ :root[data-nj-skin="umbral"] { --nj-primary: #4B3FE4; --nj-primary-dark: #3A30C8; --nj-accent: #4B3FE4; --nj-accent-soft: #EEECFC; --nj-sky: #8B7BFF; --nj-coral: #FF6B3D; /* coral: solo marca, nunca estado */ --nj-navy: #080B1E; --nj-bg: #ECEBF3; --nj-card: #FFFFFF; --nj-text: #0B0E24; --nj-text-soft: #6E6F86; --nj-border: #E6E5F0; --nj-info-bg: #EEECFC; --nj-info-text: #3A30C8; --nj-shadow: 0 1px 3px rgba(20,16,64,0.07), 0 6px 18px rgba(20,16,64,0.06); --nj-gradient-header: linear-gradient(120deg, #0F0C36, #4238D6); --nj-gradient-beam: linear-gradient(180deg, #8B7BFF, #FF6B3D); --nj-iso-legado: #6F66F2; --nj-iso-futuro: #FF6B3D; --nj-iso-luz-a: #8B7BFF; --nj-iso-luz-b: #FF6B3D; } /* ---------- UMBRAL · oscuro ---------- */ :root[data-nj-skin="umbral"][data-nj-theme="dark"] { --nj-primary: #6F66F2; --nj-primary-dark: #8B7BFF; --nj-accent: #8B7BFF; --nj-accent-soft: rgba(139,123,255,0.16); --nj-sky: #AFA5FF; --nj-bg: #080B1E; --nj-card: #121735; --nj-text: #ECEDF9; --nj-text-soft: #9AA0C7; --nj-border: #282E58; --nj-ok-bg: rgba(47,158,98,0.18); --nj-ok-text: #83D9AC; --nj-warn-bg: rgba(227,155,45,0.18); --nj-warn-text: #F2C377; --nj-crit-bg: rgba(214,87,69,0.20); --nj-crit-text: #F4A093; --nj-info-bg: rgba(139,123,255,0.18); --nj-info-text: #AFA5FF; --nj-shadow: 0 1px 3px rgba(0,0,0,0.50), 0 6px 18px rgba(0,0,0,0.45); --nj-gradient-header: linear-gradient(120deg, #0B0930, #3730B8); } /* ---------- CARDENAL · claro ---------- */ :root[data-nj-skin="cardenal"] { --nj-primary: #B31834; --nj-primary-dark: #8E1226; --nj-accent: #C41E3A; --nj-accent-soft: #FBEAED; --nj-sky: #F5B04A; --nj-mask: #2B1B1E; /* antifaz: pilar del legado */ --nj-navy: #201114; --nj-bg: #F7F4F1; --nj-card: #FFFFFF; --nj-text: #261B1D; --nj-text-soft: #8C7F81; --nj-border: #ECE3E0; --nj-info-bg: #FBEAED; --nj-info-text: #8E1226; --nj-shadow: 0 1px 3px rgba(58,18,26,0.07), 0 6px 18px rgba(58,18,26,0.06); --nj-gradient-header: linear-gradient(120deg, #290F14, #B31834); --nj-gradient-beam: linear-gradient(180deg, #F5B04A, #C41E3A); --nj-iso-legado: #E8536A; --nj-iso-futuro: #F5B04A; --nj-iso-luz-a: #FFFFFF; --nj-iso-luz-b: #FFDFB8; } /* ---------- CARDENAL · oscuro ---------- */ /* ⚠ Marca y crítico comparten familia roja: el rojo de marca jamás señala error; los semáforos siguen siendo los estándar. */ :root[data-nj-skin="cardenal"][data-nj-theme="dark"] { --nj-primary: #E8536A; --nj-primary-dark: #EF7285; --nj-accent: #F5B04A; /* en oscuro, la luz dorada lleva lo interactivo */ --nj-accent-soft: rgba(245,176,74,0.15); --nj-sky: #F7BC5B; --nj-bg: #201114; --nj-card: #2C191E; --nj-text: #F6EEEB; --nj-text-soft: #B59D99; --nj-border: #462A31; --nj-ok-bg: rgba(47,158,98,0.18); --nj-ok-text: #83D9AC; --nj-warn-bg: rgba(227,155,45,0.20); --nj-warn-text: #F2C377; --nj-crit-bg: rgba(214,87,69,0.22); --nj-crit-text: #F4A093; --nj-info-bg: rgba(245,176,74,0.16); --nj-info-text: #F7BC5B; --nj-shadow: 0 1px 3px rgba(0,0,0,0.50), 0 6px 18px rgba(0,0,0,0.45); --nj-gradient-header: linear-gradient(120deg, #1C0A0E, #8E1226); } /* Formularios y scrollbars nativos acordes al tema */ :root[data-nj-theme="dark"] { color-scheme: dark; }