/* Dark-mode overrides for color utilities that Preline's compiled CSS
   does not include. These match the visual intent of the corresponding
   light-mode tints, but at low opacity over the dark page so colored
   badges/cards/tints feel native to dark mode and meet WCAG AA contrast. */

/* ===== Tint backgrounds — 15% over dark layer ===== */
.dark .bg-amber-50,
.dark [class*="bg-amber-50/"]   { background-color: rgba(245, 158, 11, 0.12) !important; }
.dark .bg-amber-100             { background-color: rgba(245, 158, 11, 0.20) !important; }
.dark .bg-green-50,
.dark [class*="bg-green-50/"]   { background-color: rgba(34, 197, 94, 0.12) !important; }
.dark .bg-green-100             { background-color: rgba(34, 197, 94, 0.20) !important; }
.dark .bg-sky-50,
.dark [class*="bg-sky-50/"]     { background-color: rgba(14, 165, 233, 0.12) !important; }
.dark .bg-sky-100               { background-color: rgba(14, 165, 233, 0.20) !important; }
.dark .bg-pink-50,
.dark [class*="bg-pink-50/"]    { background-color: rgba(236, 72, 153, 0.12) !important; }
.dark .bg-pink-100              { background-color: rgba(236, 72, 153, 0.20) !important; }
.dark .bg-purple-50,
.dark [class*="bg-purple-50/"]  { background-color: rgba(168, 85, 247, 0.12) !important; }
.dark .bg-purple-100            { background-color: rgba(168, 85, 247, 0.20) !important; }
.dark .bg-orange-50,
.dark [class*="bg-orange-50/"]  { background-color: rgba(249, 115, 22, 0.12) !important; }
.dark .bg-orange-100            { background-color: rgba(249, 115, 22, 0.20) !important; }
.dark .bg-yellow-50,
.dark [class*="bg-yellow-50/"]  { background-color: rgba(234, 179, 8, 0.12) !important; }
.dark .bg-yellow-100            { background-color: rgba(234, 179, 8, 0.20) !important; }
.dark .bg-teal-50,
.dark [class*="bg-teal-50/"]    { background-color: rgba(20, 184, 166, 0.12) !important; }
.dark .bg-teal-100              { background-color: rgba(20, 184, 166, 0.20) !important; }
.dark .bg-emerald-50,
.dark [class*="bg-emerald-50/"] { background-color: rgba(16, 185, 129, 0.12) !important; }
.dark .bg-violet-50,
.dark [class*="bg-violet-50/"]  { background-color: rgba(139, 92, 246, 0.12) !important; }
.dark .bg-indigo-50,
.dark [class*="bg-indigo-50/"]  { background-color: rgba(99, 102, 241, 0.12) !important; }
.dark .bg-rose-50,
.dark [class*="bg-rose-50/"]    { background-color: rgba(244, 63, 94, 0.12) !important; }

/* Primary / Destructive semantic tints — use the dark-overridden token */
.dark .bg-primary-50,
.dark [class*="bg-primary-50/"]    { background-color: color-mix(in srgb, var(--primary) 15%, transparent) !important; }
.dark .bg-primary-100              { background-color: color-mix(in srgb, var(--primary) 22%, transparent) !important; }
.dark .bg-destructive-50,
.dark [class*="bg-destructive-50/"]{ background-color: color-mix(in srgb, var(--destructive) 15%, transparent) !important; }
.dark .bg-destructive-100          { background-color: color-mix(in srgb, var(--destructive) 22%, transparent) !important; }

