/* ============================================================================ * TopTan Wholesale — design token layer (Phase 0) * Source: design_handoff_toptan_redesign/DESIGN-SYSTEM.md * * SCOPE OF THIS FILE: the STATIC, non-editable design tokens — shape (radii), * spacing scale, type scale, shadow, container width, and the font-family * variables. It loads BEFORE component styles (registered first in config.php). * * COLOR tokens are NOT here on purpose. Per the project golden rule, every * colour is admin-editable through Theme Options and lives in the inline * `:root` blocks in layouts/base.blade.php (--fbl-* → --b2b-*), derived with * color-mix(). That inline block is the single source of colour truth; this * file only references those vars, never hard-codes hex. The mapping from the * design's canonical names to the live vars is documented at the bottom. * ========================================================================== */ :root { /* ---- Font families (design: IBM Plex) --------------------------------- * The families themselves are loaded in (Google Fonts) in base.blade.php. * --font-text / --font-heading stay Theme-Options-overridable (defaults set * to IBM Plex Sans there); these two are the fixed technical faces. */ --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', 'Menlo', monospace; /* SKUs, prices, IDs, IBANs */ --font-arabic: 'IBM Plex Sans Arabic', 'IBM Plex Sans', sans-serif; /* [lang=ar] / dir=rtl */ /* ---- Shape (radii) ---- */ --r-badge: 4px; --r-control: 6px; /* buttons, inputs, selects */ --r-card: 10px; --r-pill: 999px; /* ---- Spacing scale (base 4px: 4/8/12/16/24/32/48/64) ---- */ --space: 4px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; /* ---- Type scale (DESIGN-SYSTEM.md §Typography) ---- * display 32/600 · h1 24/600 · h2 18/600 · body 14/400 (lh 1.55) · * label 12/500 uppercase +0.06em · metadata 12 · body min 14, meta min 12 */ --fs-display: 32px; --fs-h1: 24px; --fs-h2: 18px; --fs-body: 14px; --fs-label: 12px; --fs-meta: 12px; --lh-body: 1.55; --ls-label: 0.06em; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* ---- Elevation (hover only — no resting shadows) ---- */ --shadow-hover: 0 4px 16px rgba(26, 35, 33, 0.10); /* ---- Layout ---- */ --container: 1280px; /* 40px gutters desktop, 16px mobile */ --gutter-desktop: 40px; --gutter-mobile: 16px; /* ---- Design canonical color aliases -> live Theme-Options vars ---- * So markup recreated from the design HTML (which names colours --brand, * --ink, etc.) resolves to the admin-editable palette. NOT a second source * of truth — pure aliases onto --fbl-* (base.blade.php). */ --brand: var(--fbl-brand); --brand-deep: var(--fbl-brand-deep); --brand-tint: var(--fbl-brand-tint); --brand-tint-2: var(--fbl-brand-tint-2); --ink: var(--fbl-ink); --ink-2: var(--fbl-ink-2); --ink-3: var(--fbl-ink-3); --bg: var(--fbl-bg); --surface: var(--fbl-surface); --border: var(--fbl-border); --border-strong: var(--fbl-border-strong); --footer-bg: var(--fbl-footer-bg); --success: var(--fbl-success); --success-bg: var(--fbl-success-bg); --danger: var(--fbl-danger); --danger-bg: var(--fbl-danger-bg); --amber: var(--fbl-amber); --amber-bg: var(--fbl-amber-bg); } /* Arabic / RTL: swap the readable text face to IBM Plex Sans Arabic once, at the * root, per RTL-GUIDE.md rule 2. Mono stays for numbers/SKUs/prices/IBANs. */ [lang="ar"], :lang(ar), [dir="rtl"] { --font-text: var(--font-arabic); --font-heading: var(--font-arabic); }