/* =========================================================== מי בא — Design tokens (single source of truth) RTL · one file, two scoped themes. Structure: :root → shared primitives (fonts, scales, status, chart, shadows) .theme-app → in-app / dashboard palette (clean SaaS, radius 12px) .theme-landing → marketing + auth palette (festive oklch, radius 22px) Add the matching theme class to : app surfaces → landing / auth → Custom properties inherit, so every var(--x) in app.css / landing.css / driver.css resolves from the theme class on . =========================================================== */ :root { /* ---- typography ---- */ --font-head: 'Rubik', 'Assistant', system-ui, sans-serif; --font-body: 'Assistant', 'Rubik', system-ui, sans-serif; /* type scale */ --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-base: 1rem; --fs-md: 1.0625rem; --fs-lg: 1.25rem; --fs-xl: 1.5rem; --fs-2xl: 2rem; --fs-3xl: 2.5rem; --fw-regular: 400; --fw-medium: 500; --fw-semibold:600; --fw-bold: 700; --fw-black: 800; /* ---- spacing scale (4px base) ---- */ --space-0: 0; --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; /* ---- status colors (RSVP states — shared) ---- */ --status-attending-bg: #dcfce7; --status-attending-fg: #166534; --status-declined-bg: #fee2e2; --status-declined-fg: #991b1b; --status-maybe-bg: #dbeafe; --status-maybe-fg: #1d4ed8; --status-pending-bg: #fef3c7; --status-pending-fg: #92400e; /* ---- chart colors (shared) ---- */ --chart-attending: #22c55e; --chart-declined: #ef4444; --chart-maybe: #3b82f6; --chart-pending: #f59e0b; /* ---- WhatsApp chat (fixed, for message previews — shared) ---- */ --wa-green: #1eb858; --wa-sent: #e3fbd4; --wa-recv: #ffffff; --wa-bg: #efe6da; --wa-tick: #34b7f1; } /* =========================================================== Theme: in-app / dashboard =========================================================== */ .theme-app { --pink: #e91e8c; --pink-light: #fce4ef; --pink-mid: #f8bbd9; --sidebar-w: 220px; --sidebar-bg: #1a1a2e; --sidebar-accent: #e91e8c; --bg: #f5f6fa; --card-bg: #ffffff; --text: #1a1a2e; --text-muted: #7b7f9e; --border: #e8eaf0; --green: #2ecc71; --red: #e74c3c; --orange: #f39c12; --purple: #9b59b6; --radius: 12px; --shadow: 0 2px 12px rgba(0, 0, 0, .06); } /* =========================================================== Theme: landing / auth =========================================================== */ .theme-landing { /* palette */ --bg: oklch(0.984 0.015 40); --bg-warm: oklch(0.965 0.028 45); --surface: oklch(0.998 0.004 60); --ink: oklch(0.29 0.045 350); --ink-soft: oklch(0.47 0.035 350); --ink-faint: oklch(0.62 0.03 350); --rose: oklch(0.66 0.17 6); --rose-deep: oklch(0.55 0.165 10); --peach: oklch(0.86 0.095 62); --peach-soft:oklch(0.94 0.05 62); --coral: oklch(0.74 0.155 33); --line: oklch(0.90 0.02 40); /* WhatsApp chat tokens are shared — see :root */ --radius: 22px; --radius-sm: 14px; --shadow-soft: 0 18px 50px -24px oklch(0.55 0.16 10 / 0.45); --shadow-card: 0 22px 60px -32px oklch(0.4 0.12 350 / 0.4); --maxw: 1180px; }