/* ===== Text colors on colored tints — shift dark text → light text ===== */
.dark .text-amber-700, .dark .text-amber-800  { color: #fcd34d !important; }   /* amber-300 */
.dark .text-amber-900                         { color: #fde68a !important; }   /* amber-200 */
.dark .text-amber-600                         { color: #fbbf24 !important; }   /* amber-400 */
.dark .text-green-700, .dark .text-green-800  { color: #86efac !important; }   /* green-300 */
.dark .text-green-900                         { color: #bbf7d0 !important; }
.dark .text-green-600                         { color: #4ade80 !important; }   /* green-400 */
.dark .text-sky-700, .dark .text-sky-800      { color: #7dd3fc !important; }
.dark .text-sky-900                           { color: #bae6fd !important; }
.dark .text-sky-600                           { color: #38bdf8 !important; }
.dark .text-pink-700, .dark .text-pink-800    { color: #f9a8d4 !important; }
.dark .text-pink-900                          { color: #fbcfe8 !important; }
.dark .text-pink-600                          { color: #ec4899 !important; }
.dark .text-purple-700, .dark .text-purple-800{ color: #d8b4fe !important; }
.dark .text-purple-900                        { color: #e9d5ff !important; }
.dark .text-orange-700, .dark .text-orange-800{ color: #fdba74 !important; }
.dark .text-orange-600                        { color: #fb923c !important; }
.dark .text-yellow-700, .dark .text-yellow-800{ color: #fde047 !important; }
.dark .text-teal-700, .dark .text-teal-800    { color: #5eead4 !important; }
.dark .text-teal-600                          { color: #2dd4bf !important; }
.dark .text-emerald-700, .dark .text-emerald-800 { color: #6ee7b7 !important; }
.dark .text-violet-700, .dark .text-violet-800   { color: #c4b5fd !important; }
.dark .text-indigo-700, .dark .text-indigo-800   { color: #a5b4fc !important; }

/* ===== Borders — soft tinted borders that don't shout in dark mode ===== */
.dark .border-amber-100   { border-color: rgba(180, 83, 9, 0.45) !important; }
.dark .border-amber-200   { border-color: rgba(180, 83, 9, 0.55) !important; }
.dark .border-amber-300   { border-color: rgba(180, 83, 9, 0.70) !important; }
.dark .border-green-100   { border-color: rgba(21, 128, 61, 0.45) !important; }
.dark .border-green-200   { border-color: rgba(21, 128, 61, 0.55) !important; }
.dark .border-green-300   { border-color: rgba(21, 128, 61, 0.70) !important; }
.dark .border-sky-100     { border-color: rgba(3, 105, 161, 0.45) !important; }
.dark .border-sky-200     { border-color: rgba(3, 105, 161, 0.55) !important; }
.dark .border-sky-300     { border-color: rgba(3, 105, 161, 0.70) !important; }
.dark .border-pink-100    { border-color: rgba(190, 24, 93, 0.45) !important; }
.dark .border-pink-200    { border-color: rgba(190, 24, 93, 0.55) !important; }
.dark .border-pink-300    { border-color: rgba(190, 24, 93, 0.70) !important; }
.dark .border-purple-100  { border-color: rgba(126, 34, 206, 0.45) !important; }
.dark .border-purple-200  { border-color: rgba(126, 34, 206, 0.55) !important; }
.dark .border-orange-100  { border-color: rgba(194, 65, 12, 0.45) !important; }
.dark .border-orange-200  { border-color: rgba(194, 65, 12, 0.55) !important; }
.dark .border-yellow-100  { border-color: rgba(161, 98, 7, 0.45) !important; }
.dark .border-yellow-200  { border-color: rgba(161, 98, 7, 0.55) !important; }
.dark .border-teal-100    { border-color: rgba(15, 118, 110, 0.45) !important; }
.dark .border-teal-200    { border-color: rgba(15, 118, 110, 0.55) !important; }
.dark .border-primary-100 { border-color: color-mix(in srgb, var(--primary) 40%, transparent) !important; }
.dark .border-primary-200 { border-color: color-mix(in srgb, var(--primary) 50%, transparent) !important; }
.dark .border-destructive-100 { border-color: color-mix(in srgb, var(--destructive) 40%, transparent) !important; }
.dark .border-destructive-200 { border-color: color-mix(in srgb, var(--destructive) 50%, transparent) !important; }

/* ===== Disabled state bumped up so it remains visible in dark mode ===== */
.dark [disabled].opacity-60,
.dark [disabled].opacity-50 { opacity: 0.8; }

/* ===== Form widget polish (color-scheme already handles native widgets, but extra placeholder contrast) ===== */
.dark input::placeholder,
.dark textarea::placeholder { color: var(--muted-foreground-1, #a3a3a3); }