/** * Design System Tokens — Dimi Affiliate * Single source of truth for all design values. * Override --di-primary via Brand admin settings (printed inline in ). */ :root { /* Brand — overridable via admin Brand settings */ --di-primary: #2563EB; --di-primary-hover: #1D4ED8; --di-primary-soft: rgba(37, 99, 235, 0.08); --di-secondary: #3B82F6; --di-cta: #F97316; --di-cta-hover: #EA580C; /* Surface */ --di-bg: #F8FAFC; --di-surface: #FFFFFF; --di-surface-alt: #F1F5F9; /* Text */ --di-text: #0F172A; --di-text-muted: #475569; --di-text-subtle: #64748B; --di-text-on-primary: #FFFFFF; /* Border */ --di-border: #E2E8F0; --di-border-strong: #CBD5E1; /* Status */ --di-success: #10B981; --di-success-soft: rgba(16, 185, 129, 0.1); --di-warning: #F59E0B; --di-warning-soft: rgba(245, 158, 11, 0.1); --di-danger: #EF4444; --di-danger-soft: rgba(239, 68, 68, 0.1); --di-info: #06B6D4; /* Type scale */ --di-font-heading: 'Be Vietnam Pro', system-ui, -apple-system, sans-serif; --di-font-body: 'Open Sans', system-ui, -apple-system, sans-serif; --di-text-xs: 0.75rem; --di-text-sm: 0.875rem; --di-text-base: 1rem; --di-text-lg: 1.125rem; --di-text-xl: 1.25rem; --di-text-2xl: 1.5rem; --di-text-3xl: 1.875rem; --di-text-4xl: 2.25rem; /* Spacing scale (4-pt) */ --di-space-1: 0.25rem; --di-space-2: 0.5rem; --di-space-3: 0.75rem; --di-space-4: 1rem; --di-space-5: 1.25rem; --di-space-6: 1.5rem; --di-space-8: 2rem; --di-space-10: 2.5rem; --di-space-12: 3rem; --di-space-16: 4rem; /* Radii */ --di-radius-sm: 4px; --di-radius-md: 8px; --di-radius-lg: 12px; --di-radius-xl: 16px; --di-radius-full: 9999px; /* Shadows */ --di-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04); --di-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04); --di-shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.04); --di-shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.04); /* Easings + durations */ --di-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --di-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --di-duration-fast: 150ms; --di-duration-base: 200ms; --di-duration-slow: 300ms; /* Breakpoints: sm 640, md 768, lg 1024, xl 1280, 2xl 1536 */ }