/** * Theme CSS Variables * Default: Dark Mode * Light Mode: Add 'light-mode' class to */ :root { /* === Core Backgrounds === */ --bg-primary: #1f2330; --bg-secondary: #252936; --bg-tertiary: #1a1d26; --bg-card: #252936; --bg-hover: #2a2f3e; /* === Borders === */ --border-primary: #2f3344; --border-secondary: #3f4455; /* === Text Colors === */ --text-primary: #e2e8f0; --text-secondary: #9ca3af; --text-muted: #6b7280; --text-accent: #a78bfa; /* === Status Colors === */ --color-success: #10b981; --color-warning: #f59e0b; --color-error: #ef4444; --color-info: #3b82f6; /* === Accent Colors === */ --accent-purple: #a855f7; --accent-blue: #3b82f6; --accent-amber: #d4af37; } /* Light Mode Theme */ .light-mode { --bg-primary: #f8fafc; --bg-secondary: #ffffff; --bg-tertiary: #f1f5f9; --bg-card: #ffffff; --bg-hover: #e2e8f0; --border-primary: #e2e8f0; --border-secondary: #cbd5e1; --text-primary: #1e293b; --text-secondary: #475569; --text-muted: #94a3b8; --text-accent: #7c3aed; } /* ============================================ LIGHT MODE - TAILWIND CLASS OVERRIDES ============================================ */ /* Text Colors */ .light-mode .text-gray-200 { color: #1e293b !important; } .light-mode .text-gray-300 { color: #334155 !important; } .light-mode .text-gray-400 { color: #475569 !important; } .light-mode .text-gray-500 { color: #64748b !important; } .light-mode .text-gray-600 { color: #475569 !important; } .light-mode .text-white { color: #0f172a !important; } .light-mode .text-slate-200 { color: #1e293b !important; } .light-mode .text-slate-300 { color: #334155 !important; } .light-mode .text-slate-400 { color: #475569 !important; } /* Hex Background Colors */ .light-mode .bg-\[\#1f2330\] { background-color: #f8fafc !important; } .light-mode .bg-\[\#252936\] { background-color: #ffffff !important; } .light-mode .bg-\[\#161b22\] { background-color: #ffffff !important; } .light-mode .bg-\[\#0e1117\] { background-color: #f1f5f9 !important; } .light-mode .bg-\[\#1a1d26\] { background-color: #f1f5f9 !important; } .light-mode .bg-\[\#2f3344\] { background-color: #e2e8f0 !important; } .light-mode .bg-\[\#111827\] { background-color: #f8fafc !important; } .light-mode .bg-\[\#1f2937\] { background-color: #f1f5f9 !important; } .light-mode .bg-\[\#374151\] { background-color: #e2e8f0 !important; } /* Slate/Gray Backgrounds */ .light-mode .bg-slate-800 { background-color: #f8fafc !important; } .light-mode .bg-slate-900 { background-color: #f1f5f9 !important; } .light-mode .bg-slate-700 { background-color: #ffffff !important; } .light-mode .bg-slate-600 { background-color: #e2e8f0 !important; } .light-mode .bg-gray-800 { background-color: #f8fafc !important; } .light-mode .bg-gray-900 { background-color: #f1f5f9 !important; } .light-mode .bg-gray-700 { background-color: #ffffff !important; } /* Hex Border Colors */ .light-mode .border-\[\#2f3344\] { border-color: #e2e8f0 !important; } .light-mode .border-\[\#3f4455\] { border-color: #cbd5e1 !important; } .light-mode .border-\[\#374151\] { border-color: #cbd5e1 !important; } .light-mode .border-\[\#1f2933\] { border-color: #e2e8f0 !important; } .light-mode .border-slate-700 { border-color: #e2e8f0 !important; } .light-mode .border-slate-600 { border-color: #cbd5e1 !important; } /* Hover States */ .light-mode .hover\:bg-\[\#2f3344\]:hover { background-color: #e2e8f0 !important; } .light-mode .hover\:bg-\[\#1f2937\]:hover { background-color: #e2e8f0 !important; } .light-mode .hover\:bg-\[\#374151\]:hover { background-color: #cbd5e1 !important; } .light-mode .hover\:bg-\[\#2a2f3e\]:hover { background-color: #e2e8f0 !important; } .light-mode .hover\:bg-\[\#3b4154\]:hover { background-color: #cbd5e1 !important; } /* Input/Form Elements */ .light-mode input, .light-mode textarea, .light-mode select { background-color: #ffffff !important; border-color: #e2e8f0 !important; color: #1e293b !important; } .light-mode input::placeholder, .light-mode textarea::placeholder { color: #94a3b8 !important; } /* Scrollbar */ .light-mode .custom-scrollbar::-webkit-scrollbar-thumb { background-color: #cbd5e1 !important; } .light-mode .custom-scrollbar::-webkit-scrollbar-track { background-color: #f1f5f9 !important; } /* Modals/Overlays */ .light-mode .backdrop-blur-md { background-color: rgba(248, 250, 252, 0.95) !important; } /* Shadows */ .light-mode .shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important; } .light-mode .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1) !important; } .light-mode .shadow-inner { box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05) !important; } /* Code/Mono */ .light-mode code, .light-mode .font-mono { background-color: #f1f5f9 !important; color: #334155 !important; } /* Gradient fixes */ .light-mode .from-\[\#1a1510\] { --tw-gradient-from: #fefce8 !important; } /* Remove all animations for instant feedback */ .react-grid-item { transition: none !important; } .react-grid-item.cssTransforms { transition: none !important; } .react-grid-item.react-draggable-dragging { transition: none !important; z-index: 100; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4); } .react-grid-item.resizing { transition: none !important; z-index: 100; } .react-grid-placeholder { transition: none !important; background: rgba(59, 130, 246, 0.15) !important; border: 2px dashed rgba(59, 130, 246, 0.5) !important; border-radius: 8px; } /* Improve resize handle visibility */ .react-resizable-handle { background-color: transparent; border-right: 2px solid rgba(255, 255, 255, 0.2); border-bottom: 2px solid rgba(255, 255, 255, 0.2); } .react-resizable-handle:hover { border-right-color: rgba(59, 130, 246, 0.6); border-bottom-color: rgba(59, 130, 246, 0.6); } /* ============================================ PANEL RESPONSIVE FONT SIZES For future phone/tablet support ============================================ */ :root { /* Panel content font scales */ --panel-font-xs: clamp(8px, 1.5vw, 10px); --panel-font-sm: clamp(10px, 2vw, 12px); --panel-font-base: clamp(12px, 2.5vw, 14px); --panel-font-lg: clamp(14px, 3vw, 18px); --panel-font-xl: clamp(18px, 4vw, 24px); /* Minimum readable panel width */ --panel-min-width: 200px; } /* ============================================ TABLET MODE (768px - 1023px) ============================================ */ @media (max-width: 1023px) and (min-width: 768px) { :root { --grid-cols: 12; --grid-row-height: 40px; --grid-margin: 6px; --drag-handle-height: 36px; } .react-resizable-handle { width: 20px !important; height: 20px !important; } } /* ============================================ MOBILE MODE (< 768px) ============================================ */ @media (max-width: 767px) { :root { --grid-cols: 6; --grid-row-height: 50px; --grid-margin: 4px; --drag-handle-height: 44px; --panel-font-xs: 10px; --panel-font-sm: 12px; --panel-font-base: 14px; --panel-font-lg: 16px; } .expert-sidebar { display: none !important; } .react-resizable-handle { width: 28px !important; height: 28px !important; } .react-grid-layout { height: auto !important; } .react-grid-item { position: relative !important; transform: none !important; width: 100% !important; left: 0 !important; margin-bottom: 8px; } } /* ============================================ TOUCH DEVICE ENHANCEMENTS ============================================ */ @media (hover: none) and (pointer: coarse) { .western-drag-handle, .vedic-drag-handle, .react-draggable-handle { min-height: var(--drag-handle-height); padding: 8px 12px !important; } .react-resizable-handle-se { width: 24px !important; height: 24px !important; } }