/** * Vobbix Design Tokens — v3 * --------------------------------------------------------------------------- * Single source of truth. Loaded GLOBALLY so Elementor-built pages inherit the * same system as the coded templates. * * Palette per the VOBBIX brand spec (2026-09-24), with two accessibility * corrections flagged inline. DO NOT add component styles here — tokens only. */ @layer tokens { :root { /* === BRAND ============================================================ Accent held under ~10% of any viewport: headline highlights, hover states, badges and price tags only. Primary CTAs are BLACK. ==================================================================== */ --vb-red-500: #E11D2E; /* brand accent 4.75:1 on white */ --vb-red-600: #C41425; /* hover on red surfaces 6.05:1 white-on-it */ /* ⚠️ CORRECTION: the spec pairs #E11D2E text on the #FDE8EA badge, which measures 4.05:1 and fails AA. #B91C1C gives 5.52:1 on that badge and 6.47:1 on white — and it already appears in the prototype, so it is on-palette. Used for ALL small red text. */ --vb-red-700: #B91C1C; --vb-red-50: #FDE8EA; /* soft badge / highlight ground */ /* === NEUTRALS ========================================================= */ --vb-ink-900: #050708; /* PRIMARY CTA + logo black 20.19:1 on white */ --vb-ink-700: #1F2937; /* headings 14.68:1 on white */ --vb-ink-600: #374151; /* strong body / table heads */ --vb-slate-500: #4B5563; /* BODY TEXT 7.56:1 on white */ --vb-slate-400: #6B7280; /* tertiary / captions 4.83:1 on white */ /* ⚠️ CORRECTION: the spec's #E5E7EB border is 1.24:1 — fine as a decorative card edge, but it fails the 3:1 minimum for anything that communicates a boundary the user must perceive (inputs, selects, checkboxes). Those use --vb-border instead. */ --vb-border: #868F9A; /* FORM CONTROL borders only 3.28:1 */ --vb-line-300: #E5E7EB; /* decorative card borders, dividers */ --vb-line-200: #F3F4F6; /* subtle separators */ --vb-canvas: #FFFFFF; /* cards and containers */ --vb-page: #F8F9FA; /* page background */ --vb-surface: #F3F4F6; /* product-image ground — never pure white, or white products disappear */ /* Back-compat alias: existing rules using --vb-mist-100 as a panel ground now resolve to the page grey. */ --vb-mist-100: #F8F9FA; /* === STATUS =========================================================== ALWAYS rendered as icon + text. Four AA-compliant hues collapse into one tone in greyscale, so shape carries the meaning, not colour. ==================================================================== */ --vb-success-ink: #0A5C37; --vb-success-bg: #E8F3ED; /* 7.11:1 AAA */ --vb-warning-ink: #7A4700; --vb-warning-bg: #FDF2DD; /* 6.93:1 AA */ --vb-error-ink: #B91C1C; --vb-error-bg: #FDE8EA; /* 5.52:1 AA */ --vb-info-ink: #1F5F8B; --vb-info-bg: #E9F0F5; /* 5.95:1 AA */ /* === DARK SURFACES ==================================================== Used for text on the black CTA only — there are no black container backgrounds in this design. ==================================================================== */ --vb-on-dark: #FFFFFF; --vb-on-dark-body: #D1D5DB; --vb-on-dark-muted: #9CA3AF; --vb-on-dark-border: #374151; --vb-red-300: #F87171; /* red on a dark ground, if ever needed */ /* === TYPEFACES ======================================================== */ --vb-font-display: "Fraunces", Georgia, "Times New Roman", serif; --vb-font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --vb-font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Consolas, monospace; --vb-fraunces-refined: "SOFT" 20, "WONK" 0; /* === TYPE SCALE ======================================================= Fluid. Body never below 16px — smaller triggers iOS zoom-on-focus and fails at 360px. ==================================================================== */ --vb-text-display: clamp(2.25rem, 1.2rem + 4.5vw, 4rem); --vb-text-h1: clamp(1.875rem, 1.1rem + 3.4vw, 3rem); --vb-text-h2: clamp(1.5625rem, 1.1rem + 2vw, 2.25rem); --vb-text-h3: clamp(1.3125rem, 1.1rem + .9vw, 1.6875rem); --vb-text-h4: clamp(1.125rem, 1rem + .5vw, 1.3125rem); --vb-text-lg: 1.125rem; --vb-text-base: 1rem; --vb-text-sm: .875rem; --vb-text-xs: .8125rem; --vb-text-price: clamp(1.3125rem, 1.1rem + .9vw, 1.5625rem); --vb-leading-tight: 1.1; --vb-leading-snug: 1.25; --vb-leading-body: 1.6; /* === SPACE (4px base) ================================================= */ --vb-space-1: .25rem; --vb-space-2: .5rem; --vb-space-3: .75rem; --vb-space-4: 1rem; --vb-space-5: 1.25rem; --vb-space-6: 1.5rem; --vb-space-8: 2rem; --vb-space-10: 2.5rem; --vb-space-12: 3rem; --vb-space-16: 4rem; --vb-space-20: 5rem; --vb-space-24: 6rem; /* === LAYOUT =========================================================== 1600px max per the full-bleed spec, with an inner reading measure. ==================================================================== */ --vb-container: 1600px; --vb-container-inner: 1320px; --vb-container-narrow: 840px; --vb-gutter: clamp(1rem, 4vw, 2.5rem); --vb-section-y: clamp(3rem, 7vw, 4.5rem); /* === RADIUS =========================================================== */ --vb-radius-sm: 6px; --vb-radius-md: 12px; /* buttons and inputs, per spec */ --vb-radius-lg: 16px; /* cards */ --vb-radius-xl: 20px; /* panels, modals */ --vb-radius-full: 999px; /* === SHADOW =========================================================== Tinted with the brand ink rather than pure black — a neutral black shadow looks muddy over the grey page. ==================================================================== */ --vb-shadow-xs: 0 1px 2px rgba(5,7,8,.04); --vb-shadow-sm: 0 1px 2px rgba(5,7,8,.04), 0 2px 6px rgba(5,7,8,.03); --vb-shadow-md: 0 2px 4px rgba(5,7,8,.05), 0 8px 16px rgba(5,7,8,.06); --vb-shadow-lg: 0 4px 8px rgba(5,7,8,.06), 0 16px 32px rgba(5,7,8,.09); --vb-shadow-sticky: 0 -2px 12px rgba(5,7,8,.09); /* === MOTION =========================================================== */ --vb-ease: cubic-bezier(.4, 0, .2, 1); --vb-duration-fast: .15s; --vb-duration-base: .2s; --vb-duration-slow: .25s; /* === ASSETS =========================================================== */ --vb-caret: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%234B5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); /* === Z-INDEX ========================================================== */ --vb-z-header: 100; --vb-z-drawer: 200; --vb-z-modal: 300; --vb-z-sticky: 150; --vb-z-toast: 400; } }