/* ===================================================================== Jviens — design tokens + layout primitives. All selectors are scoped under .jviens-*. Do not target WooCommerce native classes from here. ================================================================== */ :root { --jv-purple-900: #3B1670; --jv-purple-700: #5A24A8; --jv-purple-500: #6B2FB3; --jv-purple-400: #8A4FD1; --jv-purple-300: #B48BE0; --jv-purple-100: #EFE6FA; --jv-purple-50: #F7F1FC; --jv-pink-sale: #E91E4F; --jv-ink: #2A2432; --jv-ink-muted: #6F6880; --jv-border: #E6DEF3; --jv-bg: #FFFFFF; --jv-serif: "Playfair Display", Georgia, serif; --jv-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --jv-radius: 14px; --jv-shadow-sm: 0 2px 8px rgba(59,22,112,.06); --jv-shadow-md: 0 8px 24px rgba(59,22,112,.10); --jv-container: 1320px; --jv-gutter: 24px; } /* Dark theme — activated via [data-theme="dark"] on . */ html[data-theme="dark"] { --jv-purple-900: #D7BFFA; --jv-purple-700: #B48BE0; --jv-purple-500: #9A6FD8; --jv-purple-400: #8A4FD1; --jv-purple-300: #7D42C4; --jv-purple-100: #2B1F44; --jv-purple-50: #1D1627; --jv-ink: #F1EAFB; --jv-ink-muted: #B5ACC8; --jv-border: #342B48; --jv-bg: #14101A; --jv-shadow-sm: 0 2px 8px rgba(0,0,0,.35); --jv-shadow-md: 0 8px 24px rgba(0,0,0,.5); } html { color-scheme: light; transition: background-color .25s ease; } html[data-theme="dark"] { color-scheme: dark; } body.jviens { margin: 0; padding: 0; min-height: 100vh; display: flex; flex-direction: column; font-family: var(--jv-sans); color: var(--jv-ink); background: var(--jv-bg); line-height: 1.5; -webkit-font-smoothing: antialiased; transition: background-color .25s ease, color .25s ease; } img, video { max-width: 100%; height: auto; } .jviens-main { flex: 1 0 auto; width: 100%; } .jviens-footer { flex-shrink: 0; } .jviens-skip-link { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; } .jviens-skip-link:focus { position: fixed; left: 16px; top: 16px; width: auto; height: auto; z-index: 100000; padding: 8px 12px; background: var(--jv-purple-700); color: #fff; border-radius: 6px; } input::placeholder, textarea::placeholder { color: var(--jv-ink-muted); opacity: .6; } a { color: var(--jv-purple-700); } a:hover { color: var(--jv-purple-900); } .jviens-layout { max-width: var(--jv-container); margin: 0 auto; padding: 0 var(--jv-gutter); } .jviens-layout--wide { max-width: 1440px; } .jviens.jviens-has-overlay { overflow: hidden; } @media (max-width: 1023.98px) { :root { --jv-gutter: 16px; } }