/* OVEVPN emergency contrast guard, 2026-06-06.
   Root cause: the React app can put html.light on pages while many
   components still use hard-coded text-white / text-dark-* utility classes.
   That remapped dark surfaces to champagne/light colors, leaving white text
   on light cards. Until the source app is rebuilt with semantic tokens, keep
   the public cabinet in the approved dark OVEVPN theme and strengthen muted text. */
html.light,
html.light body,
html.light #root {
  color-scheme: dark !important;
  background: #05070d !important;
  color: #f7f8ff !important;
}
html.light {
  --color-dark-50: 248, 250, 252 !important;
  --color-dark-100: 241, 245, 249 !important;
  --color-dark-200: 226, 232, 240 !important;
  --color-dark-300: 203, 213, 225 !important;
  --color-dark-400: 148, 163, 184 !important;
  --color-dark-500: 100, 116, 139 !important;
  --color-dark-600: 71, 85, 105 !important;
  --color-dark-700: 51, 65, 85 !important;
  --color-dark-800: 30, 41, 59 !important;
  --color-dark-850: 23, 32, 51 !important;
  --color-dark-900: 15, 23, 42 !important;
  --color-dark-950: 10, 15, 26 !important;
}
html.light body:before {
  background: radial-gradient(circle at 20% 10%, rgba(108,99,255,.36), transparent 28%),
              radial-gradient(circle at 86% 18%, rgba(70,214,255,.22), transparent 24%),
              radial-gradient(circle at 62% 90%, rgba(46,229,157,.14), transparent 28%),
              linear-gradient(180deg, #05070d, #070a12 38%, #03040a) !important;
  opacity: 1 !important;
}
/* Keep cards/buttons dark even if app toggles light class after load. */
html.light .card,
html.light [class*="bg-dark-700"],
html.light [class*="bg-dark-800"],
html.light [class*="bg-dark-850"],
html.light [class*="bg-dark-900"],
html.light [class*="bg-dark-950"] {
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.045)) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: #f7f8ff !important;
}
html.light [class*="text-dark-50"],
html.light [class*="text-dark-100"],
html.light [class*="text-dark-200"],
html.light .text-white {
  color: #f7f8ff !important;
}
html.light [class*="text-dark-300"],
html.light [class*="text-dark-400"],
html.light [class*="text-dark-500"],
html.light .text-gray-400,
html.light .text-gray-500 {
  color: #c8d0e3 !important;
}
/* Real white utility backgrounds are intentionally used for QR blocks; keep readable text dark inside them. */
html.light .bg-white,
html.light [class*="bg-white"]:not([class*="bg-white/"]) {
  color: #0f172a !important;
}
html.light .bg-white [class*="text-dark-"],
html.light [class*="bg-white"]:not([class*="bg-white/"]) [class*="text-dark-"] {
  color: #0f172a !important;
}


/* 2026-06-06: subscription detail uses inline light-mode glass styles from JS.
   Override those inline light card backgrounds too, otherwise white text remains
   on pale champagne/gray panels when html.light is active. */
html.light [style*="rgba(255,255,255,0.95)"],
html.light [style*="rgba(255,255,255,0.88)"],
html.light [style*="rgba(255,255,255, 0.95)"],
html.light [style*="rgba(255,255,255, 0.88)"],
html.light [class*="bg-champagne-200"],
html.light [class*="bg-champagne-300"],
html.light [class*="border-champagne"] {
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.045)) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: #f7f8ff !important;
}
html.light [class*="text-champagne-"],
html.light [class*="bg-champagne-"] [class*="text-dark-"],
html.light [class*="border-champagne"] [class*="text-dark-"] {
  color: #f7f8ff !important;
}