/*
* UNIVERSAL SIGNALS — DESIGN TOKENS
* Fuente única de verdad. Todos los HTML cargan este archivo vía .
* v1.0 · Mayo 2026
*
* TEMAS:
* :root → Tema por defecto (oscuro profundo)
* [data-theme="universo"] → Tema alternativo (púrpura cálido)
* [data-theme="vanilla"] → Tema claro premium (blanco + violeta)
*
* USO:
*
* Para activar un tema: ó
*/
/* ============================================================
TEMA POR DEFECTO — Oscuro profundo
============================================================ */
:root {
/* Fondo y superficie */
--bg: #07070A;
--bg-surface: rgba(255,255,255,0.04);
--bg-surface-2: rgba(255,255,255,0.08);
/* Tipografía */
--ink: #F4F1EA;
--ink-soft: #D4D1C9;
--ink-muted: #8A8880;
--ink-dim: #6A6865;
/* Acento y gradientes */
--accent: #c789ff;
--accent-blue: #5170ff;
--accent-pink: #ff66c4;
--grad: linear-gradient(135deg, #c789ff 0%, #ff66c4 100%);
--grad-accent: linear-gradient(135deg, #c789ff 0%, #ff66c4 100%);
/* Líneas y bordes */
--line: rgba(244,241,234,.06);
--line-strong: rgba(244,241,234,.12);
--line-accent: rgba(199,137,255,.25);
/* Glassmorphism */
--glass-bg: rgba(255,255,255,0.04);
--glass-border: rgba(244,241,234,0.10);
--glass-blur: blur(24px);
/* Sombras */
--shadow-card: 0 32px 80px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.08);
--shadow-btn: 0 8px 32px rgba(81,112,255,0.35);
--shadow-glow: 0 0 32px rgba(199,137,255,0.3);
--fade-bottom: rgba(10,10,16,.98);
/* Tipografías */
--font-display: 'Space Grotesk', sans-serif;
--font-serif: 'Instrument Serif', serif;
--font-mono: 'JetBrains Mono', monospace;
/* Test — variables internas del componente TestScreen */
--t-bg: #07070A;
--t-ink: #F4F1EA;
--t-ink-soft: #D4D1C9;
--t-line: rgba(244,241,234,.08);
/* Radios */
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 24px;
--radius-pill: 999px;
/* Transiciones */
--ease-out: cubic-bezier(0.4, 0, 0.2, 1);
--duration-fast: 0.2s;
--duration-mid: 0.3s;
--duration-slow: 0.6s;
}
/* ============================================================
TEMA UNIVERSO — Púrpura cálido
Activar con:
============================================================ */
[data-theme="universo"] {
/* Fondo y superficie */
--bg: #0a0612;
--bg-surface: rgba(180,120,255,0.05);
--bg-surface-2: rgba(180,120,255,0.10);
/* Tipografía */
--ink: #F0EBF8;
--ink-soft: #CCB8E8;
--ink-muted: #9070B8;
--ink-dim: #6A4F8A;
/* Acento y gradientes */
--accent: #e0a0ff;
--accent-blue: #9060ff;
--accent-pink: #ff80d0;
--grad: linear-gradient(135deg, #9060ff 0%, #ff80d0 100%);
--grad-accent: linear-gradient(135deg, #e0a0ff 0%, #ff80d0 100%);
/* Líneas y bordes */
--line: rgba(240,235,248,.07);
--line-strong: rgba(240,235,248,.14);
--line-accent: rgba(224,160,255,.30);
/* Glassmorphism */
--glass-bg: rgba(180,120,255,0.06);
--glass-border: rgba(240,235,248,0.12);
--glass-blur: blur(24px);
/* Sombras */
--shadow-card: 0 32px 80px rgba(10,6,18,0.7), inset 0 1px 0 rgba(255,255,255,0.08);
--shadow-btn: 0 8px 32px rgba(144,96,255,0.40);
--shadow-glow: 0 0 32px rgba(224,160,255,0.35);
--fade-bottom: rgba(10,6,18,0.98);
/* Test — variables internas */
--t-bg: #0a0612;
--t-ink: #F0EBF8;
--t-ink-soft: #CCB8E8;
--t-line: rgba(240,235,248,.09);
}
/* ============================================================
TEMA VANILLA — Modo claro premium
Activar con:
============================================================ */
[data-theme="vanilla"] {
--bg: #FFFFFF;
--bg-surface: rgba(0,0,0,0.04);
--bg-surface-2: rgba(0,0,0,0.08);
--ink: #0D0D0D;
--ink-soft: #3A3A3A;
--ink-muted: #6B6B6B;
--ink-dim: #9A9A9A;
--accent: #6B2FD9;
--accent-blue: #3B5BDB;
--accent-pink: #C2006F;
--grad: linear-gradient(135deg, #6B2FD9 0%, #C2006F 100%);
--grad-accent: linear-gradient(135deg, #6B2FD9 0%, #C2006F 100%);
--line: rgba(0,0,0,0.08);
--line-strong: rgba(0,0,0,0.15);
--line-accent: rgba(107,47,217,0.25);
--glass-bg: rgba(0,0,0,0.03);
--glass-border: rgba(0,0,0,0.10);
--glass-blur: blur(24px);
--shadow-card: 0 32px 80px rgba(0,0,0,0.12), inset 0 1px 0 rgba(0,0,0,0.05);
--shadow-btn: 0 8px 32px rgba(59,91,219,0.30);
--shadow-glow: 0 0 32px rgba(107,47,217,0.35);
--fade-bottom: rgba(255,255,255,.98);
--t-bg: #FFFFFF;
--t-ink: #0D0D0D;
--t-ink-soft: #3A3A3A;
--t-line: rgba(0,0,0,0.08);
}
[data-theme="vanilla"] .us-nav {
background: rgba(255,255,255,0.90) !important;
border-bottom-color: rgba(0,0,0,0.08) !important;
}
[data-theme="vanilla"] .soul-letter-card {
background: rgba(255,255,255,0.95) !important;
box-shadow: 0 30px 60px rgba(0,0,0,0.12), 0 12px 30px rgba(107,47,217,0.15) !important;
}
[data-theme="vanilla"] .us-mobile-overlay {
background: rgba(255,255,255,0.97) !important;
}
[data-theme="vanilla"] .us-grad-border {
background: #ffffff !important;
}
[data-theme="vanilla"] .us-quote-box {
background: #ffffff !important;
}
[data-theme="vanilla"] .us-filters-sticky {
background: rgba(255,255,255,0.90) !important;
}
/* ============================================================
TEMA: universo-menta — Verde menta sobre negro profundo
Activo con:
============================================================ */
[data-theme="universo-menta"] {
/* Fondos */
--bg: #07070B;
--bg-surface: #0B0D10;
--bg-surface-2: #0F1214;
/* Texto */
--ink: #F4F2F8;
--ink-soft: #A7A5B3;
--ink-muted: #6D6B79;
--ink-dim: rgba(244,242,248,.35);
/* Acento principal — verde menta */
--accent: #5FEFC4;
--accent-blue: #46E7B8;
--accent-pink: #22D9A2;
/* Degradados */
--grad: linear-gradient(102deg, #C5FFEC, #5FEFC4 45%, #22D9A2);
--grad-accent: linear-gradient(110deg, #9DF8DC, #46E7B8 55%, #1FCE9C);
/* Líneas */
--line: rgba(255,255,255,.06);
--line-strong: rgba(255,255,255,.12);
--line-accent: rgba(95,239,196,.40);
/* Glass */
--glass-bg: rgba(255,255,255,.012);
--glass-border: rgba(95,239,196,.18);
--glass-blur: blur(24px);
/* Sombras */
--shadow-card: 0 8px 32px rgba(0,0,0,.55);
--shadow-btn: 0 0 44px rgba(46,224,176,.45), inset 0 0 0 1px rgba(190,255,235,.55);
--shadow-glow: 0 0 80px rgba(46,224,176,.18);
/* Fade bottom */
--fade-bottom: linear-gradient(to bottom, transparent, #07070B);
}
/* Overrides para elementos con inline styles que no reaccionan a CSS variables */
[data-theme="universo-menta"] .us-nav {
background: rgba(7,7,11,.85) !important;
backdrop-filter: blur(20px) !important;
border-bottom: 1px solid rgba(95,239,196,.12) !important;
}
[data-theme="universo-menta"] .us-mobile-overlay {
background: #07070B !important;
}
[data-theme="universo-menta"] .us-grad-border {
background: linear-gradient(110deg, #9DF8DC, #46E7B8 55%, #1FCE9C) !important;
}
[data-theme="universo-menta"] .us-filters-sticky {
background: rgba(7,7,11,.92) !important;
}
[data-theme="universo-menta"] .us-quote-box {
background: rgba(95,239,196,.04) !important;
border-color: rgba(95,239,196,.20) !important;
}
[data-theme="universo-menta"] .soul-letter-card {
background: rgba(95,239,196,.04) !important;
border-color: rgba(95,239,196,.15) !important;
}
[data-theme="universo-menta"] .trans-cta {
color: #05231A !important;
}
/* Fondo de página con halos verdes (reemplaza halos morados del default) */
[data-theme="universo-menta"] body::before {
content: '';
position: fixed;
inset: 0;
z-index: -1;
background:
radial-gradient(130% 95% at 50% -8%, rgba(34,175,134,.18), transparent 56%),
radial-gradient(72% 62% at 12% 8%, rgba(28,84,74,.35), transparent 60%),
radial-gradient(82% 72% at 88% 96%, rgba(16,108,116,.25), transparent 62%),
#07070B;
pointer-events: none;
}