/*-------------------------------------------------------------- # BB Cart — Design Tokens # # Single source of truth for the cart surface's design values. # Sourced from Figma "MC Cart — Universal Design System" # (BuddyBoss Membership colors · Untitled UI structure · Inter typeface). # # Rules: # - Cart-scoped: loaded ONLY as a dependency of cart stylesheets. # - Namespaced --bbms-cart-* so nothing leaks into base flow. # - Components/pages reference tokens; never raw hex where a # token exists. --------------------------------------------------------------*/ :root { /*------------------------------------------------ # Brand ------------------------------------------------*/ --bbms-cart-color-primary: #06429e; --bbms-cart-color-primary-hover: #043278; --bbms-cart-color-primary-soft: #e0eaf8; /* selected/active state bg */ --bbms-cart-color-on-primary: #ffffff; /*------------------------------------------------ # Neutrals (design's navy-tinted scale) ------------------------------------------------*/ --bbms-cart-neutral-50: #fafafa; --bbms-cart-neutral-100: #f2f2f2; --bbms-cart-neutral-200: #e5e5e5; --bbms-cart-neutral-300: #dddddd; --bbms-cart-neutral-400: #b3b3b3; --bbms-cart-neutral-500: #737373; --bbms-cart-neutral-700: #3a4a58; --bbms-cart-neutral-900: #091d2e; /* Semantic aliases — use these, not the raw ramp */ --bbms-cart-color-surface: #ffffff; --bbms-cart-color-surface-subtle: var(--bbms-cart-neutral-50); --bbms-cart-color-surface-hover: #f8f9fa; --bbms-cart-color-border: var(--bbms-cart-neutral-300); --bbms-cart-color-border-subtle: var(--bbms-cart-neutral-200); --bbms-cart-color-divider: #efefef; /* subtle in-card rule (totals) */ --bbms-cart-color-text: var(--bbms-cart-neutral-900); --bbms-cart-color-text-secondary: var(--bbms-cart-neutral-700); --bbms-cart-color-text-muted: var(--bbms-cart-neutral-500); --bbms-cart-color-text-subtle: var(--bbms-cart-neutral-400); --bbms-cart-color-overlay: rgba(9, 18, 46, 0.7); /*------------------------------------------------ # Status ------------------------------------------------*/ --bbms-cart-color-success: #16a34a; --bbms-cart-color-error: #d61f43; --bbms-cart-color-error-hover: #b41937; --bbms-cart-color-danger: #d92d20; /* destructive-outline actions (row Cancel) */ /* Badge palettes (bg / border / text) */ --bbms-cart-badge-success-bg: #f0fdf4; --bbms-cart-badge-success-border: #bbf7d0; --bbms-cart-badge-success-text: #15803d; --bbms-cart-badge-error-bg: #fef2f2; --bbms-cart-badge-error-border: #fda4af; --bbms-cart-badge-error-text: #b91c1c; --bbms-cart-badge-neutral-bg: var(--bbms-cart-neutral-50); --bbms-cart-badge-neutral-border: var(--bbms-cart-neutral-200); --bbms-cart-badge-neutral-text: #404040; --bbms-cart-badge-brand-bg: #eff6ff; --bbms-cart-badge-brand-border: #bfdbfe; --bbms-cart-badge-brand-text: var(--bbms-cart-color-primary); /* Warning banner (Figma warning-panel) */ --bbms-cart-color-warning-bg: #fffbea; --bbms-cart-color-warning-border: #fcd34d; --bbms-cart-color-warning-text: #8d4404; --bbms-cart-color-warning-icon: #b56b09; /* Shop ProductCard + in-card toast (Figma shop listing) */ --bbms-cart-color-image-placeholder: #e9e9e9; --bbms-cart-color-in-cart: #606060; --bbms-cart-toast-warning-bg: #fff4e0; --bbms-cart-toast-warning-border: #e0a030; --bbms-cart-toast-warning-text: #7d520d; --bbms-cart-toast-warning-icon: #e0a030; --bbms-cart-toast-error-bg: #fef2f2; --bbms-cart-toast-error-border: #df2a4a; --bbms-cart-toast-error-text: #842029; --bbms-cart-toast-error-icon: #df2a4a; --bbms-cart-toast-shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.1); /*------------------------------------------------ # Spacing (4px scale) ------------------------------------------------*/ --bbms-cart-space-1: 4px; --bbms-cart-space-2: 8px; --bbms-cart-space-3: 12px; --bbms-cart-space-4: 16px; --bbms-cart-space-5: 20px; --bbms-cart-space-6: 24px; --bbms-cart-space-8: 32px; --bbms-cart-space-10: 40px; /*------------------------------------------------ # Radius ------------------------------------------------*/ --bbms-cart-radius-xs: 3px; /* admin/WP-native details */ --bbms-cart-radius-sm: 6px; /* square badges */ --bbms-cart-radius-md: 8px; /* buttons, inputs, pagination, product cards */ --bbms-cart-radius-card: 12px; /* admin page cards (page spec) */ --bbms-cart-radius-lg: 16px; /* DS Card component, modals */ --bbms-cart-radius-pill: 999px; /*------------------------------------------------ # Typography (Inter) ------------------------------------------------*/ --bbms-cart-font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --bbms-cart-font-size-xs: 0.75rem; /* 12px */ --bbms-cart-font-size-sm: 0.8125rem; /* 13px */ --bbms-cart-font-size-base: 0.875rem; /* 14px — Text/sm */ --bbms-cart-font-size-md: 1rem; /* 16px — Text/md */ --bbms-cart-font-size-lg: 1.125rem; /* 18px — card/modal titles */ --bbms-cart-font-weight-regular: 400; --bbms-cart-font-weight-medium: 500; --bbms-cart-font-weight-semibold: 600; --bbms-cart-font-weight-bold: 700; --bbms-cart-line-height: 1.5; /*------------------------------------------------ # Elevation ------------------------------------------------*/ --bbms-cart-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05); --bbms-cart-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.12); /* dropdowns/toasts */ --bbms-cart-shadow-lg: 0 20px 24px -4px rgba(0, 0, 0, 0.08), 0 8px 8px -4px rgba(0, 0, 0, 0.03), 0 3px 3px -1.5px rgba(0, 0, 0, 0.04); /* modals */ --bbms-cart-focus-ring: 0 0 0 3px rgba(6, 66, 158, 0.3); /*------------------------------------------------ # Motion ------------------------------------------------*/ --bbms-cart-transition: 0.15s ease; /*------------------------------------------------ # Admin (WP-admin-native palette per Figma admin frames) ------------------------------------------------*/ --bbms-cart-admin-primary: #2271b1; --bbms-cart-admin-text: #1d2327; --bbms-cart-admin-text-secondary: #3c434a; --bbms-cart-admin-text-muted: #50575e; --bbms-cart-admin-bg: #f0f0f1; --bbms-cart-admin-success: #46b450; --bbms-cart-admin-danger: #d63638; --bbms-cart-admin-link-delete: #a00; /* Admin status pills (order/txn badges; full enum: pending, complete, refunded, failed, cancelled) */ --bbms-cart-admin-pill-success-bg: #edfbe8; --bbms-cart-admin-pill-success-text: #2d6a2d; --bbms-cart-admin-pill-success-border: #c6e1c6; --bbms-cart-admin-pill-warning-bg: #fef3c7; --bbms-cart-admin-pill-warning-text: #92400e; --bbms-cart-admin-pill-error-bg: #f8cfcf; --bbms-cart-admin-pill-error-text: #8b2020; --bbms-cart-admin-pill-info-bg: #dbeafe; --bbms-cart-admin-pill-info-text: #1e40af; --bbms-cart-admin-pill-neutral-bg: #ede9fe; --bbms-cart-admin-pill-neutral-text: #5b21b6; }