/* Design tokens for omnexa_experience public web (MVP) */ :root { /* Typography */ --ox-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; --ox-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* Spacing */ --ox-space-0: 0; --ox-space-1: 0.25rem; --ox-space-2: 0.5rem; --ox-space-3: 0.75rem; --ox-space-4: 1rem; --ox-space-5: 1.25rem; --ox-space-6: 1.5rem; --ox-space-8: 2rem; --ox-space-10: 2.5rem; --ox-space-12: 3rem; /* Radius */ --ox-radius-sm: 0.375rem; --ox-radius-md: 0.625rem; --ox-radius-lg: 0.875rem; /* Motion */ --ox-ease-standard: cubic-bezier(0.2, 0, 0, 1); --ox-duration-1: 120ms; --ox-duration-2: 180ms; --ox-duration-3: 240ms; /* Light theme colors */ --ox-bg: #ffffff; --ox-fg: #0f172a; --ox-muted: #475569; --ox-border: #e2e8f0; --ox-surface: #f8fafc; --ox-primary: #2563eb; --ox-primary-contrast: #ffffff; --ox-danger: #dc2626; --ox-warning: #d97706; --ox-success: #16a34a; /* Focus */ --ox-focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.25); /* Optional: --ox-logo-url set by Experience Tenant Theme (logo_url) for custom header / background-image */ } /* Dark mode (optional): enable via */ html[data-theme="dark"] { --ox-bg: #0b1220; --ox-fg: #e5e7eb; --ox-muted: #94a3b8; --ox-border: #1f2a44; --ox-surface: #0f1a30; --ox-primary: #60a5fa; --ox-primary-contrast: #0b1220; --ox-danger: #f87171; --ox-warning: #fbbf24; --ox-success: #34d399; --ox-focus-ring: 0 0 0 3px rgba(96, 165, 250, 0.28); } /* Baseline application of tokens */ html, body { background: var(--ox-bg); color: var(--ox-fg); font-family: var(--ox-font-sans); } /* RTL safety: rely on dir attribute; avoid hardcoded left/right */ [dir="rtl"] * { letter-spacing: normal; }