:root { font-family: system-ui, Avenir, Helvetica, Arial, sans-serif; line-height: 1.5; font-weight: 400; color-scheme: light dark; color: rgba(255, 255, 255, 0.87); background-color: #242424; font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ======================================== FOCUS MANAGEMENT Focus outlines are hidden by default for a cleaner UI. When the user enables "Focus Outlines" in Settings > Appearance, the data-focus-outlines="true" attribute is added to , which re-enables keyboard-only focus outlines for accessibility. ======================================== */ /* Hide focus outline globally by default */ *:focus, *:focus-visible { outline: none !important; } /* When accessibility focus outlines are enabled, show them for keyboard nav only */ html[data-focus-outlines="true"] *:focus-visible { outline: 2px solid #2563eb !important; outline-offset: 2px; } /* Even with focus outlines enabled, hide them on mouse click */ html[data-focus-outlines="true"] *:focus:not(:focus-visible) { outline: none !important; } /* ======================================== DARK MODE SCROLLBARS (Global) ======================================== */ /* Dark scrollbar for webkit browsers (Chrome, Safari, Edge) */ * { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.3) rgba(0, 0, 0, 0.1); } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.1); } *::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.3); border-radius: 5px; } *::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.5); } /* Page Builder & Styles Panel specific (extra dark) */ .MuiDrawer-root *::-webkit-scrollbar-track, .MuiDialog-root *::-webkit-scrollbar-track { background: #0a0a0a; } .MuiDrawer-root *::-webkit-scrollbar-thumb, .MuiDialog-root *::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.4); } .MuiDrawer-root *::-webkit-scrollbar-thumb:hover, .MuiDialog-root *::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.6); } a { font-weight: 500; color: #646cff; text-decoration: inherit; } a:hover { color: #535bf2; } body { margin: 0; min-width: 320px; min-height: 100vh; } #root { min-height: 100vh; display: flex; flex-direction: column; } h1 { font-size: 3.2em; line-height: 1.1; } button { border-radius: 8px; border: 1px solid transparent; padding: 0.6em 1.2em; font-size: 1em; font-weight: 500; font-family: inherit; background-color: #1a1a1a; cursor: pointer; transition: border-color 0.25s; } button:hover { border-color: #646cff; } /* Focus outline handled by global focus management rules above */ @media (prefers-color-scheme: light) { :root { color: #213547; background-color: #ffffff; } a:hover { color: #747bff; } button { background-color: #f9f9f9; } } /* React Phone Number Input - MUI Theme Integration */ .PhoneInput { width: 100%; } .PhoneInput input { width: 100%; padding: 16.5px 14px; font-size: 16px; font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif; border-radius: 4px; border: 1px solid rgba(0, 0, 0, 0.23); transition: border-color 0.2s, box-shadow 0.2s; background-color: transparent; color: inherit; } .PhoneInput input:hover { border-color: rgba(0, 0, 0, 0.87); } .PhoneInput input:focus { outline: none; border-color: #1976d2; border-width: 2px; padding: 15.5px 13px; /* Adjust for thicker border */ box-shadow: 0 0 0 1px #1976d2; } .PhoneInput input:disabled { background-color: rgba(0, 0, 0, 0.04); color: rgba(0, 0, 0, 0.38); cursor: not-allowed; } .PhoneInput--focus input { border-color: #1976d2; border-width: 2px; box-shadow: 0 0 0 1px #1976d2; } .PhoneInputCountry { padding: 0 8px; margin-right: 8px; border-right: 1px solid rgba(0, 0, 0, 0.12); } .PhoneInputCountryIcon { width: 24px; height: 18px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); border-radius: 2px; } .PhoneInputCountrySelect { font-size: 16px; background: transparent; border: none; cursor: pointer; padding: 0; margin-left: 4px; } .PhoneInputCountrySelect:focus { outline: none; } /* Notistack Snackbar Positioning - Center top with proper spacing */ .SnackbarContainer-top-center { top: 80px !important; /* Space below header/navigation */ left: 50% !important; transform: translateX(-50%) !important; align-items: center !important; } /* Ensure snackbars don't cover critical buttons */ .SnackbarItem-root { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important; border-radius: 8px !important; max-width: 500px !important; margin: 8px 0 !important; } /* Style the close button in snackbars */ .SnackbarItem-action { margin-right: -8px !important; } /* Tiptap Editor - TTS Marker Highlighting (via MarkerHighlight extension) */ /* Replacement markers: [hello:world] - GREEN */ .marker-replacement { background-color: #e8f5e9; color: #2e7d32; padding: 2px 6px; border-radius: 4px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; font-size: inherit; font-weight: 600; cursor: pointer; user-select: none; transition: all 0.2s ease; border: 1px solid #81c784; display: inline-block; vertical-align: baseline; } .marker-replacement:hover { background-color: #2e7d32; color: white; transform: scale(1.1); } /* Pause markers: [[PAUSE:500]], [pause:1.5] */ .marker-pause { background-color: #fff3e0; color: #e65100; padding: 2px 6px; border-radius: 4px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; font-size: inherit; font-weight: 600; cursor: pointer; user-select: none; transition: all 0.2s ease; border: 1px solid #ffb74d; display: inline-block; vertical-align: baseline; } /* TTS Player Container - Force containment in preview */ #tts-player-preview-slot { position: static !important; display: block !important; width: 100% !important; } /* Force all player children to stay contained */ #tts-player-preview-slot > * { position: relative !important; max-width: 100% !important; } /* Override any absolute/fixed positioning from player */ #tts-player-preview-slot .tts-player-root, #tts-player-preview-slot .tts-container { position: relative !important; width: 100% !important; max-width: 100% !important; } .marker-pause:hover { background-color: #e65100; color: white; transform: scale(1.1); } /* Voice directive markers: [alloy], [voice:echo] - INDIGO */ .marker-voice { background-color: #e8eaf6; color: #3949ab; padding: 2px 6px; border-radius: 4px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; font-size: inherit; font-weight: 600; cursor: pointer; user-select: none; transition: all 0.2s ease; border: 1px solid #9fa8da; display: inline-block; vertical-align: baseline; } .marker-voice:hover { background-color: #3949ab; color: white; transform: scale(1.1); } /* Voice closing tags: [/alloy] - SAME COLOR AS OPENING TAG */ .marker-voice-close { background-color: #e8eaf6; color: #3949ab; padding: 2px 6px; border-radius: 4px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; font-size: inherit; font-weight: 600; cursor: pointer; user-select: none; transition: all 0.2s ease; border: 1px solid #9fa8da; display: inline-block; vertical-align: baseline; } .marker-voice-close:hover { background-color: #3949ab; color: white; transform: scale(1.1); } /* Paired hover state for voice markers */ .marker-voice.voice-marker-paired-hover, .marker-voice-close.voice-marker-paired-hover { background-color: #5c6bc0; color: white; transform: scale(1.05); box-shadow: 0 2px 8px rgba(57, 73, 171, 0.4); } /* Menu markers: [menu:Introduction] - DEEP PURPLE */ .marker-menu { background-color: #f3e5f5; color: #6a1b9a; padding: 2px 6px; border-radius: 4px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; font-size: inherit; font-weight: 600; cursor: pointer; user-select: none; transition: all 0.2s ease; border: 1px solid #ce93d8; display: inline-block; vertical-align: baseline; } .marker-menu:hover { background-color: #6a1b9a; color: white; transform: scale(1.1); } /* Page markers: [page:5] - CYAN */ .marker-page { background-color: #e0f7fa; color: #00695c; padding: 2px 6px; border-radius: 4px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; font-size: inherit; font-weight: 600; cursor: pointer; user-select: none; transition: all 0.2s ease; border: 1px solid #80deea; display: inline-block; vertical-align: baseline; } .marker-page:hover { background-color: #00695c; color: white; transform: scale(1.1); } /* Prosody markers: [PITCH:+20%], [RATE:slow], [VOLUME:loud] - BLUE */ .marker-prosody { background-color: #e3f2fd; color: #1976d2; padding: 2px 6px; border-radius: 4px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; font-size: inherit; font-weight: 600; cursor: pointer; user-select: none; transition: all 0.2s ease; border: 1px solid #90caf9; display: inline-block; vertical-align: baseline; } .marker-prosody:hover { background-color: #1976d2; color: white; transform: scale(1.1); } /* Prosody closing tags: [/PITCH], [/RATE], [/VOLUME] - SAME COLOR */ .marker-prosody-close { background-color: #e3f2fd; color: #1976d2; padding: 2px 6px; border-radius: 4px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; font-size: inherit; font-weight: 600; cursor: pointer; user-select: none; transition: all 0.2s ease; border: 1px solid #90caf9; display: inline-block; vertical-align: baseline; } .marker-prosody-close:hover { background-color: #1976d2; color: white; transform: scale(1.1); } /* Style markers: [STYLE:cheerful], [STYLE:sad] - YELLOW */ .marker-style { background-color: #fffde7; color: #f57c00; padding: 2px 6px; border-radius: 4px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; font-size: inherit; font-weight: 600; cursor: pointer; user-select: none; transition: all 0.2s ease; border: 1px solid #fff59d; display: inline-block; vertical-align: baseline; } .marker-style:hover { background-color: #f57c00; color: white; transform: scale(1.1); } /* Style closing tags: [/STYLE] - SAME COLOR */ .marker-style-close { background-color: #fffde7; color: #f57c00; padding: 2px 6px; border-radius: 4px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; font-size: inherit; font-weight: 600; cursor: pointer; user-select: none; transition: all 0.2s ease; border: 1px solid #fff59d; display: inline-block; vertical-align: baseline; } .marker-style-close:hover { background-color: #f57c00; color: white; transform: scale(1.1); } /* Emphasis markers: [EMPHASIZE:word] - RED */ .marker-emphasis { background-color: #ffebee; color: #c62828; padding: 2px 6px; border-radius: 4px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; font-size: inherit; font-weight: 600; cursor: pointer; user-select: none; transition: all 0.2s ease; border: 1px solid #ef9a9a; display: inline-block; vertical-align: baseline; } .marker-emphasis:hover { background-color: #c62828; color: white; transform: scale(1.1); } /* Dynamic markers: [Organization], [Name] - TEAL (for quiz personalization) */ .marker-dynamic { background-color: #e0f2f1; color: #00695c; padding: 2px 6px; border-radius: 4px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; font-size: inherit; font-weight: 600; cursor: pointer; user-select: none; transition: all 0.2s ease; border: 1px solid #80cbc4; display: inline-block; vertical-align: baseline; } .marker-dynamic:hover { background-color: #00695c; color: white; transform: scale(1.1); } /* No-translate markers: [NO_TRANSLATE:text] - PURPLE (text to preserve during translation) */ .marker-no-translate { background-color: #f3e5f5; color: #7b1fa2; padding: 2px 6px; border-radius: 4px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; font-size: inherit; font-weight: 600; cursor: pointer; user-select: none; transition: all 0.2s ease; border: 1px solid #ce93d8; display: inline-block; vertical-align: baseline; } .marker-no-translate:hover { background-color: #7b1fa2; color: white; transform: scale(1.1); } /* Page builder: dynamic value pill — blue */ .token-dynamic { background-color: #dbeafe; color: #1e40af; padding: 1px 6px; border-radius: 10px; font-size: 0.85em; font-weight: 600; white-space: nowrap; cursor: default; user-select: none; border: 1px solid #93c5fd; display: inline; vertical-align: baseline; } /* Page builder: translation token pill — purple */ .token-i18n { background-color: #ede9fe; color: #5b21b6; padding: 1px 6px; border-radius: 10px; font-size: 0.85em; font-weight: 600; white-space: nowrap; cursor: default; user-select: none; border: 1px solid #c4b5fd; display: inline; vertical-align: baseline; } /* Prevent cursor color from bleeding into markers */ .tiptap-editor-with-markers [class^="marker-"]::selection, .tiptap-editor-with-markers [class*=" marker-"]::selection { background-color: transparent; } /* Make markers visually distinct and prevent text selection within them */ .tiptap-editor-with-markers [class^="marker-"], .tiptap-editor-with-markers [class*=" marker-"] { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; white-space: nowrap; position: relative; } /* TTS Editor Content Styling */ .tts-editor-content { min-height: 300px; padding: 16px; outline: none; font-size: 14px; line-height: 1.6; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; } .tts-editor-content:focus { outline: none; } .tts-editor-content p { margin: 0; margin-bottom: 1em; } .tts-editor-content p:last-child { margin-bottom: 0; } /* Ensure editor content is visible */ .ProseMirror { min-height: 300px; outline: none; } .ProseMirror p.is-editor-empty:first-child::before { content: attr(data-placeholder); float: left; color: #adb5bd; pointer-events: none; height: 0; } margin: 0 1px; } /* Caption visual indicator in editor */ /* Images with captions show a subtle indicator (Option 3: no figcaption in editor, just visual hint) */ .ProseMirror img.editor-image-styled[data-caption]:not([data-caption=""]):after { content: '💬 ' attr(data-caption); display: block; font-size: 0.75rem; color: #666; font-style: italic; text-align: center; padding: 4px 8px; background-color: #f5f5f5; border: 1px dashed #ccc; border-radius: 4px; margin-top: 4px; } /* Images remain clickable */ .ProseMirror img.editor-image-styled { cursor: pointer; } /* ======================================== RESPONSIVE IMAGE BEHAVIOR ======================================== */ /* Mobile: Images drop below text (no float) */ @media (max-width: 768px) { /* Preview/Export mode: figures with images */ figure[style*="float: left"], figure[style*="float: right"] { float: none !important; margin: 16px auto !important; display: block !important; max-width: 100% !important; } /* Standalone floated images */ img[style*="float: left"], img[style*="float: right"] { float: none !important; margin: 16px auto !important; display: block !important; max-width: 100% !important; } /* Picture elements */ picture { display: block; width: 100%; } picture img { width: 100% !important; max-width: 100% !important; } } /* Tablet: Reduce floated image max-width */ @media (min-width: 769px) and (max-width: 1024px) { /* Left-aligned images: appear above text */ figure[style*="float: left"], img[style*="float: left"] { max-width: 50% !important; } /* Right-aligned images: appear below text (default behavior) */ figure[style*="float: right"], img[style*="float: right"] { max-width: 50% !important; } } /* Desktop: Use original sizing */ @media (min-width: 1025px) { /* Full-width images on desktop */ figure[style*="float: none"] img, img[data-align="center"] { max-width: 100%; } } /** * TimingFlow App Theme - CSS Variables * * Global design system with support for dark/light mode. * All components should use these variables instead of hardcoded colors. * * Usage in components: * - MUI sx prop: color: 'var(--text-primary)' * - Regular CSS: color: var(--text-primary); */ :root { /* ============================================================================ * DARK MODE (Default) * ============================================================================ */ /* Primary Brand Colors */ --primary-color: #2196f3; --primary-dark: #1976d2; --primary-light: #42a5f5; --primary-hover-bg: rgba(33, 150, 243, 0.08); /* Text Colors */ --text-primary: #ffffff; --text-secondary: rgba(255, 255, 255, 0.7); --text-disabled: rgba(255, 255, 255, 0.4); --text-on-primary: #ffffff; --text-on-primary-secondary: rgba(255, 255, 255, 0.7); /* Background Colors */ --bg-primary: #121212; --bg-secondary: #1a1a1a; --bg-tertiary: #0a0a0a; /* Database Builder Specific */ --db-sidebar-bg: #0f0f0f; --db-content-bg: #0a0a0a; --db-inspector-bg: #121212; --db-field-bg: transparent; --db-field-hover-bg: rgba(255, 255, 255, 0.03); --db-field-selected-bg: rgba(33, 150, 243, 0.15); /* Input/Form Colors */ --input-bg: #1a1a1a; --input-disabled-bg: #0f0f0f; --label-color: rgba(255, 255, 255, 0.6); /* Border Colors */ --border-color: rgba(255, 255, 255, 0.05); --border-hover-color: rgba(255, 255, 255, 0.2); --border-disabled-color: rgba(255, 255, 255, 0.05); /* Status Colors */ --success-color: #4caf50; --success-bg: rgba(76, 175, 80, 0.1); --success-border: rgba(76, 175, 80, 0.3); --error-color: #f44336; --error-bg: rgba(244, 67, 54, 0.1); --error-border: rgba(244, 67, 54, 0.3); --error-hover-bg: rgba(244, 67, 54, 0.1); --warning-color: #ff9800; --warning-bg: rgba(255, 152, 0, 0.1); --warning-border: rgba(255, 152, 0, 0.3); --info-color: #2196f3; --info-bg: rgba(33, 150, 243, 0.1); --info-border: rgba(33, 150, 243, 0.3); /* Chip Colors */ --chip-required-bg: rgba(255, 255, 255, 0.1); --chip-required-text: rgba(255, 255, 255, 0.7); --chip-unique-bg: rgba(156, 39, 176, 0.3); --chip-unique-text: #e1bee7; --chip-builtin-bg: rgba(255, 255, 255, 0.05); --chip-builtin-text: rgba(255, 255, 255, 0.4); /* Hover States */ --hover-bg: rgba(255, 255, 255, 0.05); /* Shadows */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.3); } /* ============================================================================ * LIGHT MODE * ============================================================================ */ [data-theme="light"] { /* Primary Brand Colors (same) */ --primary-color: #2196f3; --primary-dark: #1565c0; --primary-light: #64b5f6; --primary-hover-bg: rgba(33, 150, 243, 0.08); /* Text Colors */ --text-primary: #1a1a1a; --text-secondary: rgba(0, 0, 0, 0.6); --text-disabled: rgba(0, 0, 0, 0.38); --text-on-primary: #ffffff; --text-on-primary-secondary: rgba(255, 255, 255, 0.7); /* Background Colors */ --bg-primary: #ffffff; --bg-secondary: #f5f5f5; --bg-tertiary: #fafafa; /* Database Builder Specific */ --db-sidebar-bg: #fafafa; --db-content-bg: #ffffff; --db-inspector-bg: #f5f5f5; --db-field-bg: transparent; --db-field-hover-bg: rgba(0, 0, 0, 0.04); --db-field-selected-bg: rgba(33, 150, 243, 0.12); /* Input/Form Colors */ --input-bg: #ffffff; --input-disabled-bg: #f5f5f5; --label-color: rgba(0, 0, 0, 0.6); /* Border Colors */ --border-color: rgba(0, 0, 0, 0.12); --border-hover-color: rgba(0, 0, 0, 0.23); --border-disabled-color: rgba(0, 0, 0, 0.12); /* Status Colors */ --success-color: #2e7d32; --success-bg: rgba(46, 125, 50, 0.08); --success-border: rgba(46, 125, 50, 0.3); --error-color: #d32f2f; --error-bg: rgba(211, 47, 47, 0.08); --error-border: rgba(211, 47, 47, 0.3); --error-hover-bg: rgba(211, 47, 47, 0.08); --warning-color: #ed6c02; --warning-bg: rgba(237, 108, 2, 0.08); --warning-border: rgba(237, 108, 2, 0.3); --info-color: #0288d1; --info-bg: rgba(2, 136, 209, 0.08); --info-border: rgba(2, 136, 209, 0.3); /* Chip Colors */ --chip-required-bg: rgba(0, 0, 0, 0.08); --chip-required-text: rgba(0, 0, 0, 0.87); --chip-unique-bg: rgba(156, 39, 176, 0.12); --chip-unique-text: #7b1fa2; --chip-builtin-bg: rgba(0, 0, 0, 0.04); --chip-builtin-text: rgba(0, 0, 0, 0.6); /* Hover States */ --hover-bg: rgba(0, 0, 0, 0.04); /* Shadows */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1); } /* ============================================================================ * SCROLLBAR STYLING * ============================================================================ */ * { scrollbar-width: thin; scrollbar-color: var(--text-disabled) var(--bg-secondary); } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: var(--bg-secondary); } *::-webkit-scrollbar-thumb { background: var(--text-disabled); border-radius: 5px; } *::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); } /* ============================================================================ * UTILITY CLASSES * ============================================================================ */ .text-primary { color: var(--text-primary) !important; } .text-secondary { color: var(--text-secondary) !important; } .text-disabled { color: var(--text-disabled) !important; } .bg-primary { background-color: var(--bg-primary) !important; } .bg-secondary { background-color: var(--bg-secondary) !important; } .border-color { border-color: var(--border-color) !important; }