/* ============================================================ ReBox — design-tokens.css SINGLE SOURCE OF TRUTH for every color, font, radius, spacing, shadow and motion value used anywhere in the product. RULE: no page or component stylesheet may hardcode a hex color, a raw px radius, or a raw px spacing value. Reference a token from this file instead. See /design-system/DESIGN-SYSTEM.md for the full policy and for how to add a new token. This file must be linked BEFORE any other stylesheet, on every account (customer / driver / merchant / admin) and on every marketing page. It has zero dependencies and is safe to cache aggressively (long max-age + content hash on next deploy). ============================================================ */ :root { /* ---------- brand accents ---------- Used on buttons, selected states, category identity — not as the dominant page background. */ --rebox-green: #57B35A; --rebox-coral: #FF6B57; --rebox-yellow: #FFC247; --rebox-mint: #A5DDB4; --rebox-blue: #4A90C2; --rebox-cream: #FFF6E6; /* canonical single brand color for browser chrome (theme-color meta), splash screens and anywhere ONE brand color is needed. */ --rebox-brand: var(--rebox-green); /* ---------- text ---------- */ --text-main: #1F2430; --text-muted: #5F6368; --text-inverse: #FFFFFF; /* ---------- surfaces ---------- */ --surface-0: #F6F7F9; /* page background */ --surface-1: #FFFFFF; /* cards, sheets */ --surface-2: #F1F3F4; /* subtle panels, hover states */ --surface-sidebar: #FFFFFF; --border-soft: rgba(31, 36, 48, 0.08); --border-strong: rgba(31, 36, 48, 0.14); /* ---------- state colors ---------- */ --state-success: #57B35A; --state-warning: #FFC247; --state-danger: #D93025; --state-info: #4A90C2; /* ---------- typography ---------- --font-primary is the ONE body font for every account and every marketing page. --font-display is a deliberate, narrowly-scoped secondary font used ONLY for the admin platform-guide hero/section headings (a documented exception — see DESIGN-SYSTEM.md). Never use --font-display for body copy, buttons, forms or navigation. */ --font-primary: 'Noto Sans Arabic', 'Roboto', Arial, sans-serif; --font-display: 'Readex Pro', 'Noto Sans Arabic', system-ui, sans-serif; --font-icon: 'Material Symbols Rounded'; /* Self-hosted equivalent of --font-primary (IBM Plex Sans Arabic, shipped as the local "ReBox Arabic" family — see customer/auth.css). Use this, never --font-primary, on any page that runs under a strict font-src/style-src 'self' CSP and therefore cannot load Google Fonts. */ --font-primary-secure: "ReBox Arabic", "IBM Plex Sans Arabic", "Segoe UI", Tahoma, system-ui, sans-serif; --text-caption: 12px; --text-small: 13px; --text-body: 15px; --text-button: 14px; --text-card-title: 15px; --text-page-title: 26px; --text-stat: 30px; --text-hero: 36px; /* ---------- radius ---------- Material-leaning: modest on cards/surfaces, pill on buttons/chips. */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-pill: 999px; /* ---------- elevation ---------- */ --elevation-1: 0 1px 2px rgba(31,36,48,0.12), 0 1px 3px rgba(31,36,48,0.08); --elevation-2: 0 2px 6px rgba(31,36,48,0.10), 0 1px 2px rgba(31,36,48,0.12); --elevation-3: 0 4px 12px rgba(31,36,48,0.12), 0 2px 4px rgba(31,36,48,0.10); --elevation-4: 0 8px 24px rgba(31,36,48,0.16), 0 2px 6px rgba(31,36,48,0.10); --shadow-soft: var(--elevation-1); --shadow-lift: var(--elevation-3); /* premium colored shadows — depth reads as "glowing accent" rather than a generic gray shadow. */ --shadow-green: 0 10px 24px -8px rgba(87,179,90,0.45), 0 2px 6px rgba(87,179,90,0.18); --shadow-coral: 0 10px 24px -8px rgba(255,107,87,0.45), 0 2px 6px rgba(255,107,87,0.18); --shadow-yellow: 0 10px 24px -8px rgba(255,194,71,0.45), 0 2px 6px rgba(255,194,71,0.18); --shadow-blue: 0 10px 24px -8px rgba(74,144,194,0.45), 0 2px 6px rgba(74,144,194,0.18); /* ---------- motion ---------- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --dur-fast: 0.15s; --dur-med: 0.28s; /* ---------- spacing ---------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; /* ---------- layout ---------- */ --max-width: 480px; --touch-min: 44px; --header-h: 64px; --sticky-bar-h: 88px; --bottom-nav-h: 68px; --sidebar-w: 260px; --sidebar-w-rail: 76px; /* ================================================================ COMPATIBILITY ALIASES — DEPRECATED, DO NOT USE IN NEW CODE. ================================================================ Two older, parallel token systems existed before this file: - shared/css/auth-tokens.css (--fc-* names, used by the staff/admin login + password-reset pages) - customer/auth.css (--a-* names, used by the customer login/auth pages) Both defined their OWN hex values, which had drifted from the main app's palette (e.g. --fc-primary was #69b84f, a different green from --rebox-green #57B35A). Rather than rewrite every selector in those files immediately (high-risk, large diff), these aliases make the OLD variable names resolve to the SAME canonical values as everywhere else, so the rendered colors are now unified without touching component-level CSS yet. These aliases — and the two files that still reference them — should be deleted during Phase 2 (per-account file split), once every selector is migrated to reference the canonical names above directly. ================================================================ */ --fc-primary: var(--rebox-green); --fc-primary-dark: #3f9945; --fc-primary-light: #eaf5e7; --fc-accent: var(--rebox-yellow); --fc-bg: var(--surface-0); --fc-surface: var(--surface-1); --fc-surface-2: var(--surface-2); --fc-text: var(--text-main); --fc-text-2: var(--text-muted); --fc-border: var(--border-soft); --fc-success: var(--state-success); --fc-warning: var(--state-warning); --fc-danger: var(--state-danger); --fc-info: var(--state-info); --fc-coral: var(--rebox-coral); --fc-coral-dark: #d95749; --fc-coral-light: #f8b0a6; --fc-coral-soft: #fce8e4; --fc-yellow: var(--rebox-yellow); --fc-yellow-dark: #d99a24; --fc-yellow-light: #f8d889; --fc-yellow-soft: #fff3d8; --fc-green-light: var(--rebox-mint); --fc-primary-10: rgba(87, 179, 90, 0.1); --fc-primary-15: rgba(87, 179, 90, 0.15); --fc-info-10: rgba(74, 144, 194, 0.1); --fc-warning-10: rgba(255, 194, 71, 0.12); --fc-danger-10: rgba(217, 48, 37, 0.1); --fc-accent-15: rgba(255, 194, 71, 0.18); --fc-radius-sm: var(--radius-sm); --fc-radius-md: var(--radius-md); --fc-radius-lg: var(--radius-lg); --fc-radius-xl: var(--radius-xl); --fc-shadow: var(--shadow-soft); --fc-font: var(--font-primary); --fc-text-caption: var(--text-caption); --fc-text-small: var(--text-small); --fc-text-body: var(--text-body); --fc-text-button: var(--text-button); --fc-text-card-title: var(--text-card-title); --fc-text-page-title: var(--text-page-title); --fc-text-stat: var(--text-stat); --fc-text-hero: var(--text-hero); --fc-header-height: var(--header-h); --fc-container-max: 1280px; /* customer/auth.css aliases */ --a-bg: var(--rebox-cream); --a-card: rgba(253, 249, 243, 0.94); --a-card-border: rgba(226, 217, 203, 0.55); --a-field-bg: #fcf9f4; --a-field-border: #e5e3e0; --a-focus: var(--rebox-green); --a-title: var(--text-main); --a-muted: var(--text-muted); --a-label: var(--text-muted); --a-value: var(--text-main); --a-ph-strong: #6a6c70; --a-ph-soft: #9d9ea2; --a-green-text: #265f1c; --a-link: var(--rebox-green); --a-tab-track: #e8ecdc; --a-back-bg: #e8edde; --a-rule-off: #c6cac3; --a-rule-on: var(--rebox-green); --a-danger: var(--state-danger); --a-danger-bg: #fdeeea; --a-font: var(--font-primary); --a-font-ltr: var(--font-primary); }