/* ============================================================ MOTORX — Design Tokens (CSS Custom Properties) variables.css ============================================================ */ /* ─── DARK THEME (default) ─────────────────────────────────── */ :root, [data-theme="dark"] { /* Brand */ --clr-brand: #2196F3; --clr-brand-light: #42A5F5; --clr-brand-dark: #1565C0; --clr-brand-glow: rgba(33, 150, 243, 0.35); /* Backgrounds */ --clr-bg-base: #0A0F1E; --clr-bg-surface: #0F1628; --clr-bg-card: #111827; --clr-bg-card-hover:#162033; --clr-bg-input: #1A2235; --clr-bg-sidebar: #080D1A; --clr-bg-overlay: rgba(0, 0, 0, 0.75); /* Text */ --clr-text-primary: #F0F4FF; --clr-text-secondary: #8B9CC8; --clr-text-muted: #4A5568; --clr-text-inverse: #0A0F1E; --clr-text-on-brand: #FFFFFF; /* Borders */ --clr-border: rgba(33, 150, 243, 0.15); --clr-border-strong: rgba(33, 150, 243, 0.35); --clr-border-subtle: rgba(255, 255, 255, 0.05); /* Status */ --clr-success: #10B981; --clr-success-bg: rgba(16, 185, 129, 0.12); --clr-warning: #F59E0B; --clr-warning-bg: rgba(245, 158, 11, 0.12); --clr-danger: #EF4444; --clr-danger-bg: rgba(239, 68, 68, 0.12); --clr-info: #06B6D4; --clr-info-bg: rgba(6, 182, 212, 0.12); /* AI Badges */ --clr-good-deal: #10B981; --clr-good-deal-bg: rgba(16, 185, 129, 0.15); --clr-fair-price: #F59E0B; --clr-fair-price-bg: rgba(245, 158, 11, 0.15); --clr-overpriced: #EF4444; --clr-overpriced-bg: rgba(239, 68, 68, 0.15); /* Glassmorphism */ --glass-bg: rgba(15, 22, 40, 0.70); --glass-border: rgba(33, 150, 243, 0.18); --glass-blur: blur(20px); --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.40); /* Navbar */ --navbar-bg: rgba(8, 13, 26, 0.92); --navbar-border: rgba(33, 150, 243, 0.12); --navbar-height: 68px; /* Shadows */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.30); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.40); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.50); --shadow-brand: 0 0 20px rgba(33, 150, 243, 0.25); --shadow-brand-strong: 0 0 40px rgba(33, 150, 243, 0.40); /* Scrollbar */ --scrollbar-track: #0F1628; --scrollbar-thumb: #1E3A5F; --scrollbar-thumb-hover:#2196F3; /* Logo */ --logo-text-color: #FFFFFF; --logo-x-color: #2196F3; } /* ─── LIGHT THEME ───────────────────────────────────────────── */ [data-theme="light"] { /* Brand — same */ --clr-brand: #1976D2; --clr-brand-light: #42A5F5; --clr-brand-dark: #0D47A1; --clr-brand-glow: rgba(25, 118, 210, 0.20); /* Backgrounds */ --clr-bg-base: #F4F7FF; --clr-bg-surface: #FFFFFF; --clr-bg-card: #FFFFFF; --clr-bg-card-hover:#EEF4FF; --clr-bg-input: #F0F4FF; --clr-bg-sidebar: #1A2740; --clr-bg-overlay: rgba(0, 0, 0, 0.55); /* Text */ --clr-text-primary: #0F172A; --clr-text-secondary: #475569; --clr-text-muted: #94A3B8; --clr-text-inverse: #FFFFFF; --clr-text-on-brand: #FFFFFF; /* Borders */ --clr-border: rgba(0, 0, 0, 0.08); --clr-border-strong: rgba(25, 118, 210, 0.30); --clr-border-subtle: rgba(0, 0, 0, 0.04); /* Status */ --clr-success: #059669; --clr-success-bg: rgba(5, 150, 105, 0.10); --clr-warning: #D97706; --clr-warning-bg: rgba(217, 119, 6, 0.10); --clr-danger: #DC2626; --clr-danger-bg: rgba(220, 38, 38, 0.10); --clr-info: #0891B2; --clr-info-bg: rgba(8, 145, 178, 0.10); /* AI Badges */ --clr-good-deal: #059669; --clr-good-deal-bg: rgba(5, 150, 105, 0.12); --clr-fair-price: #D97706; --clr-fair-price-bg: rgba(217, 119, 6, 0.12); --clr-overpriced: #DC2626; --clr-overpriced-bg: rgba(220, 38, 38, 0.12); /* Glassmorphism */ --glass-bg: rgba(255, 255, 255, 0.75); --glass-border: rgba(25, 118, 210, 0.15); --glass-blur: blur(20px); --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.12); /* Navbar */ --navbar-bg: rgba(255, 255, 255, 0.95); --navbar-border: rgba(0, 0, 0, 0.08); --navbar-height: 68px; /* Shadows */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.10); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.14); --shadow-brand: 0 0 20px rgba(25, 118, 210, 0.15); --shadow-brand-strong: 0 0 40px rgba(25, 118, 210, 0.25); /* Scrollbar */ --scrollbar-track: #F0F4FF; --scrollbar-thumb: #CBD5E1; --scrollbar-thumb-hover:#1976D2; /* Logo */ --logo-text-color: #0F172A; --logo-x-color: #1976D2; } /* ─── SPACING ───────────────────────────────────────────────── */ :root { --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* ─── TYPOGRAPHY ──────────────────────────────────────────── */ --font-sans: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; --font-arabic: 'Cairo', 'Tajawal', 'Arial', sans-serif; --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --text-4xl: 2.25rem; /* 36px */ --text-5xl: 3rem; /* 48px */ --text-6xl: 3.75rem; /* 60px */ --font-thin: 100; --font-light: 300; --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; --font-extrabold: 800; --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; /* ─── BORDER RADIUS ───────────────────────────────────────── */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-2xl: 32px; --radius-full: 9999px; /* ─── TRANSITIONS ─────────────────────────────────────────── */ --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 400ms ease; --transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1); /* ─── Z-INDEX ─────────────────────────────────────────────── */ --z-below: -1; --z-base: 0; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; --z-navbar: 600; --z-toast: 9999; /* ─── LAYOUT ──────────────────────────────────────────────── */ --container-max: 1280px; --container-pad: clamp(16px, 4vw, 48px); --sidebar-width: 260px; --card-min-w: 280px; }