/* ============================================================ tokens.css — Design tokens de SPECTRA OS Responsabilidad: definir la totalidad del lenguaje visual (color, tipografía, espaciado, glow, tiempos) como custom properties. Ningún otro archivo debe declarar colores crudos. Dirección: INSTRUMENTO PREMIUM AMIGABLE. El neón no es decoración: es acento funcional de estado. Superficies glass con radios generosos, tipografía sans humanista para la UI y monospace SOLO para datos numéricos. ============================================================ */ :root { /* --- Superficies (negro azulado suave, cálido) --- */ --bg-void: #0a0b10; --bg-deep: #0d0f16; --bg-panel: rgba(22, 25, 36, 0.72); --bg-panel-solid: #14171f; --bg-elev: rgba(32, 37, 52, 0.82); --bg-inset: rgba(6, 7, 11, 0.55); /* --- Acentos semánticos de estado --- */ --neon-cyan: #22d3ee; /* escaneo / normal */ --neon-amber: #fbbf24; /* actividad / presencia */ --neon-violet: #a78bfa; /* contacto / comunicación */ --neon-red: #f87171; /* alerta fuerte */ --neon-green: #34d399; /* confirmaciones / capturas */ --cyan-dim: rgba(34, 211, 238, 0.16); --violet-dim: rgba(167, 139, 250, 0.18); --amber-dim: rgba(251, 191, 36, 0.16); --red-dim: rgba(248, 113, 113, 0.18); --green-dim: rgba(52, 211, 153, 0.16); /* Color activo del sistema: lo reescribe la máquina de estados */ --accent: var(--neon-cyan); --accent-dim: var(--cyan-dim); /* --- Texto --- */ --txt-hi: #f1f5f9; --txt: #cbd5e1; --txt-lo: #94a3b8; --txt-ghost: #64748b; /* --- Bordes / rejilla --- */ --line: rgba(148, 163, 184, 0.16); --line-soft: rgba(148, 163, 184, 0.1); --line-hard: rgba(34, 211, 238, 0.42); /* --- Tipografía --- */ --font-mono: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Monaco, "Cascadia Mono", "Roboto Mono", Consolas, monospace; --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, "Helvetica Neue", Arial, sans-serif; --fs-nano: 10px; --fs-micro: 11px; --fs-xs: 12px; --fs-sm: 13px; --fs-md: 15px; --fs-lg: 18px; --fs-xl: 24px; --fs-hero: 32px; --track-wide: 0.06em; --track-xwide: 0.14em; /* --- Espaciado generoso --- */ --s1: 4px; --s2: 8px; --s3: 14px; --s4: 20px; --s5: 26px; --s6: 34px; --s7: 46px; /* --- Radios amables --- */ --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 24px; --r-pill: 999px; /* --- Objetivos táctiles --- */ --tap: 48px; --tap-hero: 56px; /* --- Glow suave --- */ --glow-cyan: 0 0 16px rgba(34, 211, 238, 0.32), 0 0 40px rgba(34, 211, 238, 0.12); --glow-violet: 0 0 18px rgba(167, 139, 250, 0.36), 0 0 44px rgba(167, 139, 250, 0.14); --glow-amber: 0 0 16px rgba(251, 191, 36, 0.32), 0 0 40px rgba(251, 191, 36, 0.12); --glow-accent: 0 0 16px var(--accent-dim), 0 0 40px var(--accent-dim); --shadow-panel: 0 12px 40px rgba(0, 0, 0, 0.42); --shadow-lift: 0 6px 20px rgba(0, 0, 0, 0.3); /* --- Tiempos: micro-animaciones suaves --- */ --t-fast: 140ms; --t-mid: 280ms; --t-slow: 540ms; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* --- Layout --- */ --nav-h: 66px; --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px); --z-video: 1; --z-overlay: 2; --z-hud: 10; --z-nav: 40; --z-call: 55; --z-modal: 60; --z-boot: 90; } /* Paletas de estado aplicadas al por state-machine.js */ body[data-phase="presence"] { --accent: var(--neon-amber); --accent-dim: var(--amber-dim); --line-hard: rgba(251, 191, 36, 0.45); } body[data-phase="contact"], body[data-phase="comm"] { --accent: var(--neon-violet); --accent-dim: var(--violet-dim); --line-hard: rgba(167, 139, 250, 0.5); } /* ---- MODO SIMPLE / EXPERTO ---- El instrumental técnico solo existe en modo experto: se oculta por completo (no solo se atenúa) para que la vista por defecto sea clara al primer vistazo. */ body[data-ui="simple"] .expert-only { display: none !important; } body[data-ui="expert"] .simple-only { display: none !important; } /* Reducción de movimiento: respeta la preferencia del sistema. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }