/* ═══════════════════════════════════════════════════════════════════════════
   AlienSync — Light Mode Overrides
   This file lives in /public/ so Vite serves it without PostCSS processing.
   It targets Tailwind's generated class names with escaped characters.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── White opacity text → dark equivalents ────────────────────────────── */
html.light .text-white\/95,
html.light .text-white\/90,
html.light .text-white\/80,
html.light .text-white\/70 {
  color: var(--text-primary) !important;
}
html.light .text-white\/60,
html.light .text-white\/55,
html.light .text-white\/50,
html.light .text-white\/45,
html.light .text-white\/40 {
  color: var(--text-secondary) !important;
}
html.light .text-white\/35,
html.light .text-white\/30,
html.light .text-white\/25,
html.light .text-white\/20,
html.light .text-white\/10 {
  color: var(--text-muted) !important;
}

/* ── White opacity backgrounds → surface layers ──────────────────────── */
html.light .bg-white\/\[0\.02\],
html.light .bg-white\/\[0\.03\],
html.light .bg-white\/\[0\.035\],
html.light .bg-white\/\[0\.04\] {
  background-color: var(--bg-surface-0) !important;
}
html.light .bg-white\/5,
html.light .bg-white\/\[0\.05\],
html.light .bg-white\/\[0\.06\],
html.light .bg-white\/\[0\.07\],
html.light .bg-white\/\[0\.08\] {
  background-color: var(--bg-surface-1) !important;
}
html.light .bg-white\/\[0\.1\],
html.light .bg-white\/\[0\.12\],
html.light .bg-white\/10 {
  background-color: var(--bg-surface-2) !important;
}

/* ── Hover backgrounds ────────────────────────────────────────────────── */
html.light .hover\:bg-white\/\[0\.04\]:hover,
html.light .hover\:bg-white\/\[0\.05\]:hover,
html.light .hover\:bg-white\/\[0\.06\]:hover {
  background-color: var(--bg-surface-1) !important;
}
html.light .hover\:bg-white\/\[0\.07\]:hover,
html.light .hover\:bg-white\/\[0\.08\]:hover,
html.light .hover\:bg-white\/\[0\.1\]:hover,
html.light .hover\:bg-white\/10:hover,
html.light .hover\:bg-white\/\[0\.12\]:hover {
  background-color: var(--bg-surface-2) !important;
}

/* ── Hover text ───────────────────────────────────────────────────────── */
html.light .hover\:text-white:hover,
html.light .hover\:text-white\/70:hover {
  color: var(--text-primary) !important;
}

/* ── Green hardcoded borders → themed borders ─────────────────────────── */
html.light .border-green-500\/\[0\.06\],
html.light .border-green-500\/\[0\.08\],
html.light .border-green-500\/5,
html.light .border-green-500\/\[0\.1\],
html.light .border-green-500\/10,
html.light .border-green-500\/\[0\.12\],
html.light .border-green-500\/\[0\.15\],
html.light .border-green-500\/15 {
  border-color: var(--border-default) !important;
}
html.light .border-green-500\/20,
html.light .border-green-500\/25,
html.light .border-green-500\/30 {
  border-color: var(--border-hover) !important;
}
html.light .border-green-500\/40 {
  border-color: var(--border-active) !important;
}
html.light .hover\:border-green-500\/20:hover,
html.light .hover\:border-green-500\/25:hover,
html.light .hover\:border-green-500\/30:hover {
  border-color: var(--border-hover) !important;
}
html.light .hover\:border-green-500\/35:hover {
  border-color: var(--border-active) !important;
}

/* ── White borders ────────────────────────────────────────────────────── */
html.light .border-white\/5,
html.light .border-white\/10,
html.light .border-white\/\[0\.03\],
html.light .border-white\/\[0\.06\] {
  border-color: var(--border-default) !important;
}

/* ── Green text → readable in light ───────────────────────────────────── */
html.light .text-green-400 {
  color: #16a34a !important;
}
html.light .text-green-400\/80 {
  color: rgba(22, 163, 74, 0.8) !important;
}
html.light .text-green-400\/70 {
  color: rgba(22, 163, 74, 0.7) !important;
}
html.light .text-green-400\/60 {
  color: rgba(22, 163, 74, 0.6) !important;
}
html.light .text-green-300 {
  color: #15803d !important;
}
html.light .hover\:text-green-400:hover {
  color: #16a34a !important;
}

/* ── Muted foreground ─────────────────────────────────────────────────── */
html.light .text-muted-foreground {
  color: var(--text-muted) !important;
}
html.light .text-muted-foreground\/50,
html.light .text-muted-foreground\/40,
html.light .text-muted-foreground\/30 {
  color: var(--text-muted) !important;
  opacity: 0.7;
}
html.light .text-muted-foreground\/60,
html.light .text-muted-foreground\/70 {
  color: var(--text-muted) !important;
}

/* ── Foreground ───────────────────────────────────────────────────────── */
html.light .text-foreground {
  color: var(--text-primary) !important;
}

/* ── Hardcoded dark backgrounds ───────────────────────────────────────── */
html.light .bg-\[\#0d1a0d\],
html.light .bg-\[\#0c1f10\] {
  background-color: var(--bg-surface-1) !important;
}
html.light .bg-black\/30,
html.light .bg-black\/70 {
  background-color: rgba(0, 0, 0, 0.06) !important;
}

/* ── Gradient buttons keep white text ─────────────────────────────────── */
html.light [class*="from-green-600"][class*="to-emerald-600"],
html.light [class*="from-green-500"][class*="to-emerald-500"] {
  color: white !important;
}

/* ── Shadows ──────────────────────────────────────────────────────────── */
html.light .shadow-2xl {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
}
html.light .shadow-lg {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
}
html.light .shadow-green-900\/40,
html.light .shadow-green-900\/30,
html.light .shadow-green-500\/10 {
  --tw-shadow-color: rgba(22, 163, 74, 0.06) !important;
}

/* ── Color-specific text fixes ────────────────────────────────────────── */
html.light .text-red-400\/70 {
  color: rgba(220, 38, 38, 0.7) !important;
}
html.light .text-amber-400 {
  color: #d97706 !important;
}
html.light .text-violet-300 {
  color: #7c3aed !important;
}
html.light .text-amber-300 {
  color: #d97706 !important;
}
html.light .text-amber-200\/70 {
  color: rgba(146, 114, 41, 0.9) !important;
}
html.light .text-violet-200\/70 {
  color: rgba(109, 72, 200, 0.9) !important;
}

/* ── Focus rings ──────────────────────────────────────────────────────── */
html.light .focus\:ring-green-500\/30:focus {
  --tw-ring-color: rgba(22, 163, 74, 0.25) !important;
}

/* ── Hover green backgrounds ──────────────────────────────────────────── */
html.light .hover\:bg-green-500\/10:hover {
  background-color: rgba(22, 163, 74, 0.1) !important;
}
html.light .hover\:bg-green-500\/\[0\.02\]:hover,
html.light .hover\:bg-green-500\/\[0\.06\]:hover {
  background-color: rgba(22, 163, 74, 0.06) !important;
}

/* ── Amber backgrounds for light ──────────────────────────────────────── */
html.light .bg-amber-500\/\[0\.06\] {
  background-color: rgba(245, 158, 11, 0.08) !important;
}
html.light .hover\:bg-amber-500\/\[0\.04\]:hover {
  background-color: rgba(245, 158, 11, 0.06) !important;
}

/* ── Green backgrounds for light ──────────────────────────────────────── */
html.light .bg-green-500\/10 {
  background-color: rgba(22, 163, 74, 0.1) !important;
}
html.light .bg-green-500\/5 {
  background-color: rgba(22, 163, 74, 0.05) !important;
}
html.light .bg-green-500\/15 {
  background-color: rgba(22, 163, 74, 0.12) !important;
}
html.light .bg-green-500\/20 {
  background-color: rgba(22, 163, 74, 0.15) !important;
}