/* ============================================================ GESTIÓN INTELIGENTE — design tokens Única fuente de verdad de color, tipografía, espacio, radio y easing. Cambiá acá y cambia todo el sitio. Cero valores mágicos en los componentes. TEMA: oscuro por defecto (identidad de marca). El claro es la alternativa. theme-init.js escribe data-theme="dark|light" en antes del render. ============================================================ */ :root{ /* ——— superficie (oscuro) ——— */ --bg:#0B0D14; --surface:#12141E; --surface-2:#1A1D2A; --border:#262A38; --border-strong:#3A4152; --outline:#5A6176; /* borde de controles: ≥3:1 con el fondo */ --text:#F2F3F8; --text-mut:#8C92A8; /* superficies compuestas dependientes del tema */ --grid-line:rgba(255,255,255,.035); /* líneas de la grilla técnica */ --scrim:rgba(0,0,0,.25); /* barras internas del mock (device/navegador) */ --header-bg:rgba(11,13,20,.82); --dock-bg:rgba(11,13,20,.9); --bot-bg:#1E1A3D; --bot-border:#342C5E; --bot-dot:#A98CEA; /* burbuja del asistente */ --glow-op:.7; /* intensidad de las auroras de fondo */ /* ——— acento accionable (oscuro): el verde-lima del logo ——— */ --accent:#B4E63C; --accent-hover:#C9F25C; --accent-dim:#7FA82A; --accent-ink:#0B0D14; --accent-soft:rgba(180,230,60,.10); --wa:#25D366; --warn:#F26B3A; /* ——— degradé de marca (iris). Colores de marca, iguales en ambos temas. ——— */ --iris-1:#3D5AF1; --iris-2:#8B3FE0; --iris-3:#D6318A; --iris-4:#F26B3A; --iris-5:#B4E63C; --iris-6:#2ED9B0; /* degradés usados en la UI — versión para fondo OSCURO */ --gradient-iris:linear-gradient(115deg,#3D5AF1,#8B3FE0,#D6318A,#F26B3A,#B4E63C); --gradient-iris-deep:linear-gradient(135deg,#3D5AF1,#8B3FE0,#D6318A); --gradient-iris-soft:linear-gradient(115deg,rgba(61,90,241,.14),rgba(139,63,224,.12),rgba(214,49,138,.11),rgba(242,107,58,.09),rgba(180,230,60,.12)); --gradient-iris-line:linear-gradient(90deg,#3D5AF1,#8B3FE0,#D6318A,#F26B3A,#B4E63C); /* ——— tipografía / espacio / forma (no dependen del tema) ——— */ --step--2:clamp(.70rem,.68rem + .10vw,.76rem); --step--1:clamp(.82rem,.79rem + .16vw,.92rem); --step-0:clamp(1.00rem,.96rem + .24vw,1.13rem); --step-1:clamp(1.30rem,1.18rem + .60vw,1.70rem); --step-2:clamp(1.85rem,1.45rem + 1.90vw,3.10rem); --step-3:clamp(2.60rem,1.70rem + 4.30vw,5.60rem); --sp-1:.25rem;--sp-2:.5rem;--sp-3:.75rem;--sp-4:1rem;--sp-5:1.25rem; --sp-6:1.5rem;--sp-8:2rem;--sp-10:2.5rem;--sp-12:3rem;--sp-16:4rem;--sp-24:6rem; --r-sm:8px;--r-md:14px;--r-lg:22px;--r-pill:999px; --ease:cubic-bezier(.2,.8,.2,1); --maxw:1180px; } /* ============================================================ TEMA CLARO — solo se redefinen los tokens que cambian. El degradé va con colores oscurecidos: los del iris tal cual (lima, naranja) no contrastan sobre blanco. ============================================================ */ :root[data-theme="light"]{ --bg:#F4F5F9; --surface:#FFFFFF; --surface-2:#EDEEF5; --border:#DEE0EB; --border-strong:#C4C7D6; --outline:#7A8196; --text:#14161F; --text-mut:#565D70; --grid-line:rgba(20,22,31,.05); --scrim:rgba(20,22,31,.05); --header-bg:rgba(244,245,249,.82); --dock-bg:rgba(244,245,249,.92); --bot-bg:#EFE9FB; --bot-border:#D9CCF3; --bot-dot:#7A34D4; --glow-op:.4; --accent:#7A34D4; --accent-hover:#8B44E0; --accent-dim:#5B2AA0; --accent-ink:#FFFFFF; --accent-soft:rgba(122,52,212,.10); --gradient-iris:linear-gradient(115deg,#2C43C4,#6A2EBE,#B51E72,#CB4A1B,#5F7C12); --gradient-iris-deep:linear-gradient(135deg,#2C43C4,#6A2EBE,#B51E72); --gradient-iris-soft:linear-gradient(115deg,rgba(44,67,196,.08),rgba(106,46,190,.07),rgba(181,30,114,.06),rgba(203,74,27,.05),rgba(95,124,18,.06)); --gradient-iris-line:linear-gradient(90deg,#2C43C4,#6A2EBE,#B51E72,#CB4A1B,#5F7C12); }