@import "tailwindcss"; @theme { --color-zinc-950: #0d0f14; --color-zinc-900: #141720; --color-zinc-850: #1a1e2b; --color-zinc-800: #252b3b; --color-zinc-750: #30374c; --color-zinc-700: #3c455f; --color-zinc-650: #495473; --color-zinc-600: #626d85; --color-zinc-500: #8591a8; --color-zinc-400: #a5b0c4; --color-zinc-300: #c9d2e2; --color-zinc-200: #e2e7f2; --color-zinc-100: #f1f4f9; --color-zinc-50: #ffffff; } :root { color-scheme: dark; /* Surfaces & Neutrals - Softer, calmer dark theme (Linear/GitHub-inspired, reduced eye fatigue) */ --color-zinc-950: #0d0f14; /* canvas background: warm graphite slate instead of pitch void */ --color-zinc-900: #141720; /* primary card surface: calm elevated layer */ --color-zinc-850: #1a1e2b; /* secondary surface / recessed inset */ --color-zinc-800: #252b3b; /* primary card border: subtle, smooth outline */ --color-zinc-750: #30374c; /* secondary/hover border */ --color-zinc-700: #3c455f; /* active/accent border */ --color-zinc-600: #626d85; /* placeholder / muted elements */ --color-zinc-500: #8591a8; /* tertiary / caption text */ --color-zinc-400: #a5b0c4; /* secondary body text */ --color-zinc-300: #c9d2e2; /* primary body text */ --color-zinc-200: #e2e7f2; /* headings */ --color-zinc-100: #f1f4f9; /* high-contrast dark text */ --color-zinc-50: #ffffff; /* Soft Accents - Reduced saturation and glare */ --color-emerald-950: #0a1e16; --color-emerald-900: #0f2d21; --color-emerald-800: #164332; --color-emerald-700: #1e5943; --color-emerald-400: #34d399; --color-emerald-300: #6ee7b7; --color-emerald-200: #a7f3d0; --color-sky-950: #0a1b2d; --color-sky-900: #0f2742; --color-sky-800: #163c65; --color-sky-700: #1f4f84; --color-sky-400: #38bdf8; --color-sky-300: #7dd3fc; --color-sky-200: #bae6fd; --color-purple-950: #181129; --color-purple-900: #23183b; --color-purple-800: #352558; --color-purple-700: #493377; --color-purple-400: #c084fc; --color-purple-300: #d8b4fe; --color-purple-200: #e9d5ff; --color-rose-950: #230d14; --color-rose-900: #33141e; --color-rose-800: #4c1d2c; --color-rose-700: #68263c; --color-rose-400: #fb7185; --color-rose-300: #fda4af; --color-rose-200: #fecdd3; --color-amber-950: #221708; --color-amber-900: #32210b; --color-amber-800: #4a3211; --color-amber-700: #664517; --color-amber-400: #fbbf24; --color-amber-300: #fcd34d; --color-amber-200: #fde68a; --color-cyan-950: #081d23; --color-cyan-900: #0c2b33; --color-cyan-800: #13404c; --color-cyan-700: #1a5666; --color-cyan-400: #22d3ee; --color-cyan-300: #67e8f9; --color-cyan-200: #a5f3fc; } /* Light Theme Variables */ html.light, [data-theme="light"] { color-scheme: light; /* Surfaces & Neutrals - Crisp, distinguishable without hard black borders */ --color-zinc-950: #eef2f6; /* canvas background: architectural light slate workspace */ --color-zinc-900: #ffffff; /* primary card surface: elevated white panel */ --color-zinc-850: #f4f6fa; /* secondary surface / recessed inset / table header */ --color-zinc-800: #cbd5e1; /* primary card border: clear visible slate-300 (never black) */ --color-zinc-750: #94a3b8; /* secondary / interactive border: slate-400 */ --color-zinc-700: #64748b; /* active / accent border: slate-500 */ --color-zinc-650: #475569; /* dark slate border/icon */ --color-zinc-600: #64748b; /* placeholder / muted elements */ --color-zinc-500: #64748b; /* tertiary / caption text */ --color-zinc-400: #475569; /* secondary body text */ --color-zinc-300: #334155; /* primary body text */ --color-zinc-200: #1e293b; /* headings */ --color-zinc-100: #0f172a; /* high-contrast dark text */ --color-zinc-50: #020617; /* Emerald */ --color-emerald-950: #ecfdf5; --color-emerald-900: #d1fae5; --color-emerald-850: #a7f3d0; --color-emerald-800: #a7f3d0; --color-emerald-700: #047857; --color-emerald-400: #059669; --color-emerald-300: #047857; --color-emerald-200: #065f46; /* Sky */ --color-sky-950: #f0f9ff; --color-sky-900: #e0f2fe; --color-sky-850: #bae6fd; --color-sky-800: #bae6fd; --color-sky-700: #0369a1; --color-sky-400: #0284c7; --color-sky-300: #0369a1; --color-sky-200: #075985; /* Purple */ --color-purple-950: #faf5ff; --color-purple-900: #f3e8ff; --color-purple-850: #e9d5ff; --color-purple-800: #d8b4fe; --color-purple-700: #7e22ce; --color-purple-400: #7e22ce; --color-purple-300: #6b21a8; --color-purple-200: #581c87; /* Rose */ --color-rose-950: #fff1f2; --color-rose-900: #ffe4e6; --color-rose-850: #fecdd3; --color-rose-800: #fecdd3; --color-rose-700: #be123c; --color-rose-400: #e11d48; --color-rose-300: #be123c; --color-rose-200: #9f1239; /* Amber */ --color-amber-950: #fffbeb; --color-amber-900: #fef3c7; --color-amber-850: #fde68a; --color-amber-800: #fde68a; --color-amber-700: #b45309; --color-amber-400: #d97706; --color-amber-300: #b45309; --color-amber-200: #92400e; /* Cyan */ --color-cyan-950: #ecfeff; --color-cyan-900: #cffafe; --color-cyan-800: #a5f3fc; --color-cyan-700: #0e7490; --color-cyan-400: #0891b2; --color-cyan-300: #0e7490; --color-cyan-200: #155e75; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background-color: var(--color-zinc-950, #0d0f14); color: var(--color-zinc-200, #e2e7f2); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } html.light body, html.light .h-screen.bg-zinc-950 { background-color: #eef2f6; color: #1e293b; } /* Custom crisp scrollbar */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #27272a; border-radius: 9999px; } ::-webkit-scrollbar-thumb:hover { background: #3f3f46; } /* Light mode crisp scrollbars & selection */ html.light ::-webkit-scrollbar-thumb { background: #cbd5e1; } html.light ::-webkit-scrollbar-thumb:hover { background: #94a3b8; } html.light ::selection { background-color: #e0f2fe; color: #0369a1; } /* Tactile button clicks */ button:active:not(:disabled) { transform: scale(0.985); } /* Smooth transitions for interactive elements */ button, a, input, select, textarea { transition-property: color, background-color, border-color, box-shadow, transform, opacity; transition-duration: 120ms; transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1); } /* Light mode text contrast enhancements */ html.light .text-white { color: #0f172a; } html.light .hover\:text-white:hover { color: #0f172a; } html.light .group:hover .group-hover\:text-white { color: #0f172a; } /* Light mode card elevation & surfaces */ html.light .shadow-2xs { box-shadow: 0 1px 2px 0 rgb(15 23 42 / 0.04); } html.light .shadow-xs { box-shadow: 0 1px 3px 0 rgb(15 23 42 / 0.06), 0 1px 2px -1px rgb(15 23 42 / 0.04); } html.light .shadow-sm { box-shadow: 0 1px 3px 0 rgb(15 23 42 / 0.08), 0 1px 2px -1px rgb(15 23 42 / 0.06); } html.light .shadow-md { box-shadow: 0 4px 6px -1px rgb(15 23 42 / 0.07), 0 2px 4px -2px rgb(15 23 42 / 0.05); } html.light .shadow-2xl { box-shadow: 0 25px 50px -12px rgb(15 23 42 / 0.15); } /* Primary Elevated Card Surfaces in Light Mode (Crisp White on #eef2f6 Canvas) */ html.light .bg-zinc-900, html.light .bg-zinc-900\/90, html.light .bg-zinc-900\/80, html.light .bg-zinc-900\/70, html.light .bg-zinc-900\/60, html.light .bg-zinc-900\/50, html.light .bg-zinc-900\/40, html.light .bg-zinc-900\/30 { background-color: #ffffff; } /* Recessed Inset Surfaces & Sub-Cards in Light Mode (Distinct from outer card) */ html.light .bg-zinc-950:not(.h-screen), html.light .bg-zinc-950\/90:not(.h-screen), html.light .bg-zinc-950\/80:not(.h-screen), html.light .bg-zinc-950\/70:not(.h-screen), html.light .bg-zinc-950\/60:not(.h-screen), html.light .bg-zinc-950\/50:not(.h-screen), html.light .bg-zinc-950\/40:not(.h-screen), html.light .bg-zinc-950\/30:not(.h-screen) { background-color: #f8fafc; } /* Custom Zinc Utilities (Dark Mode Defaults) */ .border-zinc-850 { border-color: #2c3447; } .border-zinc-750 { border-color: #363f57; } .bg-zinc-850 { background-color: #1a1e2b; } .bg-zinc-750 { background-color: #262c3d; } .divide-zinc-850 > :not([hidden]) ~ :not([hidden]) { border-color: #202533; } /* Card and Panel Borders in Light Mode - Clear Soft Architectural Slate (Never Hard Black) */ html.light .border-zinc-800, html.light .border-zinc-800\/90, html.light .border-zinc-800\/80, html.light .border-zinc-800\/60, html.light .border-zinc-800\/40, html.light .border-zinc-900 { border-color: #cbd5e1; /* Slate 300 - clear, smooth, visible contour */ } html.light .border-zinc-300, html.light .border-zinc-300\/90, html.light .border-zinc-300\/80, html.light .border-zinc-300\/60, html.light .border-zinc-300\/40 { border-color: #cbd5e1; /* Slate 300 - consistent clean visible light border */ } html.light .border-zinc-200, html.light .border-zinc-200\/80, html.light .border-zinc-200\/60 { border-color: #e2e8f0; /* Slate 200 - extra light and subtle border */ } html.light .border-zinc-850, html.light .border-zinc-850\/80, html.light .border-zinc-850\/60, html.light .border-zinc-850\/40 { border-color: #cbd5e1; } html.light .border-zinc-750 { border-color: #94a3b8; /* Slate 400 - secondary / interactive outline */ } html.light .border-zinc-700, html.light .border-zinc-700\/80, html.light .border-zinc-700\/60 { border-color: #94a3b8; } html.light .hover\:border-zinc-750:hover, html.light .hover\:border-zinc-700:hover, html.light .hover\:border-zinc-700\/60:hover { border-color: #94a3b8; } html.light .bg-zinc-850 { background-color: #f1f5f9; } html.light .bg-zinc-750 { background-color: #e2e8f0; } html.light .divide-zinc-850 > :not([hidden]) ~ :not([hidden]), html.light .divide-zinc-800 > :not([hidden]) ~ :not([hidden]) { border-color: #e2e8f0; } /* Segmented Control Pill Containers (Header, Arena & Index Inspector) */ html.light nav.bg-zinc-950\/80, html.light .flex.p-0\.5.bg-zinc-950.border.border-zinc-800, html.light .flex.p-1.bg-zinc-950.border.border-zinc-800 { background-color: #e2e8f0; border-color: #cbd5e1; } html.light .bg-zinc-800.text-zinc-100, html.light .bg-zinc-850.text-zinc-100 { background-color: #ffffff; color: #0f172a; border-color: #cbd5e1; box-shadow: 0 1px 3px 0 rgb(15 23 42 / 0.08); } /* Light mode table headers and row hover highlights */ html.light thead.bg-zinc-900, html.light thead.bg-zinc-950 { background-color: #f1f5f9; border-color: #cbd5e1; color: #475569; } html.light tr.hover\:bg-zinc-900\/60:hover, html.light tr.hover\:bg-zinc-900\/50:hover, html.light tr.hover\:bg-zinc-900\/40:hover, html.light tr.hover\:bg-zinc-900:hover, html.light tr.hover\:bg-zinc-950:hover { background-color: #f1f5f9; } /* Form inputs & textareas in light mode */ html.light input:not([type="checkbox"]):not([type="radio"]), html.light textarea, html.light select { background-color: #ffffff !important; border-color: #cbd5e1 !important; color: #0f172a !important; } html.light input:not([type="checkbox"]):not([type="radio"]):focus, html.light textarea:focus, html.light select:focus { background-color: #ffffff !important; border-color: #0284c7 !important; box-shadow: 0 0 0 1px #0284c7 !important; } html.light input::placeholder, html.light textarea::placeholder { color: #94a3b8; } html.light .query-input-divider, [data-theme="light"] .query-input-divider { background-color: #cbd5e1 !important; } /* Light mode header & tab navigation */ html.light header { background-color: rgba(255, 255, 255, 0.95); border-color: #cbd5e1; box-shadow: 0 1px 2px 0 rgb(15 23 42 / 0.03); } html.light footer { background-color: rgba(255, 255, 255, 0.95); border-color: #cbd5e1; } /* Paradigm Badge & Pill Enhancements in Light Mode */ html.light .bg-amber-950\/40, [data-theme="light"] .bg-amber-950\/40 { background-color: #fef3c7; } html.light .border-amber-600\/60, [data-theme="light"] .border-amber-600\/60 { border-color: #f59e0b; } html.light .text-amber-300, [data-theme="light"] .text-amber-300 { color: #92400e; } html.light .bg-sky-950\/40, [data-theme="light"] .bg-sky-950\/40 { background-color: #e0f2fe; } html.light .border-sky-600\/60, [data-theme="light"] .border-sky-600\/60 { border-color: #0284c7; } html.light .text-sky-300, [data-theme="light"] .text-sky-300 { color: #075985; } html.light .bg-purple-950\/40, [data-theme="light"] .bg-purple-950\/40 { background-color: #f3e8ff; } html.light .border-purple-600\/60, [data-theme="light"] .border-purple-600\/60 { border-color: #9333ea; } html.light .text-purple-300, [data-theme="light"] .text-purple-300 { color: #581c87; } html.light .bg-emerald-950\/40, [data-theme="light"] .bg-emerald-950\/40 { background-color: #d1fae5; } html.light .border-emerald-600\/60, [data-theme="light"] .border-emerald-600\/60 { border-color: #059669; } html.light .text-emerald-300, [data-theme="light"] .text-emerald-300 { color: #065f46; } /* ========================================================================== Passage & Document Token Highlight Badges (High-Contrast for Dark & Light) ========================================================================== */ /* Dark Mode Defaults */ .token-highlight, .highlight-badge { display: inline; border-radius: 0.25rem; padding: 0.08rem 0.28rem; font-weight: 500; transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; } .token-highlight-sky, .highlight-badge.highlight-sky { background-color: rgba(14, 165, 233, 0.22); color: #bae6fd; /* sky-200 */ box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.35); } .token-highlight-teal, .highlight-badge.highlight-teal { background-color: rgba(20, 184, 166, 0.2); color: #99f6e4; /* teal-200 */ box-shadow: inset 0 0 0 1px rgba(45, 212, 191, 0.35); } .token-highlight-amber, .highlight-badge.highlight-amber { background-color: rgba(245, 158, 11, 0.22); color: #fde68a; /* amber-200 */ box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.35); } .token-highlight-purple, .highlight-badge.highlight-purple { background-color: rgba(168, 85, 247, 0.22); color: #e9d5ff; /* purple-200 */ box-shadow: inset 0 0 0 1px rgba(192, 132, 252, 0.35); } .token-highlight-emerald, .highlight-badge.highlight-emerald { background-color: rgba(16, 185, 129, 0.22); color: #a7f3d0; /* emerald-200 */ box-shadow: inset 0 0 0 1px rgba(52, 211, 153, 0.35); } /* Light Mode Overrides (Crisp, High-Contrast WCAG AAA Readability on White/Light surfaces) */ html.light .token-highlight, html.light .highlight-badge, [data-theme="light"] .token-highlight, [data-theme="light"] .highlight-badge { font-weight: 600 !important; } html.light .token-highlight-sky, html.light .highlight-badge.highlight-sky, html.light span.highlight-sky, html.light span.token-highlight-sky, [data-theme="light"] .token-highlight-sky, [data-theme="light"] .highlight-badge.highlight-sky, [data-theme="light"] span.highlight-sky, [data-theme="light"] span.token-highlight-sky { background-color: #bae6fd !important; /* sky-200: clear, distinct soft sky background */ color: #0c4a6e !important; /* sky-900: deep rich dark navy blue text (WCAG AAA) */ box-shadow: inset 0 0 0 1px #38bdf8 !important; /* sky-400 border */ font-weight: 600 !important; } html.light .token-highlight-teal, html.light .highlight-badge.highlight-teal, html.light span.highlight-teal, html.light span.token-highlight-teal, [data-theme="light"] .token-highlight-teal, [data-theme="light"] .highlight-badge.highlight-teal, [data-theme="light"] span.highlight-teal, [data-theme="light"] span.token-highlight-teal { background-color: #99f6e4 !important; /* teal-200: clear, distinct soft teal background */ color: #134e4a !important; /* teal-900: deep rich dark teal text (WCAG AAA) */ box-shadow: inset 0 0 0 1px #2dd4bf !important; /* teal-400 border */ font-weight: 600 !important; } html.light .token-highlight-amber, html.light .highlight-badge.highlight-amber, html.light span.highlight-amber, html.light span.token-highlight-amber, [data-theme="light"] .token-highlight-amber, [data-theme="light"] .highlight-badge.highlight-amber, [data-theme="light"] span.highlight-amber, [data-theme="light"] span.token-highlight-amber { background-color: #fde68a !important; /* amber-200 classic highlighter */ color: #78350f !important; /* amber-900: deep readable amber/brown */ box-shadow: inset 0 0 0 1px #f59e0b !important; /* amber-400 border */ font-weight: 600 !important; } html.light .token-highlight-purple, html.light .highlight-badge.highlight-purple, html.light span.highlight-purple, html.light span.token-highlight-purple, [data-theme="light"] .token-highlight-purple, [data-theme="light"] .highlight-badge.highlight-purple, [data-theme="light"] span.highlight-purple, [data-theme="light"] span.token-highlight-purple { background-color: #e9d5ff !important; /* purple-200 */ color: #3b0764 !important; /* purple-950: deep readable royal purple */ box-shadow: inset 0 0 0 1px #c084fc !important; /* purple-400 border */ font-weight: 600 !important; } html.light .token-highlight-emerald, html.light .highlight-badge.highlight-emerald, html.light span.highlight-emerald, html.light span.token-highlight-emerald, [data-theme="light"] .token-highlight-emerald, [data-theme="light"] .highlight-badge.highlight-emerald, [data-theme="light"] span.highlight-emerald, [data-theme="light"] span.token-highlight-emerald { background-color: #a7f3d0 !important; /* emerald-200 */ color: #064e3b !important; /* emerald-950: deep readable forest green */ box-shadow: inset 0 0 0 1px #34d399 !important; /* emerald-400 border */ font-weight: 600 !important; } /* ========================================================================== SPLADE Neural Callout & Filter Control Dedicated Styles Ensures WCAG AAA contrast and immunity to theme variable inversions ========================================================================== */ /* Formula Box: Mathematical Log-Sat-ReLU Max-Pooling Callout */ .splade-formula-callout { background-color: #ffffff !important; color: #3b0764 !important; /* Deep readable royal purple */ border: 1px solid #c084fc !important; } html.dark .splade-formula-callout, [data-theme="dark"] .splade-formula-callout { background-color: rgba(24, 17, 41, 0.85) !important; color: #f3e8ff !important; border: 1px solid rgba(147, 51, 234, 0.45) !important; } /* SPLADE Filter Buttons - Light Theme */ html.light .splade-filter-btn-active, [data-theme="light"] .splade-filter-btn-active { background-color: #6b21a8 !important; /* Rich deep purple */ color: #ffffff !important; /* Pure white on deep purple: WCAG AAA 7.5:1 */ border-color: #581c87 !important; font-weight: 600 !important; box-shadow: 0 1px 2px rgba(107, 33, 168, 0.25) !important; } html.light .splade-filter-btn-inactive, [data-theme="light"] .splade-filter-btn-inactive { background-color: #ffffff !important; /* Crisp white card */ color: #334155 !important; /* Slate-700: high-contrast, perfectly visible text */ border-color: #cbd5e1 !important; /* Slate-300 clean visible outline */ font-weight: 500 !important; } html.light .splade-filter-btn-inactive:hover, [data-theme="light"] .splade-filter-btn-inactive:hover { background-color: #f8fafc !important; color: #0f172a !important; /* Slate-900 */ border-color: #94a3b8 !important; } /* SPLADE Filter Buttons - Dark Theme */ .splade-filter-btn-active { background-color: rgba(107, 33, 168, 0.5); color: #f3e8ff; border-color: #a855f7; font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } .splade-filter-btn-inactive { background-color: #0d0f14; color: #a5b0c4; border-color: #252b3b; font-weight: 500; } .splade-filter-btn-inactive:hover { background-color: #141720; color: #f1f4f9; border-color: #3c455f; } /* ========================================================================== Global Light-Mode Text Contrast Utilities Fixes washed-out / non-contrasting pale text (text-*-100 to text-*-950) ========================================================================== */ /* Sky / Blue */ html.light .text-sky-50, html.light [class*="text-sky-50"], [data-theme="light"] .text-sky-50, [data-theme="light"] [class*="text-sky-50"], html.light .text-sky-100, html.light [class*="text-sky-100"], [data-theme="light"] .text-sky-100, [data-theme="light"] [class*="text-sky-100"] { color: #082f49 !important; /* sky-950 */ } html.light .text-sky-200, html.light [class*="text-sky-200"], [data-theme="light"] .text-sky-200, [data-theme="light"] [class*="text-sky-200"] { color: #0c4a6e !important; /* sky-900 */ } html.light .text-sky-300, html.light [class*="text-sky-300"], [data-theme="light"] .text-sky-300, [data-theme="light"] [class*="text-sky-300"] { color: #0369a1 !important; /* sky-700 */ } html.light .text-sky-400, html.light [class*="text-sky-400"], [data-theme="light"] .text-sky-400, [data-theme="light"] [class*="text-sky-400"] { color: #0284c7 !important; /* sky-600 */ } html.light .text-sky-500, html.light [class*="text-sky-500"], [data-theme="light"] .text-sky-500, [data-theme="light"] [class*="text-sky-500"] { color: #0369a1 !important; /* sky-700 */ } html.light .text-sky-700, html.light [class*="text-sky-700"], [data-theme="light"] .text-sky-700, [data-theme="light"] [class*="text-sky-700"], html.light .text-sky-800, html.light [class*="text-sky-800"], [data-theme="light"] .text-sky-800, [data-theme="light"] [class*="text-sky-800"] { color: #075985 !important; /* sky-800 */ } html.light .text-sky-900, html.light [class*="text-sky-900"], [data-theme="light"] .text-sky-900, [data-theme="light"] [class*="text-sky-900"], html.light .text-sky-950, html.light [class*="text-sky-950"], [data-theme="light"] .text-sky-950, [data-theme="light"] [class*="text-sky-950"] { color: #082f49 !important; /* deep navy */ } /* Teal / Cyan */ html.light .text-teal-50, html.light [class*="text-teal-50"], [data-theme="light"] .text-teal-50, [data-theme="light"] [class*="text-teal-50"], html.light .text-teal-100, html.light [class*="text-teal-100"], [data-theme="light"] .text-teal-100, [data-theme="light"] [class*="text-teal-100"] { color: #042f2e !important; /* teal-950 */ } html.light .text-teal-200, html.light [class*="text-teal-200"], [data-theme="light"] .text-teal-200, [data-theme="light"] [class*="text-teal-200"] { color: #134e4a !important; /* teal-900 */ } html.light .text-teal-300, html.light [class*="text-teal-300"], [data-theme="light"] .text-teal-300, [data-theme="light"] [class*="text-teal-300"] { color: #0f766e !important; /* teal-700 */ } html.light .text-teal-400, html.light [class*="text-teal-400"], [data-theme="light"] .text-teal-400, [data-theme="light"] [class*="text-teal-400"] { color: #0d9488 !important; /* teal-600 */ } html.light .text-teal-900, html.light [class*="text-teal-900"], [data-theme="light"] .text-teal-900, [data-theme="light"] [class*="text-teal-900"], html.light .text-teal-950, html.light [class*="text-teal-950"], [data-theme="light"] .text-teal-950, [data-theme="light"] [class*="text-teal-950"] { color: #042f2e !important; /* deep teal */ } html.light .text-cyan-50, html.light [class*="text-cyan-50"], [data-theme="light"] .text-cyan-50, [data-theme="light"] [class*="text-cyan-50"], html.light .text-cyan-100, html.light [class*="text-cyan-100"], [data-theme="light"] .text-cyan-100, [data-theme="light"] [class*="text-cyan-100"] { color: #083344 !important; /* cyan-950 */ } html.light .text-cyan-200, html.light [class*="text-cyan-200"], [data-theme="light"] .text-cyan-200, [data-theme="light"] [class*="text-cyan-200"] { color: #164e63 !important; /* cyan-900 */ } html.light .text-cyan-300, html.light [class*="text-cyan-300"], [data-theme="light"] .text-cyan-300, [data-theme="light"] [class*="text-cyan-300"] { color: #0e7490 !important; /* cyan-700 */ } html.light .text-cyan-400, html.light [class*="text-cyan-400"], [data-theme="light"] .text-cyan-400, [data-theme="light"] [class*="text-cyan-400"] { color: #0891b2 !important; /* cyan-600 */ } html.light .text-cyan-900, html.light [class*="text-cyan-900"], [data-theme="light"] .text-cyan-900, [data-theme="light"] [class*="text-cyan-900"], html.light .text-cyan-950, html.light [class*="text-cyan-950"], [data-theme="light"] .text-cyan-950, [data-theme="light"] [class*="text-cyan-950"] { color: #083344 !important; /* deep cyan */ } /* Amber / Yellow */ html.light .text-amber-50, html.light [class*="text-amber-50"], [data-theme="light"] .text-amber-50, [data-theme="light"] [class*="text-amber-50"], html.light .text-amber-100, html.light [class*="text-amber-100"], [data-theme="light"] .text-amber-100, [data-theme="light"] [class*="text-amber-100"] { color: #451a03 !important; /* amber-950 */ } html.light .text-amber-200, html.light [class*="text-amber-200"], [data-theme="light"] .text-amber-200, [data-theme="light"] [class*="text-amber-200"] { color: #78350f !important; /* amber-900 */ } html.light .text-amber-300, html.light [class*="text-amber-300"], [data-theme="light"] .text-amber-300, [data-theme="light"] [class*="text-amber-300"] { color: #92400e !important; /* amber-800 */ } html.light .text-amber-400, html.light [class*="text-amber-400"], [data-theme="light"] .text-amber-400, [data-theme="light"] [class*="text-amber-400"] { color: #b45309 !important; /* amber-700 */ } html.light .text-amber-800, html.light [class*="text-amber-800"], [data-theme="light"] .text-amber-800, [data-theme="light"] [class*="text-amber-800"], html.light .text-amber-900, html.light [class*="text-amber-900"], [data-theme="light"] .text-amber-900, [data-theme="light"] [class*="text-amber-900"], html.light .text-amber-950, html.light [class*="text-amber-950"], [data-theme="light"] .text-amber-950, [data-theme="light"] [class*="text-amber-950"] { color: #451a03 !important; /* deep amber */ } /* Purple */ html.light .text-purple-50, html.light [class*="text-purple-50"], [data-theme="light"] .text-purple-50, [data-theme="light"] [class*="text-purple-50"], html.light .text-purple-100, html.light [class*="text-purple-100"], [data-theme="light"] .text-purple-100, [data-theme="light"] [class*="text-purple-100"] { color: #3b0764 !important; /* purple-950 */ } html.light .text-purple-200, html.light [class*="text-purple-200"], [data-theme="light"] .text-purple-200, [data-theme="light"] [class*="text-purple-200"] { color: #4a044e !important; /* deep dark purple */ } html.light .text-purple-300, html.light [class*="text-purple-300"], [data-theme="light"] .text-purple-300, [data-theme="light"] [class*="text-purple-300"] { color: #581c87 !important; /* purple-900 */ } html.light .text-purple-400, html.light [class*="text-purple-400"], [data-theme="light"] .text-purple-400, [data-theme="light"] [class*="text-purple-400"] { color: #6b21a8 !important; /* purple-800 */ } html.light .text-purple-500, html.light [class*="text-purple-500"], [data-theme="light"] .text-purple-500, [data-theme="light"] [class*="text-purple-500"], html.light .text-purple-600, html.light [class*="text-purple-600"], [data-theme="light"] .text-purple-600, [data-theme="light"] [class*="text-purple-600"] { color: #7e22ce !important; /* purple-700 */ } html.light .text-purple-700, html.light [class*="text-purple-700"], [data-theme="light"] .text-purple-700, [data-theme="light"] [class*="text-purple-700"], html.light .text-purple-800, html.light [class*="text-purple-800"], [data-theme="light"] .text-purple-800, [data-theme="light"] [class*="text-purple-800"] { color: #581c87 !important; /* purple-900 */ } html.light .text-purple-900, html.light [class*="text-purple-900"], [data-theme="light"] .text-purple-900, [data-theme="light"] [class*="text-purple-900"], html.light .text-purple-950, html.light [class*="text-purple-950"], [data-theme="light"] .text-purple-950, [data-theme="light"] [class*="text-purple-950"] { color: #3b0764 !important; /* extremely dark crisp purple */ } /* Emerald / Green */ html.light .text-emerald-50, html.light [class*="text-emerald-50"], [data-theme="light"] .text-emerald-50, [data-theme="light"] [class*="text-emerald-50"], html.light .text-emerald-100, html.light [class*="text-emerald-100"], [data-theme="light"] .text-emerald-100, [data-theme="light"] [class*="text-emerald-100"] { color: #022c22 !important; /* emerald-950 */ } html.light .text-emerald-200, html.light [class*="text-emerald-200"], [data-theme="light"] .text-emerald-200, [data-theme="light"] [class*="text-emerald-200"] { color: #065f46 !important; /* emerald-800 */ } html.light .text-emerald-300, html.light [class*="text-emerald-300"], [data-theme="light"] .text-emerald-300, [data-theme="light"] [class*="text-emerald-300"] { color: #047857 !important; /* emerald-700 */ } html.light .text-emerald-400, html.light [class*="text-emerald-400"], [data-theme="light"] .text-emerald-400, [data-theme="light"] [class*="text-emerald-400"] { color: #059669 !important; /* emerald-600 */ } html.light .text-emerald-800, html.light [class*="text-emerald-800"], [data-theme="light"] .text-emerald-800, [data-theme="light"] [class*="text-emerald-800"], html.light .text-emerald-900, html.light [class*="text-emerald-900"], [data-theme="light"] .text-emerald-900, [data-theme="light"] [class*="text-emerald-900"], html.light .text-emerald-950, html.light [class*="text-emerald-950"], [data-theme="light"] .text-emerald-950, [data-theme="light"] [class*="text-emerald-950"] { color: #022c22 !important; /* deep forest green */ } /* Rose / Red */ html.light .text-rose-50, html.light [class*="text-rose-50"], [data-theme="light"] .text-rose-50, [data-theme="light"] [class*="text-rose-50"], html.light .text-rose-100, html.light [class*="text-rose-100"], [data-theme="light"] .text-rose-100, [data-theme="light"] [class*="text-rose-100"] { color: #4c0519 !important; /* rose-950 */ } html.light .text-rose-200, html.light [class*="text-rose-200"], [data-theme="light"] .text-rose-200, [data-theme="light"] [class*="text-rose-200"] { color: #881337 !important; /* rose-900 */ } html.light .text-rose-300, html.light [class*="text-rose-300"], [data-theme="light"] .text-rose-300, [data-theme="light"] [class*="text-rose-300"] { color: #be123c !important; /* rose-700 */ } html.light .text-rose-400, html.light [class*="text-rose-400"], [data-theme="light"] .text-rose-400, [data-theme="light"] [class*="text-rose-400"] { color: #e11d48 !important; /* rose-600 */ } html.light .text-rose-800, html.light [class*="text-rose-800"], [data-theme="light"] .text-rose-800, [data-theme="light"] [class*="text-rose-800"], html.light .text-rose-900, html.light [class*="text-rose-900"], [data-theme="light"] .text-rose-900, [data-theme="light"] [class*="text-rose-900"], html.light .text-rose-950, html.light [class*="text-rose-950"], [data-theme="light"] .text-rose-950, [data-theme="light"] [class*="text-rose-950"] { color: #4c0519 !important; /* deep rose */ } /* ========================================================================== Light Mode Background & Border Highlight Overrides ========================================================================== */ /* Sky Backgrounds */ html.light .bg-sky-400\/15, html.light [class*="bg-sky-400/15"], html.light .bg-sky-500\/10, html.light [class*="bg-sky-500/10"], html.light .bg-sky-500\/20, html.light [class*="bg-sky-500/20"], html.light .bg-sky-950, html.light .bg-sky-950\/60, html.light .bg-sky-950\/80, [data-theme="light"] .bg-sky-400\/15, [data-theme="light"] [class*="bg-sky-400/15"], [data-theme="light"] .bg-sky-500\/10, [data-theme="light"] [class*="bg-sky-500/10"], [data-theme="light"] .bg-sky-950 { background-color: #e0f2fe !important; } /* Teal Backgrounds */ html.light .bg-teal-400\/10, html.light [class*="bg-teal-400/10"], html.light .bg-teal-500\/10, html.light [class*="bg-teal-500/10"], html.light .bg-teal-500\/20, html.light [class*="bg-teal-500/20"], html.light .bg-teal-950, [data-theme="light"] .bg-teal-400\/10, [data-theme="light"] [class*="bg-teal-400/10"], [data-theme="light"] .bg-teal-500\/10, [data-theme="light"] [class*="bg-teal-500/10"] { background-color: #ccfbf1 !important; } /* Amber Backgrounds */ html.light .bg-amber-400\/15, html.light .bg-amber-400\/20, html.light [class*="bg-amber-400/15"], html.light [class*="bg-amber-400/20"], html.light .bg-amber-500\/10, html.light [class*="bg-amber-500/10"], html.light .bg-amber-500\/20, html.light [class*="bg-amber-500/20"], html.light .bg-amber-950, [data-theme="light"] .bg-amber-400\/15, [data-theme="light"] [class*="bg-amber-400/15"], [data-theme="light"] .bg-amber-500\/10, [data-theme="light"] [class*="bg-amber-500/10"] { background-color: #fef3c7 !important; } /* Purple Backgrounds */ html.light .bg-purple-400\/15, html.light .bg-purple-400\/10, html.light [class*="bg-purple-400/15"], html.light [class*="bg-purple-400/10"], html.light .bg-purple-500\/10, html.light [class*="bg-purple-500/10"], html.light .bg-purple-500\/20, html.light [class*="bg-purple-500/20"], html.light .bg-purple-950, html.light .bg-purple-950\/50, html.light .bg-purple-950\/60, [data-theme="light"] .bg-purple-400\/15, [data-theme="light"] [class*="bg-purple-400/15"], [data-theme="light"] .bg-purple-500\/10, [data-theme="light"] [class*="bg-purple-500/10"] { background-color: #f3e8ff !important; } /* Emerald Backgrounds */ html.light .bg-emerald-400\/15, html.light [class*="bg-emerald-400/15"], html.light .bg-emerald-500\/10, html.light [class*="bg-emerald-500/10"], html.light .bg-emerald-500\/20, html.light [class*="bg-emerald-500/20"], html.light .bg-emerald-950, html.light .bg-emerald-950\/60, html.light .bg-emerald-950\/70, html.light .bg-emerald-950\/80, [data-theme="light"] .bg-emerald-400\/15, [data-theme="light"] [class*="bg-emerald-400/15"], [data-theme="light"] .bg-emerald-500\/10, [data-theme="light"] [class*="bg-emerald-500/10"] { background-color: #d1fae5 !important; } /* Cyan Backgrounds */ html.light .bg-cyan-500\/10, html.light [class*="bg-cyan-500/10"], [data-theme="light"] .bg-cyan-500\/10 { background-color: #cffafe !important; } /* Rose Backgrounds */ html.light .bg-rose-500\/10, html.light [class*="bg-rose-500/10"], [data-theme="light"] .bg-rose-500\/10 { background-color: #ffe4e6 !important; } /* Borders in Light Mode */ html.light .border-sky-500\/30, html.light .border-sky-500\/25, html.light .border-sky-500\/20, html.light .border-sky-500\/50, html.light .border-sky-700\/80, html.light .border-sky-800\/60, [data-theme="light"] .border-sky-500\/30, [data-theme="light"] .border-sky-700\/80 { border-color: #7dd3fc !important; } html.light .border-amber-500\/30, html.light .border-amber-500\/25, html.light .border-amber-500\/20, html.light .border-amber-500\/50, html.light .border-amber-700\/80, html.light .border-amber-400\/30, [data-theme="light"] .border-amber-500\/30, [data-theme="light"] .border-amber-700\/80 { border-color: #fcd34d !important; } html.light .border-purple-500\/30, html.light .border-purple-500\/25, html.light .border-purple-500\/20, html.light .border-purple-500\/50, html.light .border-purple-700\/80, html.light .border-purple-800\/60, [data-theme="light"] .border-purple-500\/30, [data-theme="light"] .border-purple-800\/60 { border-color: #d8b4fe !important; } html.light .border-emerald-500\/30, html.light .border-emerald-500\/25, html.light .border-emerald-500\/20, html.light .border-emerald-500\/50, html.light .border-emerald-700\/80, html.light .border-emerald-800\/60, html.light .border-emerald-800\/40, [data-theme="light"] .border-emerald-500\/30, [data-theme="light"] .border-emerald-700\/80 { border-color: #6ee7b7 !important; } html.light .border-cyan-500\/50, html.light .border-cyan-500\/30, [data-theme="light"] .border-cyan-500\/50 { border-color: #67e8f9 !important; } html.light .border-teal-500\/30, html.light .border-teal-500\/25, [data-theme="light"] .border-teal-500\/30 { border-color: #5eead4 !important; }