/* ============================================================================ * legacy-bridge.css — Maps legacy portal CSS token names to YourProDesk values. * * Reads [data-theme] attribute on to switch between light and dark. * Legacy templates must set * to participate in theme switching. * * Theme preference is set by the customer in their profile page (post-login). * Default for unauthenticated visitors: light theme. * Marketing site: always light (ignores cookie). * ============================================================================ */ /* ============ LIGHT THEME (default) ============ */ :root, html[data-theme="light"] { --bg: #f8f9fb; --surface: #ffffff; --surface2: #f1f3f7; --surface-2: #f1f3f7; --surface-3: #e9ecf2; --text: #0f1117; --muted: #555c70; --text-muted: #555c70; --text-subtle: #8a93a8; --border: #e2e5ec; --border-strong: #d2d6e0; --accent: #3a4cba; --accent-soft-bg: #eef2ff; --accent-text: #3a4cba; --doc-accent: #3a4cba; --bm-accent: #059669; --forms-accent: #7c3aed; --primary-blue: #3a4cba; --primary-purple: #7c3aed; --purple: #7c3aed; --success: #16a34a; --success-green: #16a34a; --warning: #d97706; --danger: #dc2626; --danger-red: #dc2626; --gray-50: #f8f9fb; --gray-200: #e2e5ec; --gray-300: #d2d6e0; --gray-500: #8a93a8; --gray-600: #555c70; --gray-700: #2e3350; --gray-900: #0f1117; --toolbar-h: 56px; --radius: 8px; --radius-lg: 12px; } /* ============ DARK THEME ============ */ html[data-theme="dark"] { --bg: #0f1117; --surface: #1a1d27; --surface2: #22263a; --surface-2: #14171f; --surface-3: #20232e; --text: #e8eaf0; --muted: #7b82a0; --text-muted: #7b82a0; --text-subtle: #6b7080; --border: #2e3350; --border-strong: #3a3f5e; --accent: #4f7cff; --accent-soft-bg: rgba(79, 124, 255, 0.15); --accent-text: #93b4ff; --doc-accent: #4f7cff; --bm-accent: #10b981; --forms-accent: #8b5cf6; --primary-blue: #4f7cff; --primary-purple: #8b5cf6; --purple: #8b5cf6; --success: #10b981; --success-green: #10b981; --warning: #f59e0b; --danger: #ef4444; --danger-red: #ef4444; --gray-50: #1a1d27; --gray-200: #2e3350; --gray-300: #3a3f5e; --gray-500: #6b7080; --gray-600: #7b82a0; --gray-700: #d2d6e0; --gray-900: #e8eaf0; } /* Body default — apply yourprodesk's typography/background. Per-template styles still override these. */ body { font-family: 'Inter', 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; background: var(--bg); color: var(--text); }