/* OmanRemit Theme Variables — Light Mode (Default) */ :root { /* Surface colors */ --or-bg-primary: #ffffff; --or-bg-secondary: #f8f9fa; --or-bg-tertiary: #f1f3f5; --or-bg-sidebar: #f8f9fa; --or-bg-rail: #f1f3f5; --or-bg-hover: #e9ecef; --or-bg-active: #e3f2fd; /* Text colors */ --or-text-primary: #212529; --or-text-secondary: #6c757d; --or-text-tertiary: #adb5bd; --or-text-on-primary: #ffffff; /* Brand / accent */ --or-accent: #0d6efd; --or-accent-hover: #0b5ed7; --or-accent-light: #e3f2fd; --or-accent-text: #0d6efd; /* Status colors */ --or-success: #198754; --or-success-bg: #d1e7dd; --or-success-text: #0f5132; --or-warning: #ffc107; --or-warning-bg: #fff3cd; --or-warning-text: #664d03; --or-danger: #dc3545; --or-danger-bg: #f8d7da; --or-danger-text: #842029; --or-info: #0dcaf0; --or-info-bg: #cff4fc; --or-info-text: #055160; --or-compliance-hold: #7b5eae; --or-compliance-hold-bg: #f0ebf8; /* Borders */ --or-border: #dee2e6; --or-border-light: #e9ecef; --or-border-focus: #86b7fe; /* Sidebar (icon rail + flyout panel) — UX-DASHBOARD-SIDEBAR-01. The sidebar has its OWN token set rather than reusing --or-bg-*: it is deliberately dark in both themes so the navigation reads as a distinct, prominent band against the content area. Keeping it tokenised (instead of hardcoding hex in layout.css) is what lets dark mode retain its own, quieter values below. */ --or-sidebar-rail-bg: #101a30; --or-sidebar-panel-bg: #16213a; --or-sidebar-border: rgba(255, 255, 255, 0.09); --or-sidebar-text: #b9c4d6; --or-sidebar-text-strong: #ffffff; --or-sidebar-text-muted: #7f8da6; --or-sidebar-heading: #dbe4f2; --or-sidebar-hover-bg: rgba(255, 255, 255, 0.08); --or-sidebar-active-bg: rgba(96, 165, 250, 0.18); --or-sidebar-accent: #60a5fa; --or-sidebar-shadow: 4px 0 12px rgba(0, 0, 0, 0.18); /* Layout */ --or-rail-width: 56px; --or-panel-width: 216px; --or-topbar-height: 48px; --or-actionbar-height: 48px; /* Radius */ --or-radius-sm: 4px; --or-radius-md: 8px; --or-radius-lg: 12px; /* Shadows */ --or-shadow-sm: 0 1px 2px rgba(0,0,0,0.05); --or-shadow-toast: 0 4px 12px rgba(0,0,0,0.1); /* Transitions */ --or-transition-fast: 0.15s ease; --or-transition-normal: 0.25s ease; } /* Dark Mode — toggled via data-theme="dark" on */ [data-theme="dark"] { --or-bg-primary: #1a1a1e; --or-bg-secondary: #222226; --or-bg-tertiary: #2a2a2e; --or-bg-sidebar: #1e1e22; --or-bg-rail: #18181c; --or-bg-hover: #333338; --or-bg-active: #1a3a5c; --or-text-primary: #e4e4e8; --or-text-secondary: #a0a0a8; --or-text-tertiary: #6c6c74; --or-text-on-primary: #ffffff; --or-accent: #4d9fff; --or-accent-hover: #3d8fef; --or-accent-light: #1a3a5c; --or-accent-text: #6db3ff; --or-success: #2dd36f; --or-success-bg: #1a3a2a; --or-success-text: #6ee7a0; --or-warning: #ffc409; --or-warning-bg: #3a3520; --or-warning-text: #ffe066; --or-danger: #ff4961; --or-danger-bg: #3a1a22; --or-danger-text: #ff8090; --or-info: #50c8ff; --or-info-bg: #1a3040; --or-info-text: #80d8ff; --or-compliance-hold: #b090d0; --or-compliance-hold-bg: #2a2040; --or-border: #3a3a40; --or-border-light: #2e2e34; --or-border-focus: #4d9fff; /* Sidebar — same structure, quieter values so it sits with the dark surfaces rather than glowing blue against them. */ --or-sidebar-rail-bg: #131317; --or-sidebar-panel-bg: #1b1b20; --or-sidebar-border: rgba(255, 255, 255, 0.07); --or-sidebar-text: #b0b0ba; --or-sidebar-text-strong: #f2f2f6; --or-sidebar-text-muted: #7a7a86; --or-sidebar-heading: #d4d4dc; --or-sidebar-hover-bg: rgba(255, 255, 255, 0.07); --or-sidebar-active-bg: rgba(77, 159, 255, 0.16); --or-sidebar-accent: #4d9fff; --or-sidebar-shadow: 4px 0 12px rgba(0, 0, 0, 0.4); --or-shadow-sm: 0 1px 2px rgba(0,0,0,0.3); --or-shadow-toast: 0 4px 12px rgba(0,0,0,0.4); }