/* ========================================================================== Vivid Design Tokens — CORE CSS custom properties + body reset. No component classes here. Shared across vividwalls, vividhome, vividprint. Source of truth: dev.vividwalls.eu (April 2026) ========================================================================== */ :root { /* Brand palette */ --vivid-blue: #2563eb; --vivid-purple: #7c3aed; --vivid-purple-2: #6d28d9; --vivid-orange: #f97316; --vivid-pink: #f43f5e; --vivid-cyan: #06b6d4; --vivid-yellow: #facc15; /* Neutrals */ --vivid-ink: #0b132b; --vivid-dark: #0f172a; --vivid-text: #1e293b; --vivid-muted: #64748b; --vivid-bg: #ffffff; --vivid-bg-soft: #f8fafc; --vivid-bg-tint: #f8fbff; /* Signature gradients */ --vivid-gradient-text: linear-gradient(90deg, #2563eb 0%, #7c3aed 35%, #f43f5e 68%, #fb923c 100%); --vivid-gradient-cta: linear-gradient(90deg, #f97316, #f43f5e); --vivid-gradient-main: linear-gradient(135deg, #1e3a8a 0%, #2563eb 15%, #06b6d4 30%, #9333ea 50%, #f43f5e 70%, #fb923c 85%, #facc15 100%); --vivid-gradient-card: linear-gradient(180deg, rgba(255,255,255,0.76), rgba(255,255,255,0.56)); --vivid-gradient-conic: conic-gradient(from 0deg, #2563eb, #7c3aed, #f43f5e, #fb923c, #facc15, #2563eb); /* Page background (multi-layer radial glow + vertical gradient) */ --vivid-page-bg: radial-gradient(circle at 15% 10%, rgba(37, 99, 235, 0.08), transparent 55%), radial-gradient(circle at 85% 10%, rgba(249, 115, 22, 0.10), transparent 55%), radial-gradient(circle at 50% 35%, rgba(244, 63, 94, 0.05), transparent 60%), linear-gradient(180deg, #ffffff 0%, #f8fbff 45%, #f8fafc 100%); /* Typography */ --vivid-font-body: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif; --vivid-font-display: "Geologica", "Onest", system-ui, sans-serif; --vivid-fs-body: 1.02rem; --vivid-lh-body: 1.78; /* Shape */ --vivid-radius-sm: 10px; --vivid-radius-md: 14px; --vivid-radius-lg: 16px; --vivid-radius-xl: 22px; --vivid-radius-2xl: 24px; --vivid-container: 1240px; /* Shadows */ --vivid-shadow-soft: 0 20px 60px rgba(15, 23, 42, 0.08); --vivid-shadow-scrolled: 0 8px 40px rgba(15, 23, 42, 0.12); --vivid-shadow-primary: 0 16px 44px rgba(249, 115, 22, 0.25); --vivid-shadow-primary-hover: 0 22px 56px rgba(249, 115, 22, 0.38); --vivid-shadow-secondary: 0 16px 44px rgba(37, 99, 235, 0.22); --vivid-shadow-secondary-hover: 0 18px 50px rgba(124, 58, 237, 0.36); /* Motion */ --vivid-ease: cubic-bezier(0.4, 0, 0.2, 1); --vivid-dur-fast: 0.25s; --vivid-dur-med: 0.28s; --vivid-dur-slow: 0.4s; } /* Body reset — opt-in via */ body.vivid { margin: 0; font-family: var(--vivid-font-body); font-size: var(--vivid-fs-body); line-height: var(--vivid-lh-body); color: var(--vivid-text); background: var(--vivid-page-bg); background-attachment: fixed; -webkit-font-smoothing: antialiased; } .vivid-container { max-width: var(--vivid-container); margin: 0 auto; padding: 0 16px; }