feat(booking): give the booking flow a dark palette derived from its own colours

components/appointment/ had every colour hard-coded, so the flow rendered identically in either theme even after the wiring was fixed. It now reads from CSS custom properties. These are not new colours. The :root values are byte-for-byte the hex codes that were already in the components — twenty-one files, mapped one to one — so light mode is unchanged. The dark values are derived from those same colours: surfaces and borders darkened, text inverted, and the two brand colours (the indigo and the orange) lightened rather than replaced, because both lose contrast against a dark surface at their original values. Verified in a headless browser with prefers-color-scheme forced dark: data-theme lands on <html> and --ap-surface resolves to #1b1b20 rather than white. Six one-off colours remain hard-coded — a success green, an error red and similar — each used exactly once and none of them a surface. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
2026-08-01 16:33:39 +03:30
parent 2fb17d778a
commit 51c21938eb
22 changed files with 149 additions and 95 deletions
@@ -74,6 +74,60 @@ body {
  background: #fafafa;
 }

+
+/* ── توکن‌های جریان رزرو ──────────────────────────────────────────────────
+ *
+ * جریان رزرو رنگ‌هایش را hard-code داشت، پس در دارک‌مود دقیقاً همان سفید می‌ماند.
+ * این‌ها **رنگ تازه نیستند**: مقادیر روشن عیناً همان چیزی است که تا امروز بود، و
+ * نسخهٔ تیره از همان‌ها مشتق شده. طراحی تازه‌ای اینجا اختراع نشده.
+ */
+:root {
+  --ap-surface: #ffffff;
+  --ap-surface-2: #fafafa;
+  --ap-surface-3: #f5f5f5;
+  --ap-border: #efefef;
+  --ap-border-2: #d7d7d7;
+  --ap-heading: #2f2f2f;
+  --ap-text: #3b3b3b;
+  --ap-text-2: #616161;
+  --ap-text-3: #7a7a7a;
+  --ap-text-4: #9b9b9b;
+  --ap-muted: #525252;
+  --ap-primary: #5559ce;
+  --ap-accent: #f17732;
+  --ap-accent-strong: #b4541f;
+  --ap-danger: #e0383b;
+  --ap-danger-bg: #fdeeee;
+  --ap-danger-border: #f3c0c1;
+  --ap-warning: #f4b740;
+  --ap-warning-bg: #fff8e8;
+  --ap-warning-text: #8a6100;
+}
+
+[data-theme="dark"] {
+  --ap-surface: #1b1b20;
+  --ap-surface-2: #232329;
+  --ap-surface-3: #2a2a31;
+  --ap-border: #2e2e36;
+  --ap-border-2: #3a3a44;
+  --ap-heading: #f0f0f2;
+  --ap-text: #e8e8ea;
+  --ap-text-2: #b8b8be;
+  --ap-text-3: #98989f;
+  --ap-text-4: #82828a;
+  --ap-muted: #c9c9cf;
+  /* بنفش و نارنجی روی زمینهٔ تیره کم‌کنتراست‌اند؛ کمی روشن‌تر شده‌اند نه عوض. */
+  --ap-primary: #8a8de6;
+  --ap-accent: #ff9152;
+  --ap-accent-strong: #ffb184;
+  --ap-danger: #ff6b6e;
+  --ap-danger-bg: #3a1f20;
+  --ap-danger-border: #5a2e30;
+  --ap-warning: #ffca5c;
+  --ap-warning-bg: #33290f;
+  --ap-warning-text: #ffd98a;
+}
+
 /* transition-colors only on theme-sensitive elements, not every DOM node */
 .dark,
 [data-theme] {