/* GENERADO por build.py desde src/tokens.css. No editar a mano: el próximo build lo pisa. El sistema vive en 00 Brand/Sistema de Diseño/ */ /* ═══════════════════════════════════════════════════════════════════════ SCALEWAVE · TOKENS Este es el único archivo que hay que enlazar. Todo lo demás se construye encima. Los nombres son los que ya usa scalewaveco.com en producción. No se renombraron a propósito: la página en vivo es la fuente de verdad de este sistema, así que el sistema habla su idioma y no al revés. Cualquier superficie nueva que use estos nombres queda alineada con la página el día uno, sin capa de traducción. Regla única y no negociable: nunca escribas un hex en un componente. Usa el token semántico y los dos temas te salen gratis. ATENCIÓN: este archivo es la copia desplegada de 00 Brand/Sistema de Diseño/tokens.css y tiene que ser IDÉNTICO a él. build.py lo inyecta en la landing y lo escribe en assets/sw-tokens.css, que enlazan privacidad, términos y onboarding. Si lo cambias aquí, cópialo allá y corre _verify.py. Ya pasó una vez que se separaron y el botón primario del onboarding se quedó sin fondo, porque --grad-action existía en un archivo y no en el otro. ═══════════════════════════════════════════════════════════════════════ */ /* ── Fuentes ───────────────────────────────────────────────────────────── Seis archivos, servidos por nosotros. Sin Google Fonts, sin CDN: una dependencia menos y una petición externa menos que puede caerse o ralentizar el primer pintado. Las dos familias son SIL OFL. Ajusta la ruta si tu proyecto no sirve /fonts desde la raíz. */ @font-face{font-family:'Plus Jakarta Sans';src:url('/fonts/PlusJakartaSans-Regular.woff2') format('woff2');font-weight:400;font-display:swap} @font-face{font-family:'Plus Jakarta Sans';src:url('/fonts/PlusJakartaSans-Bold.woff2') format('woff2');font-weight:700;font-display:swap} @font-face{font-family:'Plus Jakarta Sans';src:url('/fonts/PlusJakartaSans-ExtraBold.woff2') format('woff2');font-weight:800;font-display:swap} @font-face{font-family:'IBM Plex Mono';src:url('/fonts/IBMPlexMono-Regular.woff2') format('woff2');font-weight:400;font-display:swap} @font-face{font-family:'IBM Plex Mono';src:url('/fonts/IBMPlexMono-Medium.woff2') format('woff2');font-weight:500;font-display:swap} @font-face{font-family:'IBM Plex Mono';src:url('/fonts/IBMPlexMono-SemiBold.woff2') format('woff2');font-weight:600;font-display:swap} :root{ /* ═══ 1 · PALETA CRUDA ══════════════════════════════════════════════════ Estos son los pigmentos. En un componente casi nunca se usan directo: se usan los roles de la sección 2. Se tocan solo para definir un rol nuevo. */ /* Azul. Es el único color de marca. No hay un segundo. */ --blue:#3E69E0; /* la acción */ --blue-hover:#4A73E8; /* más claro al pasar el mouse, nunca más oscuro */ --blue-press:#3357C4; /* al presionar, y el azul de texto en tema claro */ --blue-light:#8AAAFF; /* azul de texto en tema oscuro · inicio del degradado */ /* Papel. El tema claro. Cálido, nunca blanco puro salvo la tarjeta. */ --paper-50:#ffffff; --paper-100:#F7F5F1; --paper-200:#F2EDE6; --paper-250:#EDE9E1; --paper-300:#e4e0d8; /* Tinta. El tema oscuro. Casi negro pero cálido, nunca azulado. */ --ink-950:#0C0A09; --ink-900:#100E0C; --ink-850:#16130F; --ink-800:#1c1815; --ink-750:#221f1b; --ink-700:#2a2622; /* Hueso. La rampa de texto sobre tinta. */ --bone-100:#F2EDE6; --bone-300:#d8d2c7; --bone-500:#A49C90; --bone-600:#8D867B; /* ═══ 2 · ROLES · TEMA CLARO (el de por defecto) ════════════════════════ El tema claro es el default y vive en :root. El oscuro se pide con data-theme="dark" en cualquier elemento y todo lo que cuelga debajo se da vuelta. Ningún componente recibe el tema por parámetro. */ --page:var(--paper-100); --alt:var(--paper-200); --card:var(--paper-50); --heading:#16181A; /* Entre titular y cuerpo. Para subtítulos, texto en negrita dentro de un párrafo y bajadas de documento largo, donde --heading pesa demasiado y --body se pierde. Lo pidió la migración de las páginas legales. */ --heading-soft:#33373B; --body:#55504A; --mute:#6E695F; --line:var(--paper-300); --divider:var(--paper-250); --accent-text:var(--blue-press); /* azul legible sobre papel: 5.74:1 */ --tint:rgb(62 105 224 / .07); /* relleno azul bajísimo */ --page-blur:rgb(247 245 241 / .82); /* Roles de interfaz de producto. Los pidió la migración del onboarding: --elevated una superficie por encima de la tarjeta; --disabled control apagado (exento de AA por inerte, pero igualado entre temas: 2,70 en claro contra 2,65 en oscuro); --on-action el texto encima del azul; --ring el halo de foco. */ --elevated:var(--paper-50); --disabled:#9C968C; --on-action:#fff; --ring:0 0 0 3px rgb(62 105 224 / .34); /* Semánticos. En claro van más profundos que en oscuro a propósito: los tonos vivos son demasiado pálidos sobre papel y no pasan AA. */ --success:#287553; --warning:#8A5F10; --danger:#B83232; --danger-line:#D64545; /* la versión para filetes y bordes, no texto */ /* ═══ 3 · SOMBRA ════════════════════════════════════════════════════════ En claro la sombra hace el trabajo. En oscuro la sombra se lee como barro, así que ahí el trabajo lo hace el escalón de superficie (900 → 850 → 800) y la tarjeta en reposo no lleva sombra ninguna. Por eso --shadow-card se redefine abajo en vez de bifurcar en cada uso. */ --shadow-card:0 1px 2px rgb(22 24 26 / .05), 0 1px 3px rgb(22 24 26 / .05); --shadow-lift:0 6px 20px rgb(22 24 26 / .10), 0 1px 3px rgb(22 24 26 / .06); --shadow-deep:0 28px 70px rgb(22 24 26 / .20), 0 2px 8px rgb(22 24 26 / .08); /* ═══ 4 · DEGRADADOS ════════════════════════════════════════════════════ Siempre azul sobre azul, y siempre en un fondo o en un filete. Nunca sobre texto, nunca como relleno de una tarjeta de contenido. Es lo que separa "profundidad" de "adorno". Sobre --grad-action: va de --blue a --blue-press, es decir se OSCURECE hacia abajo. La versión anterior iba de --blue-hover a --blue y su tramo claro dejaba el texto blanco en 4,40:1, bajo el 4,5 que pide AA a 15px. De aquí sale una regla que parece contradecir a "el hover aclara": el botón primario NO aclara su relleno al pasar el mouse, porque aclararlo rompe el contraste con su propia etiqueta. Intensifica su sombra azul. El aclarado sigue valiendo para el secundario y el fantasma, que llevan texto oscuro. */ --glow-a:rgb(62 105 224 / .16); /* centro de la luz del hero */ --glow-b:rgb(138 170 255 / .10); /* su caída */ --rule:linear-gradient(90deg,transparent,rgb(62 105 224 / .34) 22%,rgb(62 105 224 / .34) 78%,transparent); --grad-action:linear-gradient(180deg,var(--blue),var(--blue-press)); /* botón primario */ --grad-line:linear-gradient(90deg,var(--blue-light),var(--blue)); /* líneas que se dibujan */ --grad-mark:linear-gradient(180deg,#8AAAFF 0%,#3D66F0 100%); /* SOLO el isotipo */ /* ═══ 5 · FORMA ═════════════════════════════════════════════════════════ 24px es el radio de la marca: toda tarjeta y todo botón. Lo de abajo es para lo que vive dentro de una tarjeta. */ --r-card:24px; --r-lg:16px; /* paneles anidados dentro de una tarjeta */ --r-md:12px; /* inputs, selects, cajas pequeñas */ --r-sm:8px; /* filas, chips, celdas */ --r-pill:9999px; /* ═══ 6 · TIPOGRAFÍA ════════════════════════════════════════════════════ Dos familias y una sola regla para elegir: si se lee como idioma va en Jakarta; si se lee como dato va en Mono. Etiquetas, marcas de tiempo, cifras, fuentes de estudios, cabeceras de tabla: Mono. */ --font-d:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif; --font-m:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace; /* La escala de display es fluida: nunca desborda y nunca hay que escribir una media query para el titular. El interletrado se cierra a medida que el tamaño sube, que es lo que hace que se vea dibujado y no estirado. */ --t-hero:clamp(40px,6.2vw,86px); /* h1 · 800 · alto .97 · track -.037em */ --t-band:clamp(30px,4.2vw,54px); /* h2 de banda oscura · 800 · 1.04 · -.03em */ --t-sec:clamp(30px,3.9vw,50px); /* h2 de sección · 800 · 1.08 · -.024em */ --t-sub:clamp(20px,2.1vw,27px); /* h3 grande · 800 · 1.22 · -.022em */ --t-fig:clamp(30px,3.4vw,42px); /* la cifra · 800 · 1 · -.04em · tabular */ --t-card:20px; /* h3 de tarjeta · 700 · 1.3 · -.02em */ --t-lead:18px; /* bajada · 400 · 1.6 */ --t-body:16px; /* base · 400 · 1.55 */ --t-prose:16.5px; /* párrafo largo · 400 · 1.62 */ --t-small:15px; /* texto en tarjeta · 400 · 1.55 */ --t-cap:13.5px; /* pie · 400 · 1.5 */ /* ═══ 7 · ESPACIO ═══════════════════════════════════════════════════════ */ /* Escala de espacio, base 4px. La landing no la necesitaba porque su ritmo se resuelve con --gutter y --section, pero un documento o una interfaz de producto sí: tarjetas, filas, tablas y formularios necesitan pasos chicos. La pidió la migración de la hoja de precios. */ --space-xxs:2px; --space-xs:4px; --space-sm:8px; --space-md:12px; --space-lg:16px; --space-xl:24px; --space-2xl:32px; --space-3xl:48px; --space-4xl:64px; --space-5xl:96px; --space-6xl:128px; --gutter:clamp(20px,4vw,56px); /* margen lateral de la página */ --section:clamp(64px,8vw,120px); /* aire vertical entre secciones */ --shell:1320px; /* el contenedor */ --measure:46rem; /* ancho máximo de un bloque de lectura */ --pad-card:24px; /* ═══ 8 · MOVIMIENTO ════════════════════════════════════════════════════ Nada rebota. Nada entra con escala. La única entrada es opacidad más un desplazamiento corto hacia arriba. La entrada es lenta a propósito (1.15s): a velocidad de UI se lee como un parpadeo, a esta velocidad se lee como algo que llega. */ --ease:cubic-bezier(.23,1,.32,1); /* la general */ --ease-soft:cubic-bezier(.2,.7,.2,1); /* entradas y cosas largas */ --ease-draw:cubic-bezier(.16,.84,.3,1); /* líneas que se dibujan solas */ --d-press:.16s; --d-color:.22s; --d-surface:.45s; --d-slow:.7s; --d-reveal:1.15s; } /* ═══ TEMA OSCURO ═══════════════════════════════════════════════════════ Solo se redefinen los roles. La paleta cruda no cambia, la escala tipográfica no cambia, el azul de acción no cambia. */ [data-theme="dark"]{ --page:var(--ink-900); --alt:var(--ink-950); --card:var(--ink-850); --heading:var(--bone-100); --heading-soft:var(--bone-300); --body:var(--bone-500); --mute:var(--bone-600); --line:var(--ink-700); --divider:var(--ink-750); --accent-text:var(--blue-light); --tint:rgb(62 105 224 / .14); --page-blur:rgb(16 14 12 / .84); --elevated:var(--ink-800); --disabled:#5c564d; --success:#4FB286; --warning:#E0A93E; --danger:#F27272; --danger-line:#F27272; --shadow-card:none; --shadow-lift:0 6px 20px rgb(0 0 0 / .5); --shadow-deep:0 28px 70px rgb(0 0 0 / .6); --glow-a:rgb(62 105 224 / .26); --glow-b:rgb(138 170 255 / .14); --rule:linear-gradient(90deg,transparent,rgb(138 170 255 / .34) 22%,rgb(138 170 255 / .34) 78%,transparent); } /* Isla clara dentro de un contexto oscuro. Se usa poco, pero existe para cosas como un informe imprimible dentro del panel. */ [data-theme="light"]{ --page:var(--paper-100); --alt:var(--paper-200); --card:var(--paper-50); --heading:#16181A; --heading-soft:#33373B; --body:#55504A; --mute:#6E695F; --line:var(--paper-300); --divider:var(--paper-250); --accent-text:var(--blue-press); --tint:rgb(62 105 224 / .07); --success:#287553; --warning:#8A5F10; --danger:#B83232; --danger-line:#D64545; --shadow-card:0 1px 2px rgb(22 24 26 / .05), 0 1px 3px rgb(22 24 26 / .05); } /* ═══ IMPRESIÓN ═════════════════════════════════════════════════════════ El papel siempre es claro. Sin esto, cualquier página en tema oscuro sale de la impresora como un rectángulo negro que se come el tóner y no se lee. Al vivir aquí, vale para toda superficie de la marca sin que nadie lo escriba dos veces. La página se vuelve blanco puro, no papel cálido: el papel ya es el papel. */ @media print{ :root,[data-theme="dark"],[data-theme="light"]{ --page:#fff; --alt:var(--paper-100); --card:#fff; --elevated:#fff; --heading:#16181A; --heading-soft:#33373B; --body:#55504A; --mute:#6E695F; --line:var(--paper-300); --divider:var(--paper-250); --accent-text:var(--blue-press); --tint:rgb(62 105 224 / .07); --success:#287553; --warning:#8A5F10; --danger:#B83232; --danger-line:#B83232; --shadow-card:none; --shadow-lift:none; --shadow-deep:none; --glow-a:transparent; --glow-b:transparent; } }