/* ============================================================ XUPERPARLEY · Design Tokens Identidad: verde menta neón → cyan, sobre dark. Glow = firma. Dos temas: oscuro (por defecto) y claro. El tema se aplica con el atributo data-theme en ; lo escribe js/theme.js antes del primer pintado, así que no hay parpadeo al cargar. ============================================================ */ :root { color-scheme: dark; /* --- Fondos / superficies --- */ --bg: #0a0e0d; /* casi negro verdoso */ --bg-2: #0d1311; --surface: #121a18; --surface-2: #1a2420; --surface-3: #212e29; --line: #26332e; /* bordes */ --line-soft: #1c2723; /* --- Acentos de marca --- */ --green: #3EF2A0; /* verde menta neón (primario) */ --green-deep: #1fc47e; --cyan: #2FD8FF; /* cyan (secundario) */ --grad: linear-gradient(135deg, #3EF2A0, #2FD8FF); --grad-soft: linear-gradient(135deg, rgba(62,242,160,.16), rgba(47,216,255,.10)); --green-soft: rgba(62,242,160,.12); --green-line: rgba(62,242,160,.30); --cyan-soft: rgba(47,216,255,.12); /* Texto que va ENCIMA del gradiente de marca (botones, badges) */ --on-accent: #04231a; /* --- Texto --- */ --txt: #f3faf7; --muted: #8fa39c; --muted-2: #5e6f69; /* --- Estados --- */ --up: #3EF2A0; /* cuota sube */ --down: #ff6b6b; /* cuota baja / live */ --warn: #ffcf5c; /* --- Superficies compuestas --- */ --header-bg: rgba(10,14,13,.72); --header-bg-scroll: rgba(10,14,13,.92); --panel-bg: rgba(13,19,17,.94); --scrim: rgba(4,8,7,.72); /* fondo detrás de los modales */ --code-bg: rgba(0,0,0,.30); --ghost-bg: rgba(255,255,255,.03); --hover-bg: rgba(255,255,255,.05); --selection: rgba(62,242,160,.28); /* --- Glow (firma visual) --- */ --glow-green: 0 0 24px rgba(62,242,160,.35); --glow-cyan: 0 0 24px rgba(47,216,255,.30); --glow-strong: 0 0 40px rgba(62,242,160,.45); /* --- Fondo animado de partículas (lo lee js/main.js) --- */ --canvas-opacity: .5; --net-dot: rgba(62,242,160,.7); --net-line-rgb: 47,216,255; /* --- Radios --- */ --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px; /* --- Sombras --- */ --shadow-md: 0 20px 50px -25px rgba(0,0,0,.7); --shadow-lg: 0 40px 90px -30px rgba(0,0,0,.85); /* --- Tipografía --- */ --font-display: 'Space Grotesk', system-ui, sans-serif; --font-body: 'IBM Plex Sans', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, monospace; /* --- Layout --- */ --maxw: 1200px; --header-h: 72px; } /* ============================================================ TEMA CLARO El verde neón es ilegible sobre blanco, así que la marca usa una versión más profunda que sí cumple contraste AA. ============================================================ */ :root[data-theme="light"] { color-scheme: light; --bg: #ffffff; --bg-2: #f7faf9; --surface: #ffffff; --surface-2: #f3f7f6; --surface-3: #e9f0ee; --line: #dde6e2; --line-soft: #eaf1ee; --green: #0d8f5a; --green-deep: #0a7048; --cyan: #0e7490; --grad: linear-gradient(135deg, #0d8f5a, #0e7490); --grad-soft: linear-gradient(135deg, rgba(13,143,90,.10), rgba(14,116,144,.07)); --green-soft: rgba(13,143,90,.09); --green-line: rgba(13,143,90,.28); --cyan-soft: rgba(14,116,144,.09); --on-accent: #ffffff; --txt: #0c1a14; --muted: #4a5f57; --muted-2: #6f847b; --up: #0d8f5a; --down: #d63b3b; --warn: #b7791f; --header-bg: rgba(255,255,255,.80); --header-bg-scroll: rgba(255,255,255,.95); --panel-bg: rgba(255,255,255,.97); --scrim: rgba(12,26,20,.45); --code-bg: rgba(12,26,20,.07); --ghost-bg: rgba(12,26,20,.025); --hover-bg: rgba(12,26,20,.05); --selection: rgba(13,143,90,.20); /* En claro el glow se reemplaza por sombra sutil: el neón ensucia el blanco */ --glow-green: 0 1px 2px rgba(12,26,20,.07); --glow-cyan: 0 1px 2px rgba(12,26,20,.07); --glow-strong: 0 8px 20px -8px rgba(13,143,90,.45); --canvas-opacity: .3; --net-dot: rgba(13,143,90,.5); --net-line-rgb: 14,116,144; --shadow-md: 0 12px 30px -18px rgba(12,26,20,.25); --shadow-lg: 0 30px 60px -30px rgba(12,26,20,.30); } /* Ajustes puntuales del tema claro que no se resuelven con tokens */ :root[data-theme="light"] .hero-glow-1 { background: radial-gradient(circle, rgba(13,143,90,.16), transparent 68%); } :root[data-theme="light"] .hero-glow-2 { background: radial-gradient(circle, rgba(14,116,144,.14), transparent 68%); } :root[data-theme="light"] .hero-grid { background-image: linear-gradient(rgba(12,26,20,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(12,26,20,.05) 1px, transparent 1px); } :root[data-theme="light"] .page-hero-glow { background: radial-gradient(circle, rgba(13,143,90,.15), rgba(14,116,144,.08) 45%, transparent 70%); } :root[data-theme="light"] .brand-mark { filter: none; } :root[data-theme="light"] .modal-glow, :root[data-theme="light"] .hero-visual-glow { opacity: .35; } :root[data-theme="light"] .info-card, :root[data-theme="light"] .related-card, :root[data-theme="light"] .faq-item, :root[data-theme="light"] .step-list li { border-color: var(--line); }