/* ============================================================ FlouCards — 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 Intaglio de FlouCards. 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 ══════════════════════════════════════════════════════════ */ --c-brand: #0E4A3C; /* verde de grabado — el color de todo el sistema */ --c-signal: #E3B23C; /* oro de sello — significado único: FlouCards y el CTA */ --c-signal-dk: #C9992B; /* el anterior, pulsado — sigue siendo plano */ --c-surface: #EDE9E0; /* papel de seguridad — nunca blanco puro */ --c-ink: #1A1A17; /* 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) 73%, var(--c-surface)); /* 6.1:1 sobre papel */ --acento: var(--c-brand); --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. */ --cell: clamp(46px, 6.5vw, 92px); --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 ============ */ --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); /* 5.1:1 sobre violeta */ --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); --focus: var(--c-over); } /* ---------- Métrica móvil: el campo pasa a 6 columnas ---------- */ @media (max-width: 859px) { :root { --cell: min(calc((100vw - 2.5rem) / 6.7), 84px); } }