redesign the homepage

storefront/src/styles/phase16-tokens.css

@@ -0,0 +1,143 @@
+/* RentalDriveGo Phase 16 application design tokens.
+ * Derived from the approved marketing-site token system and adapted for the
+ * class-based theme controls used by the operational applications.
+ */
+:root {
+  --rdg-blue-50: #eff6ff;
+  --rdg-blue-100: #dbeafe;
+  --rdg-blue-200: #bfdbfe;
+  --rdg-blue-500: #2874e8;
+  --rdg-blue-600: #1b5dd8;
+  --rdg-blue-700: #174bb5;
+  --rdg-blue-800: #183d88;
+  --rdg-orange-100: #ffedd5;
+  --rdg-orange-400: #fb923c;
+  --rdg-orange-600: #ea580c;
+  --rdg-orange-700: #c2410c;
+  --rdg-navy-950: #081426;
+  --rdg-navy-900: #0d1b2e;
+  --rdg-navy-850: #11233b;
+  --rdg-navy-800: #162b46;
+  --rdg-gray-25: #fbfdff;
+  --rdg-gray-50: #f7f9fc;
+  --rdg-gray-100: #eef2f7;
+  --rdg-gray-200: #dbe3ed;
+  --rdg-gray-300: #c6d0dc;
+  --rdg-gray-500: #64748b;
+  --rdg-gray-600: #475569;
+  --rdg-gray-700: #334155;
+  --rdg-gray-800: #1e293b;
+  --rdg-gray-900: #0f172a;
+  --rdg-green-100: #dcfce7;
+  --rdg-green-700: #15803d;
+  --rdg-amber-100: #fef3c7;
+  --rdg-amber-800: #92400e;
+  --rdg-red-100: #fee2e2;
+  --rdg-red-700: #b91c1c;
+
+  --rdg-radius-sm: 10px;
+  --rdg-radius-md: 16px;
+  --rdg-radius-lg: 24px;
+  --rdg-radius-pill: 999px;
+  --rdg-touch-min: 44px;
+  --rdg-container-max: 1280px;
+  --rdg-font-latin: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --rdg-font-arabic: "Noto Sans Arabic", Tahoma, Arial, sans-serif;
+
+  --rdg-surface-page: var(--rdg-gray-25);
+  --rdg-surface-primary: #ffffff;
+  --rdg-surface-elevated: #ffffff;
+  --rdg-surface-muted: #f2f6fb;
+  --rdg-surface-strong: #e8f0fa;
+  --rdg-text-primary: #102035;
+  --rdg-text-secondary: #52647a;
+  --rdg-text-subdued: var(--rdg-gray-500);
+  --rdg-text-inverse: #f8fafc;
+  --rdg-border: #d8e2ee;
+  --rdg-border-strong: #bdcad9;
+  --rdg-action-primary: var(--rdg-blue-700);
+  --rdg-action-primary-hover: var(--rdg-blue-800);
+  --rdg-action-conversion: var(--rdg-orange-700);
+  --rdg-action-conversion-hover: #9a3412;
+  --rdg-focus: #f97316;
+  --rdg-soft-blue: #eef5ff;
+  --rdg-soft-orange: #fff7ed;
+  --rdg-shadow-color: rgba(8, 20, 38, 0.12);
+  --rdg-shadow-subtle: 0 1px 2px var(--rdg-shadow-color);
+  --rdg-shadow-card: 0 20px 60px var(--rdg-shadow-color);
+  --rdg-shadow-overlay: 0 28px 80px var(--rdg-shadow-color);
+
+  /* Compatibility aliases for the existing apps. */
+  --primary: var(--rdg-action-primary);
+  --primary-hover: var(--rdg-action-primary-hover);
+  --accent: var(--rdg-action-conversion);
+  --bg-elevated: var(--rdg-surface-elevated);
+  --border-accent: var(--rdg-border);
+  --glass-bg: color-mix(in srgb, var(--rdg-surface-elevated) 88%, transparent);
+  --shadow-card: var(--rdg-shadow-card);
+  --shadow-glow: 0 0 20px color-mix(in srgb, var(--rdg-action-conversion) 18%, transparent);
+}
+
+html.dark,
+html[data-theme='dark'] {
+  --rdg-surface-page: var(--rdg-navy-950);
+  --rdg-surface-primary: var(--rdg-navy-900);
+  --rdg-surface-elevated: var(--rdg-navy-850);
+  --rdg-surface-muted: #0b1a2d;
+  --rdg-surface-strong: #172d48;
+  --rdg-text-primary: #eef5ff;
+  --rdg-text-secondary: #adbed2;
+  --rdg-text-subdued: var(--rdg-gray-300);
+  --rdg-text-inverse: var(--rdg-navy-950);
+  --rdg-border: #263c56;
+  --rdg-border-strong: #3a536e;
+  --rdg-action-primary: #76a9ff;
+  --rdg-action-primary-hover: #9bc2ff;
+  --rdg-action-conversion: var(--rdg-orange-400);
+  --rdg-action-conversion-hover: #fdba74;
+  --rdg-focus: var(--rdg-orange-400);
+  --rdg-soft-blue: #10284a;
+  --rdg-soft-orange: #3a2015;
+  --rdg-shadow-color: rgba(0, 0, 0, 0.36);
+  color-scheme: dark;
+}
+
+html.light,
+html[data-theme='light'] {
+  color-scheme: light;
+}
+
+html[lang='ar'] body {
+  font-family: var(--rdg-font-arabic);
+  line-height: 1.8;
+}
+
+::selection {
+  background: var(--rdg-blue-200);
+  color: var(--rdg-gray-900);
+}
+
+html.dark ::selection,
+html[data-theme='dark'] ::selection {
+  background: var(--rdg-blue-800);
+  color: var(--rdg-gray-25);
+}
+
+:focus-visible {
+  outline: 3px solid var(--rdg-focus);
+  outline-offset: 3px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
+  }
+
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}