/* ============================================================ 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. ============================================================ */ :root { /* --- Superficies --- */ --bg-void: #050508; --bg-deep: #08080f; --bg-panel: rgba(12, 14, 24, 0.62); --bg-panel-solid: #0b0d16; --bg-elev: rgba(20, 24, 40, 0.72); --bg-inset: rgba(0, 0, 0, 0.45); /* --- Neones de estado --- */ --neon-cyan: #00f0ff; --neon-violet: #a855f7; --neon-amber: #ffb020; --neon-red: #ff3355; --neon-green: #24ffa5; --cyan-dim: rgba(0, 240, 255, 0.14); --violet-dim: rgba(168, 85, 247, 0.16); --amber-dim: rgba(255, 176, 32, 0.15); /* Color activo del sistema: lo reescribe la máquina de estados */ --accent: var(--neon-cyan); --accent-dim: var(--cyan-dim); /* --- Texto --- */ --txt-hi: #e8f6ff; --txt: #a9bdd0; --txt-lo: #6b7f94; --txt-ghost: #3c4a5a; /* --- Bordes / rejilla --- */ --line: rgba(0, 240, 255, 0.16); --line-soft: rgba(140, 170, 200, 0.11); --line-hard: rgba(0, 240, 255, 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", Roboto, "Helvetica Neue", Arial, sans-serif; --fs-nano: 9px; --fs-micro: 10px; --fs-xs: 11px; --fs-sm: 12px; --fs-md: 14px; --fs-lg: 17px; --fs-xl: 22px; --fs-hero: 30px; --track-wide: 0.18em; --track-xwide: 0.32em; /* --- Espaciado --- */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 22px; --s6: 30px; --s7: 42px; /* --- Radios --- */ --r-sm: 4px; --r-md: 8px; --r-lg: 14px; --r-pill: 999px; /* --- Glow --- */ --glow-cyan: 0 0 12px rgba(0, 240, 255, 0.45), 0 0 34px rgba(0, 240, 255, 0.16); --glow-violet: 0 0 14px rgba(168, 85, 247, 0.5), 0 0 40px rgba(168, 85, 247, 0.2); --glow-amber: 0 0 12px rgba(255, 176, 32, 0.45), 0 0 32px rgba(255, 176, 32, 0.16); --glow-accent: 0 0 12px var(--accent-dim), 0 0 34px var(--accent-dim); --shadow-panel: 0 18px 50px rgba(0, 0, 0, 0.66); /* --- Tiempos --- */ --t-fast: 120ms; --t-mid: 260ms; --t-slow: 520ms; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* --- Layout --- */ --nav-h: 60px; --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-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: rgba(255, 176, 32, 0.2); --line-hard: rgba(255, 176, 32, 0.45); } body[data-phase="contact"], body[data-phase="comm"] { --accent: var(--neon-violet); --accent-dim: var(--violet-dim); --line: rgba(168, 85, 247, 0.22); --line-hard: rgba(168, 85, 247, 0.5); }