/* ============================================================ zuraghi design system — tokens.css Design tokens: colores, tipografía, espaciado, efectos. Cambia --z-accent para re-tematizar todo el sitio. ============================================================ */ :root { /* -- color: fondos -- */ --z-bg: #0a0b0d; --z-surface: #0e1013; /* -- color: bordes -- */ --z-border: rgba(255, 255, 255, 0.10); --z-border-strong: rgba(255, 255, 255, 0.15); --z-divider: rgba(255, 255, 255, 0.08); /* -- color: texto -- */ --z-text: #e8eaed; --z-text-2: rgba(255, 255, 255, 0.65); --z-text-3: rgba(255, 255, 255, 0.45); /* -- color: acento neón -- */ --z-accent: #ccff00; /* lima (default) */ --z-on-accent: #0a0b0d; --z-glowmix: 35%; /* intensidad del glow: 0%–80% */ --z-glow: color-mix(in srgb, var(--z-accent) var(--z-glowmix), transparent); --z-glow-soft: color-mix(in srgb, var(--z-accent) calc(var(--z-glowmix) / 2), transparent); /* -- tipografía -- */ --z-font-display: 'Orbitron', sans-serif; /* titulares */ --z-font-body: 'Space Grotesk', system-ui, sans-serif; --z-font-mono: 'IBM Plex Mono', monospace; /* labels técnicos */ /* -- escala tipográfica -- */ --z-fs-hero: 56px; --z-fs-h2: 30px; --z-fs-h3: 24px; --z-fs-price: 44px; --z-fs-body-lg: 18px; --z-fs-body: 15px; --z-fs-sm: 14px; --z-fs-mono: 13px; --z-fs-mono-sm: 12px; /* -- espaciado -- */ --z-space-1: 8px; --z-space-2: 12px; --z-space-3: 16px; --z-space-4: 24px; --z-space-5: 36px; --z-space-6: 48px; --z-space-7: 72px; /* -- layout -- */ --z-container: 1360px; --z-page-x: 48px; --z-nav-h: 70px; } /* -- acentos alternativos: -- */ [data-accent="teal"] { --z-accent: #00ffc8; } [data-accent="azul"] { --z-accent: #39a0ff; } [data-accent="violeta"] { --z-accent: #c04bff; }