Spaces:

NathyB
/

ir-studio

Running on Zero

Natnael B. Haile
Cursor
feat: complete IR Studio with Git LFS tracking for all binary assets and NFCorpus index
fbad523 22 days ago
36.4 kB
@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;
}