/* ══════════════════════════════════════════════════════════════════════════ ZYRA TOKENS — sistema compartido Los nombres son ROLES, no colores. Se conmutan con data-palette en . v3: entra "claro" como paleta por defecto — fondo gris perla, superficies blancas, azul primario. Es la dirección minimalista del backoffice. Las paletas oscuras (nebula, oceano, magma, esmeralda) y aurora siguen disponibles desde el selector. ══════════════════════════════════════════════════════════════════════════ */ :root, html[data-palette="claro"] { --bg-0:#F3F5FA; --bg-1:#FFFFFF; --bg-2:#F6F8FC; --line:#E2E7F0; --line-soft:#ECEFF6; --text:#18213A; --text-2:#69748F; --text-mid:#414D6B; --violet:#2563EB; --violet-deep:#1A47B8; --violet-hi:#1D4ED8; --cyan:#0891B2; --cyan-deep:#0A7490; --green:#16A34A; --red:#DC2626; --amber:#D97706; --tint:#E9EFFD; --tint-2:#E3F5F8; } html[data-palette="nebula"] { --bg-0:#0A0A12; --bg-1:#12121E; --bg-2:#1A1A2E; --line:#2A2A40; --line-soft:#1E1E30; --text:#E6EDF3; --text-2:#8B949E; --text-mid:#B8C0CC; --violet:#9B30FF; --violet-deep:#6B20AF; --violet-hi:#C9A0FF; --cyan:#00B4D8; --cyan-deep:#0088A8; --green:#52B788; --red:#E94560; --amber:#E3B341; --tint:#1A0A2E; --tint-2:#0F1460; } html[data-palette="oceano"] { --bg-0:#051730; --bg-1:#0a2144; --bg-2:#102b52; --line:#23446e; --line-soft:#183656; --text:#EAF5FF; --text-2:#84A9C9; --text-mid:#A9C6DE; --violet:#2FA8F5; --violet-deep:#1273B8; --violet-hi:#8FD0FF; --cyan:#22D3B5; --cyan-deep:#0F9E88; --green:#4ADE80; --red:#FB7185; --amber:#FBBF24; --tint:#0d2b52; --tint-2:#12386e; } html[data-palette="magma"] { --bg-0:#250810; --bg-1:#33101b; --bg-2:#451626; --line:#6b2438; --line-soft:#521a2c; --text:#FFEDF0; --text-2:#C08A96; --text-mid:#D8AAB4; --violet:#F43F5E; --violet-deep:#B01535; --violet-hi:#FDA4AF; --cyan:#FB923C; --cyan-deep:#D96F16; --green:#4ADE80; --red:#FF5470; --amber:#FACC15; --tint:#3a1020; --tint-2:#6b1428; } html[data-palette="esmeralda"] { --bg-0:#062a1c; --bg-1:#0a3826; --bg-2:#0e4630; --line:#1e6446; --line-soft:#155238; --text:#ECFFF6; --text-2:#84B8A0; --text-mid:#A8D2BE; --violet:#10B981; --violet-deep:#067A54; --violet-hi:#6EE7B7; --cyan:#22D3EE; --cyan-deep:#0E9CB3; --green:#4ADE80; --red:#FB7185; --amber:#FBBF24; --tint:#0c4028; --tint-2:#106048; } html[data-palette="aurora"] { --bg-0:#eef0f9; --bg-1:#ffffff; --bg-2:#f4f5fc; --line:#d5d9ec; --line-soft:#e4e7f5; --text:#171a30; --text-2:#5a6080; --text-mid:#454b6e; --violet:#6d4bff; --violet-deep:#4f46e5; --violet-hi:#5b3ce6; --cyan:#0891b2; --cyan-deep:#067a92; --green:#059669; --red:#dc2626; --amber:#d97706; --tint:#e6e2f7; --tint-2:#dfe4fb; } /* ── Tipografia ── Inter para interfaz (la sans limpia del look minimalista). Rajdhani para numeros, localizadores y valores: identidad UNIBOT. */ :root { --font-ui: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; --font-num: 'Rajdhani', 'Segoe UI', sans-serif; /* Escala tipografica */ --t-xs:11px; --t-sm:13px; --t-base:14px; --t-md:16px; --t-lg:22px; --t-xl:30px; --t-2xl:48px; /* Espacio */ --e-1:4px; --e-2:8px; --e-3:12px; --e-4:16px; --e-5:24px; --e-6:32px; --e-7:48px; /* Forma: radios generosos, esquina redondeada como rasgo del sistema */ --r-sm:8px; --r-md:12px; --r-lg:16px; --r-pill:999px; /* Movimiento */ --transicion: .25s cubic-bezier(.4,0,.2,1); /* Sidebar colapsable: cerrada muestra iconos, al pasar el mouse se abre */ --sidebar: 240px; --sidebar-min: 76px; /* Elevacion: sombras difusas en vez de bordes duros o glow */ --sombra: 0 1px 2px rgba(20,28,58,.05), 0 4px 16px rgba(20,28,58,.05); --sombra-alta: 0 2px 4px rgba(20,28,58,.06), 0 12px 32px rgba(20,28,58,.10); /* Intensidad del neon (la usa el editor de paleta personalizada). En el tratamiento plano casi no interviene, pero se respeta el contrato. */ --neon-a: 35%; --neon-b: 18%; } /* Vidrio: lo consume el editor personalizado y cualquier resto legado. En paletas claras tiene que oscurecer, no aclarar. */ html[data-palette="claro"], html[data-palette="aurora"] { --vidrio: rgba(20,22,45,.028); --vidrio-alto: rgba(20,22,45,.055); --vidrio-borde: rgba(20,22,45,.10); --vidrio-luz: rgba(255,255,255,.6); } :root { --vidrio: rgba(255,255,255,.035); --vidrio-alto: rgba(255,255,255,.06); --vidrio-borde: rgba(255,255,255,.08); --vidrio-luz: rgba(255,255,255,.06); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.001ms !important; transition-duration:.001ms !important; } }