/* ============================================================ Stablecoin Global Solution — tokens.css FUENTE ÚNICA DE VERDAD del diseño. Ningún otro archivo declara un color, un tamaño de fuente, un radio ni una duración en crudo. ┌────────────────────────────────────────────────────────────┐ │ PARA CAMBIAR LA PALETA COMPLETA, TOCA SOLO LA CAPA 1. │ │ Son 6 valores. Todo lo demás se deriva de ellos y sigue │ │ al cambio solo: transparencias, contornos, hover, foco, │ │ el campo del sistema modular y la superficie violeta. │ └────────────────────────────────────────────────────────────┘ Tres capas, de abajo hacia arriba: CAPA 1 · paleta bruta ....... los hex. Lo único que se edita. CAPA 2 · alias de marca ..... nombres del lenguaje del equipo. CAPA 3 · roles semánticos ... cómo los usa la interfaz. El CSS de las páginas consume CAPA 2 y CAPA 3, nunca CAPA 1. Derivado de los tokens oficiales de OpenCard (design-system/tokens.css) con la paleta oficial de Stablecoin Global Solution (negro + coral). Se copia aquí — no se importa — porque el proyecto debe abrir con doble clic, sin build ni CDN. ============================================================ */ /* ---------- Tipografía: Host Grotesk variable (300–800) ---------- Grotesca neutra. Una sola familia cubre todo el sistema: las cifras se alinean con font-variant-numeric: tabular-nums, no con una mono. Para cambiar de familia: sustituye el archivo, el nombre aquí y --font en la CAPA 3. La escala es relativa y no se toca. */ @font-face { font-family: 'Host Grotesk'; src: url('../assets/fonts/HostGrotesk.woff2') format('woff2-variations'); font-weight: 300 800; font-style: normal; font-display: swap; } :root { /* ══════════════════════════════════════════════════════════ CAPA 1 · LA PALETA — lo único que se edita para recolorear Dos colores y nada más. Stablecoin Global Solution es infraestructura white-label —"tu marca en cada punto de contacto"—: una superficie neutra deja que la marca del cliente ocupe el frente. Un color propio saturado lo impide y contradice el argumento de venta. Con solo dos colores, cada aparición del coral significa algo. ══════════════════════════════════════════════════════════ */ --c-brand: #111111; /* superficie de marca y nodos */ --c-signal: #EF775E; /* coral — LA señal: llegada, avance y contacto (ver CAPA 3) */ --c-signal-dk: #D95F45; /* el anterior, pulsado — sigue siendo plano */ --c-surface: #F2F1EF; /* papel — nunca blanco puro */ --c-ink: #0A0A0A; /* texto */ --c-over: #FFFFFF; /* texto y nodos sobre el color de marca */ /* Mezclas de la paleta. Se recalculan solas al cambiar la CAPA 1. Cambia el porcentaje, nunca el color. */ --c-brand-soft: color-mix(in srgb, var(--c-brand) 55%, var(--c-over)); /* ══════════════════════════════════════════════════════════ CAPA 2 · ALIAS DE MARCA — el vocabulario del equipo Existen para que el CSS se lea en el idioma en que se habla del diseño. Apuntan a la CAPA 1: no pongas hex aquí. ══════════════════════════════════════════════════════════ */ --violeta: var(--c-brand); --mint: var(--c-signal); --mint-press: var(--c-signal-dk); --papel: var(--c-surface); --tinta: var(--c-ink); --blanco: var(--c-over); --violeta-claro: var(--c-brand-soft); /* acento SOBRE violeta — grafismo, nunca texto de lectura */ /* ══════════════════════════════════════════════════════════ CAPA 3 · ROLES SEMÁNTICOS — cómo la interfaz usa el color Tema claro por defecto. Toda transparencia se deriva con color-mix del token de marca: al cambiar la paleta, cambian. ══════════════════════════════════════════════════════════ */ --bg: var(--c-surface); --fg: var(--c-ink); --fg-soft: color-mix(in srgb, var(--c-ink) 72%, var(--c-surface)); /* #4B4B4A — 7.74:1 sobre papel */ --acento: var(--c-brand); /* ---------- LA SEÑAL · los tres papeles del coral ---------- El coral dejó de ser «uno por pieza». Tiene tres papeles y solo tres —LLEGADA, AVANCE y CONTACTO— y cada papel tiene su token. Lo que no llega, no mide ni responde, no lleva coral. La restricción manda sobre el papel: coral sobre papel es 2,49:1. Por eso --senal es RELLENO, TRAZO o SUPERFICIE, nunca texto, y --senal-texto existe aparte: vale TINTA en claro y CORAL en negro. Un componente que consuma --senal-texto sale legible en las dos superficies sin tener que saber en cuál está. El foco funciona igual: coral solo donde alcanza el 3:1 que exige AA. */ --senal: var(--c-signal); /* llegada y avance: relleno, trazo, superficie */ --senal-press: var(--c-signal-dk); /* la señal, pulsada */ --senal-sobre: var(--c-ink); /* lo que va ENCIMA del coral — 7,04:1 AAA */ --senal-texto: var(--c-ink); /* en claro el coral no es texto: va tinta */ --senal-pista: color-mix(in srgb, var(--c-signal) 20%, transparent); /* lo que aún no ha pasado */ --senal-velo: color-mix(in srgb, var(--c-signal) 13%, transparent); /* superficie de contacto */ --slot: color-mix(in srgb, var(--c-brand) 7%, transparent); /* casilla vacía del campo */ --trazo: var(--c-brand); /* conectores */ --linea: color-mix(in srgb, var(--c-brand) 22%, transparent); /* contorno de nodo ghost */ --lavado: color-mix(in srgb, var(--c-brand) 7%, transparent); /* hover discreto */ --pista: color-mix(in srgb, var(--c-brand) 14%, transparent); /* canal de la barra de progreso */ --node-cap-bg: var(--c-brand); --node-cap-fg: var(--c-over); --node-unit: var(--c-brand); --node-ghost-fg: var(--c-brand); --node-ghost-ln: color-mix(in srgb, var(--c-brand) 35%, transparent); --focus: var(--c-brand); /* ============ MÉTRICA DEL SISTEMA MODULAR ============ Todo el ensamblado (campo, nodos, conectores) sale de --cell. 12 columnas en escritorio, 6 en móvil. */ /* El tope es 88 y no 92 a propósito: con 12 columnas y el gap al 14 %, 92 px daría 1245 px y el contenedor mide 1200. El `max-width` lo comprimiría, pero solo las columnas —no las filas ni el gap—, la celda dejaría de ser cuadrada y los conectores del SVG caerían desalineados respecto a los nodos. */ --cell: clamp(46px, 6.5vw, 88px); --gap: calc(var(--cell) * 0.14); --pitch: calc(var(--cell) + var(--gap)); --r-node: 4px; --r-unit: 2px; --r-card: 24px; /* ============ ESCALA TIPOGRÁFICA ============ */ --font: 'Host Grotesk', 'Helvetica Neue', Arial, system-ui, sans-serif; --t-hero: clamp(2.2rem, 7.6vw, 6.6rem); --t-1: clamp(2rem, 4.8vw, 4.1rem); --t-2: clamp(1.45rem, 2.9vw, 2.35rem); --t-3: clamp(1.15rem, 1.7vw, 1.5rem); --t-body: clamp(1rem, 0.95vw, 1.125rem); --t-lead: clamp(1.0625rem, 1.35vw, 1.375rem); --t-small: clamp(0.8125rem, 0.9vw, 0.9375rem); --w-light: 300; --w-book: 400; --w-medium: 500; --w-semi: 600; --w-bold: 700; --w-black: 800; --lh-tight: 0.98; --lh-snug: 1.14; --lh-body: 1.6; --tr-tight: -0.035em; --tr-wide: 0.055em; /* ============ RITMO ============ */ /* El alto de la cabecera. La portada mide la pantalla menos esto y los anclajes se apartan por esto: un solo número, para que no puedan desincronizarse nunca. */ --barra: 76px; --pad: clamp(1.25rem, 5vw, 5rem); --maxw: 1360px; --section-py: clamp(4rem, 8vw, 8.5rem); --stack-1: clamp(0.75rem, 1vw, 1rem); --stack-2: clamp(1.25rem, 2vw, 2rem); --stack-3: clamp(2rem, 4vw, 3.5rem); --stack-4: clamp(3rem, 6vw, 5.5rem); /* ============ MOVIMIENTO ============ */ --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --dur-press: 140ms; --dur-ui: 220ms; --dur-assemble: 700ms; } /* ---------- Superficie de marca: mismo sistema, otros roles ---------- Se aplica con class="on-violeta". No redefine la paleta: solo reasigna los roles de la CAPA 3, así que también sigue al cambio. -------------------------------------------------------------- */ .on-violeta { --bg: var(--c-brand); --fg: var(--c-over); --fg-soft: color-mix(in srgb, var(--c-over) 72%, transparent); /* #BCBCBC — 9.94:1 sobre negro */ --acento: var(--c-over); --slot: color-mix(in srgb, var(--c-over) 11%, transparent); --trazo: color-mix(in srgb, var(--c-over) 85%, transparent); --linea: color-mix(in srgb, var(--c-over) 28%, transparent); --lavado: color-mix(in srgb, var(--c-over) 10%, transparent); --pista: color-mix(in srgb, var(--c-over) 22%, transparent); --node-cap-bg: var(--c-surface); --node-cap-fg: var(--c-brand); --node-unit: var(--c-surface); --node-ghost-fg: var(--c-over); --node-ghost-ln: color-mix(in srgb, var(--c-over) 45%, transparent); /* Sobre negro el coral SÍ es texto (6,72:1) y SÍ es anillo de foco (supera con holgura el 3:1 de AA para indicadores). Por eso el contacto —foco, hover, lo que has elegido— se ve en coral aquí y en tinta sobre papel: no es una excepción, es la restricción aplicada. El velo sube al 20 % porque sobre negro rinde menos. */ --senal-texto: var(--c-signal); --senal-velo: color-mix(in srgb, var(--c-signal) 20%, transparent); --senal-pista: color-mix(in srgb, var(--c-signal) 26%, transparent); --focus: var(--c-signal); } /* ---------- Métrica móvil: el campo pasa a 6 columnas ---------- */ @media (max-width: 859px) { :root { --cell: min(calc((100vw - 2.5rem) / 6.7), 84px); } }