/* ============================================================ VENDLY PREMIUM 2026 — DESIGN TOKENS Single source of truth for color, type, radius, shadow, motion. Master plan: VENDLY_2026_REDESIGN_MASTER_PLAN_2026-06-10.md §1 SAFE-ADOPTION CONTRACT - All canonical tokens are prefixed --v- so this file can be linked on any page today without colliding with the existing :root blocks in includes/header.php, store-admin/layout_head.php or assets/css/theme.css. - The bridge layer at the bottom (legacy variable names) only activates when is set, so adoption is explicit and per-page. - Dark mode activates via ; default follows prefers-color-scheme only when data-theme="auto". ============================================================ */ :root { /* ── Brand color system (spec) ─────────────────────────── */ --v-primary: #0F172A; --v-secondary: #111827; --v-accent: #2563EB; --v-premium: #7C3AED; --v-success: #10B981; --v-warning: #F59E0B; --v-danger: #EF4444; /* ── Surfaces ──────────────────────────────────────────── */ --v-bg: #F8FAFC; --v-card: #FFFFFF; --v-card-elevated: #FFFFFF; --v-border: #E5E7EB; --v-border-strong: #D1D5DB; /* ── Text ──────────────────────────────────────────────── */ --v-text: #0F172A; --v-text-2: #475569; --v-text-3: #94A3B8; --v-text-inverse: #F8FAFC; --v-text-on-accent: #FFFFFF; /* ── Tints (for badges, active nav, soft fills) ────────── */ --v-accent-soft: rgba(37, 99, 235, 0.08); --v-premium-soft: rgba(124, 58, 237, 0.08); --v-success-soft: rgba(16, 185, 129, 0.10); --v-warning-soft: rgba(245, 158, 11, 0.12); --v-danger-soft: rgba(239, 68, 68, 0.08); /* ── Gradients ─────────────────────────────────────────── */ --v-gradient-accent: linear-gradient(135deg, #2563EB, #7C3AED); --v-gradient-dark: linear-gradient(135deg, #0F172A, #1E293B); /* ── Typography ────────────────────────────────────────── */ --v-font: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --v-font-serif: 'Playfair Display', Georgia, serif; --v-text-hero: clamp(44px, 7vw, 72px); --v-text-section: clamp(32px, 5vw, 48px); --v-text-title: clamp(20px, 2.5vw, 24px); --v-text-body: 16px; --v-text-body-lg: 18px; --v-text-small: 13.5px; --v-leading-body: 1.65; --v-tracking-display: -0.03em; /* ── Radii ─────────────────────────────────────────────── */ --v-r-sm: 8px; --v-r-md: 12px; --v-r-lg: 16px; --v-r-xl: 24px; --v-r-full: 999px; /* ── Elevation (house shadows) ─────────────────────────── */ --v-shadow-1: 0 1px 3px rgba(15, 23, 42, 0.06); --v-shadow-2: 0 8px 40px rgba(5, 5, 5, 0.06); --v-shadow-3: 0 18px 60px rgba(5, 5, 5, 0.12); --v-shadow-accent: 0 2px 16px rgba(37, 99, 235, 0.25); /* ── Glass surfaces (overlays only: header, drawers, modals) */ --v-glass-bg: rgba(255, 255, 255, 0.82); --v-glass-blur: 24px; --v-glass-border: rgba(5, 5, 5, 0.06); /* ── Motion ────────────────────────────────────────────── */ --v-ease: cubic-bezier(0.16, 1, 0.3, 1); --v-dur-fast: 150ms; --v-dur: 250ms; --v-dur-slow: 350ms; --v-lift: translateY(-3px); /* ── Layout ────────────────────────────────────────────── */ --v-container: 1440px; --v-gutter: clamp(20px, 5vw, 80px); color-scheme: light; } /* ── Dark mode ────────────────────────────────────────────── */ [data-theme="dark"] { --v-bg: #0B1120; --v-card: #111827; --v-card-elevated: #1E293B; --v-border: #1F2937; --v-border-strong: #334155; --v-text: #F8FAFC; --v-text-2: #CBD5E1; --v-text-3: #64748B; --v-text-inverse: #0F172A; --v-accent-soft: rgba(37, 99, 235, 0.16); --v-premium-soft: rgba(124, 58, 237, 0.16); --v-success-soft: rgba(16, 185, 129, 0.16); --v-warning-soft: rgba(245, 158, 11, 0.16); --v-danger-soft: rgba(239, 68, 68, 0.16); --v-shadow-1: 0 1px 3px rgba(0, 0, 0, 0.4); --v-shadow-2: 0 8px 40px rgba(0, 0, 0, 0.45); --v-shadow-3: 0 18px 60px rgba(0, 0, 0, 0.55); --v-glass-bg: rgba(17, 24, 39, 0.82); --v-glass-border: rgba(255, 255, 255, 0.08); color-scheme: dark; } /* System preference, only when the page opts into auto mode */ @media (prefers-color-scheme: dark) { [data-theme="auto"] { --v-bg: #0B1120; --v-card: #111827; --v-card-elevated: #1E293B; --v-border: #1F2937; --v-border-strong: #334155; --v-text: #F8FAFC; --v-text-2: #CBD5E1; --v-text-3: #64748B; --v-text-inverse: #0F172A; --v-accent-soft: rgba(37, 99, 235, 0.16); --v-premium-soft: rgba(124, 58, 237, 0.16); --v-success-soft: rgba(16, 185, 129, 0.16); --v-warning-soft: rgba(245, 158, 11, 0.16); --v-danger-soft: rgba(239, 68, 68, 0.16); --v-shadow-1: 0 1px 3px rgba(0, 0, 0, 0.4); --v-shadow-2: 0 8px 40px rgba(0, 0, 0, 0.45); --v-shadow-3: 0 18px 60px rgba(0, 0, 0, 0.55); --v-glass-bg: rgba(17, 24, 39, 0.82); --v-glass-border: rgba(255, 255, 255, 0.08); color-scheme: dark; } } /* ── Accessibility: respect reduced motion globally ───────── */ @media (prefers-reduced-motion: reduce) { :root { --v-dur-fast: 1ms; --v-dur: 1ms; --v-dur-slow: 1ms; --v-lift: none; } } /* ============================================================ BRIDGE LAYER — opt-in per page via Maps the legacy variable names used by existing surfaces onto the canonical tokens above, so pages can migrate one at a time without rewriting every selector. - Main site names: includes/header.php :root - Store-admin names: store-admin/layout_head.php :root ============================================================ */ [data-tokens="bridge"] { /* Main site (includes/header.php) */ --bg-primary: var(--v-card); --bg-secondary: var(--v-bg); --bg-tertiary: var(--v-bg); --bg-elevated: var(--v-card-elevated); --text-primary: var(--v-text); --text-secondary: var(--v-text-2); --text-tertiary: var(--v-text-3); --text-quaternary: var(--v-text-3); --border-light: var(--v-glass-border); --border-medium: var(--v-border); --border-subtle: var(--v-glass-border); --blue: var(--v-accent); --indigo: var(--v-premium); --blue-subtle: var(--v-accent-soft); --indigo-subtle: var(--v-premium-soft); --gradient-blue: var(--v-gradient-accent); --font-sans: var(--v-font); --font-serif: var(--v-font-serif); --radius-sm: var(--v-r-sm); --radius-md: var(--v-r-md); --radius-lg: var(--v-r-lg); --radius-xl: var(--v-r-xl); --radius-full: var(--v-r-full); /* Store-admin (store-admin/layout_head.php) */ --sb-bg: var(--v-card); --sb-border: var(--v-border); --sb-txt: var(--v-text-2); --sb-txt-h: var(--v-text); --nav-act-bg: var(--v-accent-soft); --nav-act: var(--v-accent); --nav-h: var(--v-bg); --content-bg: var(--v-bg); --card: var(--v-card); --border: var(--v-border); --text: var(--v-text); --text-2: var(--v-text-2); --text-3: var(--v-text-3); --green: var(--v-success); --red: var(--v-danger); --amber: var(--v-warning); --purple: var(--v-premium); --font: var(--v-font); --r: var(--v-r-sm); --r-lg: var(--v-r-md); --r-xl: var(--v-r-lg); }