/* ============================================================================ Salesbumm · Certificación Ejecutiva — SISTEMA DE DISEÑO ---------------------------------------------------------------------------- Este archivo es la ÚNICA fuente de verdad de color, tipografía, espacio, radio, sombra y movimiento. Ningún otro archivo debe declarar un valor literal de estos ejes: todos consumen tokens desde aquí. Los tokens de color se nombran por PAPEL (--color-texto-debil), nunca por aspecto (--gris-claro). Así, el día que llegue la guía de marca definitiva del cliente se sustituyen los valores de este archivo y ninguna pantalla necesita tocarse. TEMAS ----- El tema oscuro es la identidad de la landing y es el predeterminado. El tema claro está implementado y verificado, y se activa poniendo data-tema="claro" en el elemento . No se activa solo por preferencia del sistema operativo: la dirección de arte de una página de venta no debería cambiar de identidad según el ajuste del equipo de quien la visita. ========================================================================= */ :root { /* ------------------------------------------------------------------ 1. PALETA CRUDA — valores de marca. No usar directamente en las hojas de componentes; existen solo para alimentar los tokens de papel que vienen más abajo. ------------------------------------------------------------------ */ --marca-negro: #0a0a09; --marca-crema: #f9f7f2; --marca-noche: #222254; --marca-violeta: #4a40a8; --marca-indigo: #3b40e4; /* acento primario */ --marca-indigo-claro:#797cec; --marca-indigo-hondo:#1a1d5e; --marca-lima: #c8fb63; /* acento secundario */ --marca-lima-honda: #3d5a11; /* Neutros con una pizca de índigo: un gris puro se lee como no decidido. */ --neutro-950: #05070c; --neutro-900: #070a12; --neutro-850: #0a0f1a; --neutro-800: #111726; --neutro-700: #1c2436; --neutro-600: #3a465c; --neutro-500: #6d7c90; --neutro-400: #8d9aab; --neutro-300: #b7c2d1; --neutro-200: #d7dfe9; --neutro-100: #eef3f9; --neutro-000: #ffffff; /* ------------------------------------------------------------------ 2. TIPOGRAFÍA ------------------------------------------------------------------ */ --fuente-titulo: 'Public Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --fuente-texto: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --fuente-dato: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* Escala derivada de una razón constante de 1.25 anclada en 17px. No existen valores intermedios a propósito: dos tamaños que se parecen se leen como un error, no como jerarquía. */ --txt-100: 0.6875rem; /* 11px — etiquetas monoespaciadas */ --txt-200: 0.875rem; /* 14px — metadatos, pies */ --txt-300: 1.0625rem; /* 17px — cuerpo */ --txt-400: 1.3125rem; /* 21px — entradilla, subtítulo */ --txt-500: clamp(1.3125rem, 1.06rem + 1.05vw, 1.6875rem); /* 21 → 27 */ --txt-600: clamp(1.6875rem, 1.27rem + 1.75vw, 2.0625rem); /* 27 → 33 */ --txt-700: clamp(2.0625rem, 1.46rem + 2.55vw, 2.625rem); /* 33 → 42 */ --txt-800: clamp(2.375rem, 1.52rem + 3.6vw, 3.25rem); /* 38 → 52 */ /* Interlineado según el papel: apretado en títulos, holgado en lectura. */ --alto-titulo: 1.08; --alto-subtitulo: 1.22; --alto-texto: 1.62; --alto-compacto: 1.4; --espaciado-letra-titulo: -0.018em; --espaciado-letra-dato: 0.12em; --peso-normal: 400; --peso-medio: 500; --peso-semi: 600; --peso-fuerte: 700; --peso-negro: 800; /* Longitud de línea de lectura: 65–75 caracteres. */ --medida-lectura: 68ch; --medida-corta: 52ch; /* ------------------------------------------------------------------ 3. ESPACIO — múltiplos de 4. Un margen de 13px no existe. ------------------------------------------------------------------ */ --esp-1: 0.25rem; /* 4 */ --esp-2: 0.5rem; /* 8 */ --esp-3: 0.75rem; /* 12 */ --esp-4: 1rem; /* 16 */ --esp-5: 1.25rem; /* 20 */ --esp-6: 1.5rem; /* 24 */ --esp-8: 2rem; /* 32 */ --esp-10: 2.5rem; /* 40 */ --esp-12: 3rem; /* 48 */ --esp-16: 4rem; /* 64 */ --esp-20: 5rem; /* 80 */ --esp-24: 6rem; /* 96 */ /* Ritmo de página */ --ancho-max: 75rem; /* 1200 */ --ancho-estrecho:46rem; /* 736 */ --gutter: clamp(1.25rem, 4vw, 4rem); --ritmo-seccion: clamp(3.5rem, 8vw, 7.5rem); --alto-barra: 4.5rem; /* ------------------------------------------------------------------ 4. RADIO Y TRAZO ------------------------------------------------------------------ */ --radio-xs: 0.375rem; /* 6 */ --radio-sm: 0.625rem; /* 10 */ --radio-md: 0.875rem; /* 14 */ --radio-lg: 1.25rem; /* 20 */ --radio-xl: 1.75rem; /* 28 */ --radio-pildora: 62.4375rem; --trazo: 1px; /* ------------------------------------------------------------------ 5. MOVIMIENTO ------------------------------------------------------------------ */ --curva: cubic-bezier(0.16, 0.84, 0.44, 1); --curva-suave:cubic-bezier(0.4, 0, 0.2, 1); --dur-rapida: 140ms; --dur-media: 260ms; --dur-lenta: 480ms; /* ------------------------------------------------------------------ 7. SOBRE MEDIOS — una fotografía no cambia con el tema, así que el velo y el texto que van encima tampoco. Con los tokens de tema, en claro el velo era crema y borraba la cara del ponente. ------------------------------------------------------------------ */ --color-velo-medio: rgba(6, 8, 14, 0.62); --color-velo-medio-fuerte: rgba(6, 8, 14, 0.80); --color-texto-sobre-medio: #f2f6fb; --color-medio-sobre-medio: #c2ccda; /* ------------------------------------------------------------------ 6. PLANOS — a mayor número, más cerca de quien mira. ------------------------------------------------------------------ */ --plano-fondo: 0; --plano-contenido:1; --plano-barra: 50; --plano-anclada: 60; --plano-menu: 70; --plano-capa: 80; } /* ============================================================================ TEMA OSCURO — predeterminado, es la identidad de la landing. ========================================================================= */ :root, :root[data-tema="oscuro"] { color-scheme: dark; /* Superficies */ --color-lienzo: var(--neutro-950); --color-lienzo-alt: var(--neutro-900); --color-superficie: rgba(255, 255, 255, 0.035); --color-superficie-alta:rgba(255, 255, 255, 0.062); --color-superficie-solida:#0d131f; --color-velo: rgba(3, 5, 9, 0.82); /* Trazos */ --color-borde: rgba(255, 255, 255, 0.10); --color-borde-fuerte: rgba(255, 255, 255, 0.18); --color-regla: rgba(255, 255, 255, 0.075); /* Texto */ --color-texto: var(--neutro-300); --color-texto-fuerte: var(--neutro-100); --color-texto-debil: #8998ab; --color-texto-dato: #98a6b9; /* Acentos */ --color-acento: var(--marca-indigo); --color-acento-claro: var(--marca-indigo-claro); --color-acento-tenue: rgba(59, 64, 228, 0.20); --color-acento-borde: rgba(59, 64, 228, 0.45); --color-texto-sobre-acento:var(--neutro-100); --color-acento-2: var(--marca-lima); --color-acento-2-tenue: rgba(200, 251, 99, 0.16); --color-acento-2-borde: rgba(200, 251, 99, 0.40); --color-texto-sobre-acento-2:var(--marca-negro); /* Sobre fondo oscuro el lima funciona como texto; sobre fondo claro no. */ --color-acento-2-texto: var(--marca-lima); /* Semánticos — deliberadamente fuera de la gama de los dos acentos. El acento secundario es lima, así que el verde ya no puede significar «correcto»: el éxito se expresa en verde azulado. */ --color-exito: #2ed3a0; --color-exito-tenue: rgba(46, 211, 160, 0.14); --color-aviso: #f5a524; --color-aviso-tenue: rgba(245, 165, 36, 0.14); --color-peligro: #ff6b70; --color-peligro-tenue:rgba(255, 107, 112, 0.14); --color-info: #5cc8f5; --color-info-tenue: rgba(92, 200, 245, 0.14); /* Foco — debe contrastar con el lienzo Y con los acentos. */ --color-foco: #9aa4ff; /* Sombras */ --sombra-sm: 0 1px 2px rgba(0, 0, 0, 0.45); --sombra-md: 0 8px 24px -8px rgba(0, 0, 0, 0.7); --sombra-lg: 0 24px 64px -16px rgba(0, 0, 0, 0.8); --sombra-acento: 0 12px 40px -12px rgba(59, 64, 228, 0.55); /* Atmósfera del fondo */ --halo-1: rgba(59, 64, 228, 0.24); --halo-2: rgba(200, 251, 99, 0.16); --rejilla: rgba(255, 255, 255, 0.028); } /* ============================================================================ TEMA CLARO — activar con . Mantiene la identidad (crema de marca, índigo, lima) y respeta los mismos mínimos de contraste. El lima NO se usa como texto aquí: sobre crema da 1.3:1. En tema claro el lima solo actúa como fondo con texto negro encima. ========================================================================= */ :root[data-tema="claro"] { color-scheme: light; --color-lienzo: var(--marca-crema); --color-lienzo-alt: #ffffff; --color-superficie: rgba(34, 34, 84, 0.035); --color-superficie-alta:rgba(34, 34, 84, 0.065); --color-superficie-solida:#ffffff; --color-velo: rgba(249, 247, 242, 0.88); --color-borde: rgba(34, 34, 84, 0.14); --color-borde-fuerte: rgba(34, 34, 84, 0.26); --color-regla: rgba(34, 34, 84, 0.10); --color-texto: #3c4256; --color-texto-fuerte: var(--marca-negro); --color-texto-debil: #5c6478; --color-texto-dato: #555c70; --color-acento: var(--marca-violeta); --color-acento-claro: var(--marca-noche); --color-acento-tenue: rgba(74, 64, 168, 0.10); --color-acento-borde: rgba(74, 64, 168, 0.32); --color-texto-sobre-acento:#ffffff; --color-acento-2: var(--marca-lima); --color-acento-2-tenue: rgba(122, 168, 42, 0.16); --color-acento-2-borde: rgba(122, 168, 42, 0.45); --color-texto-sobre-acento-2:var(--marca-negro); --color-acento-2-texto: #3d5a11; --color-exito: #0a6b4f; --color-exito-tenue: rgba(15, 143, 107, 0.12); --color-aviso: #9a6100; --color-aviso-tenue: rgba(154, 97, 0, 0.12); --color-peligro: #c22a33; --color-peligro-tenue:rgba(194, 42, 51, 0.10); --color-info: #0a6a93; --color-info-tenue: rgba(10, 106, 147, 0.12); --color-foco: #2a2170; --sombra-sm: 0 1px 2px rgba(34, 34, 84, 0.10); --sombra-md: 0 8px 24px -10px rgba(34, 34, 84, 0.20); --sombra-lg: 0 24px 64px -18px rgba(34, 34, 84, 0.26); --sombra-acento: 0 12px 40px -14px rgba(74, 64, 168, 0.40); --halo-1: rgba(74, 64, 168, 0.10); --halo-2: rgba(200, 251, 99, 0.28); --rejilla: rgba(34, 34, 84, 0.04); }