/** * DZD Sooq Design System — shared tokens * * Source of truth: docs/previews/premium-redesign/style.css (APPROVED) * Load via `dzd_sooq_enqueue_ui_foundation()` or as a style dependency. */ :root, .dzd-ui { /* —— Spacing scale (4-based) —— */ --dzd-space-1: 4px; --dzd-space-2: 8px; --dzd-space-3: 12px; --dzd-space-4: 16px; --dzd-space-5: 20px; --dzd-space-6: 24px; --dzd-space-7: 32px; --dzd-space-8: 40px; --dzd-space-9: 48px; --dzd-space-10: 64px; /* —— Radius language (preview: 12 / 16 / 20) —— */ --dzd-radius-xs: 8px; --dzd-radius-sm: 12px; --dzd-radius-md: 16px; --dzd-radius-lg: 20px; --dzd-radius-xl: 20px; --dzd-radius-bubble: 18px; --dzd-radius-pill: 999px; /* —— Shadow language (exact preview elevation) —— */ --dzd-shadow-sm: 0 1px 2px rgba(17, 19, 34, 0.05), 0 4px 12px rgba(17, 19, 34, 0.04); --dzd-shadow-card: 0 4px 10px rgba(17, 19, 34, 0.05), 0 14px 36px rgba(17, 19, 34, 0.1); --dzd-shadow-soft: 0 4px 10px rgba(17, 19, 34, 0.05), 0 14px 36px rgba(17, 19, 34, 0.1); --dzd-shadow-elevated: 0 8px 16px rgba(17, 19, 34, 0.06), 0 24px 56px rgba(17, 19, 34, 0.12); --dzd-shadow-hover: 0 10px 20px rgba(17, 19, 34, 0.08), 0 28px 64px rgba(17, 19, 34, 0.14); --dzd-shadow-input: 0 1px 2px rgba(17, 19, 34, 0.04), 0 6px 16px rgba(17, 19, 34, 0.05); --dzd-shadow-accent: 0 8px 20px rgba(94, 67, 214, 0.35); --dzd-shadow-focus: 0 0 0 3px rgba(94, 67, 214, 0.2); /* —— Brand / semantic colors (exact preview) —— */ --dzd-color-accent: #5e43d6; --dzd-color-accent-soft: rgba(94, 67, 214, 0.1); --dzd-color-accent-soft-strong: rgba(94, 67, 214, 0.14); --dzd-color-accent-border: #cfc4ff; --dzd-color-page: #eef0f5; --dzd-color-page-deep: #e8ebf2; /* Legacy alias used by older feature CSS */ --dzd-color-bg: var(--dzd-color-page); --dzd-color-surface: #ffffff; --dzd-color-surface-panel: #fbfbfc; --dzd-color-surface-muted: #f6f7fa; --dzd-color-surface-tint: #f6f7fa; --dzd-color-border: #d8dae3; --dzd-color-border-strong: #c5c8d4; --dzd-color-text: #111322; --dzd-color-text-muted: #5b5f73; --dzd-color-text-muted-strong: #5b5f73; --dzd-color-text-subtle: #8b90a5; --dzd-color-incoming: #f6f7fa; --dzd-color-incoming-border: #d8dae3; --dzd-color-on-accent: #ffffff; --dzd-color-danger: #b42318; --dzd-color-danger-soft: #fef3f2; --dzd-color-success: #067647; --dzd-color-success-soft: #ecfdf3; /* —— Global layout —— */ --dzd-layout-max: 1310px; --dzd-layout-gutter: 24px; --dzd-layout-gutter-tablet: 20px; /* * Layout breakpoints (canonical — also config/breakpoints.php): * Desktop ≥1200 · Tablet 768–1199 · Mobile ≤767 * Media queries must use these px values; do not invent shell breakpoints. */ /* —— Typography (Listivo SoT: Inter text + Red Hat Display headings) —— */ --dzd-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --dzd-font-display: "Red Hat Display", "Inter", system-ui, sans-serif; /* Arabic glyph fallbacks (used under html[dir=rtl]; Inter kept for Latin mixes) */ --dzd-font-arabic: "Segoe UI", Tahoma, "Noto Sans Arabic", "Noto Naskh Arabic", system-ui, sans-serif; /* * Type scale — balanced marketplace reading (comfortable, not oversized). * Prefer these over one-off px/rem in feature CSS. * * Roles (shared AR/EN numeric sizes — Arabic uses line-height / weight for parity): * meta → xs (14) * secondary → sm (14) * nav/buttons → md (15) * body/inputs → base (16) * card title → lg (17) * card price → xl (20) * section/h2 → 2xl (22) * page title → 3xl (28) * hero/h1 → 4xl (32) */ --dzd-fs-xs: 14px; /* metadata / helper floor */ --dzd-fs-sm: 14px; /* secondary / form labels */ --dzd-fs-md: 15px; /* nav / mid UI / buttons */ --dzd-fs-base: 16px; /* body / inputs / primary reading */ --dzd-fs-lg: 17px; /* card titles / emphasis */ --dzd-fs-xl: 20px; /* listing price / mid headings */ --dzd-fs-2xl: 22px; /* section headings / listing title */ --dzd-fs-3xl: 28px; /* page headings */ --dzd-fs-4xl: 32px; /* large page / hero headings */ /* Semantic aliases — prefer these in feature CSS for intent clarity */ --dzd-fs-meta: var(--dzd-fs-xs); --dzd-fs-label: var(--dzd-fs-sm); --dzd-fs-control: var(--dzd-fs-md); --dzd-fs-body: var(--dzd-fs-base); --dzd-fs-card-title: var(--dzd-fs-lg); --dzd-fs-card-price: var(--dzd-fs-xl); --dzd-fs-listing-title: var(--dzd-fs-2xl); --dzd-fs-listing-price: var(--dzd-fs-xl); --dzd-fs-section: var(--dzd-fs-2xl); --dzd-fs-page: var(--dzd-fs-3xl); --dzd-lh-tight: 1.25; --dzd-lh-snug: 1.4; --dzd-lh-body: 1.5; --dzd-lh-relaxed: 1.65; /* Arabic-friendly default */ --dzd-tracking-tight: -0.02em; --dzd-tracking-display: -0.03em; --dzd-tracking-arabic: 0; --dzd-fw-regular: 400; --dzd-fw-medium: 500; --dzd-fw-semibold: 600; --dzd-fw-bold: 700; /* —— Motion (exact preview) —— */ --dzd-ease: 200ms cubic-bezier(0.22, 1, 0.36, 1); --dzd-ease-slow: 240ms cubic-bezier(0.22, 1, 0.36, 1); /* —— Chat aliases —— */ --dzd-chat-accent: var(--dzd-color-accent); --dzd-chat-accent-soft: var(--dzd-color-accent-soft); --dzd-chat-surface: var(--dzd-color-surface); --dzd-chat-surface-raised: var(--dzd-color-surface); --dzd-chat-surface-muted: var(--dzd-color-surface-muted); --dzd-chat-border: var(--dzd-color-border); --dzd-chat-border-soft: var(--dzd-color-border); --dzd-chat-text: var(--dzd-color-text); --dzd-chat-text-muted: var(--dzd-color-text-muted); --dzd-chat-incoming: var(--dzd-color-incoming); --dzd-chat-incoming-border: var(--dzd-color-incoming-border); --dzd-chat-outgoing: var(--dzd-color-accent); --dzd-chat-shadow: var(--dzd-shadow-soft); --dzd-chat-shadow-soft: var(--dzd-shadow-card); } /* * Mobile typography — slight controlled reduction (≤767 only). * Keeps body/inputs at 16px; preserves readable prices and titles. */ @media (max-width: 767px) { :root, .dzd-ui { --dzd-fs-md: 14px; --dzd-fs-lg: 16px; --dzd-fs-xl: 19px; --dzd-fs-2xl: 20px; --dzd-fs-3xl: 24px; --dzd-fs-4xl: 28px; } }