/* VelvetLux90 v8.16 - Night mode contrast pass
   Scope: visual color overrides only. Layout, typography, imagery and component structure are unchanged. */

/* Night palette: preserve Velvet wine/rose/gold identity with readable contrast. */
.dark {
  --vl-night-bg: #24131a;
  --vl-night-surface: #321b24;
  --vl-night-surface-2: #3a202a;
  --vl-night-surface-3: #442733;
  --vl-night-text: #fff7fa;
  --vl-night-text-soft: #e7cbd4;
  --vl-night-text-muted: #d3aebb;
  --vl-night-rose: #efb2c4;
  --vl-night-rose-strong: #e39bb2;
  --vl-night-gold: #d9b97d;
  --vl-night-border: rgba(217,185,125,.34);
  --background: var(--vl-night-bg);
  --foreground: var(--vl-night-text);
  --card: var(--vl-night-surface);
  --card-foreground: var(--vl-night-text);
  --popover: var(--vl-night-surface-2);
  --popover-foreground: var(--vl-night-text);
  --secondary: var(--vl-night-surface-2);
  --secondary-foreground: var(--vl-night-text);
  --muted: #40242f;
  --muted-foreground: var(--vl-night-text-muted);
  --accent: var(--vl-night-surface-3);
  --accent-foreground: var(--vl-night-text);
  --border: rgba(244,211,221,.20);
  --input: rgba(244,211,221,.24);
  --ring: var(--vl-night-rose-strong);
}

.dark body,
.dark .bg-background {
  background-color: var(--vl-night-bg);
  color: var(--vl-night-text);
}

/* Sections that are intentionally pale in light mode become wine/satin dark panels. */
.dark .vl-satin-quartz {
  background:
    radial-gradient(90% 70% at 12% 8%, rgba(180,87,119,.16), transparent 58%),
    radial-gradient(70% 65% at 92% 92%, rgba(217,185,125,.08), transparent 60%),
    linear-gradient(160deg, #2d1821, #24131a 58%, #2b1720);
  color: var(--vl-night-text);
}

/* Light cards are the main source of unreadable text in night mode. */
.dark .vl-card-light,
.dark .vl-section-card {
  background: linear-gradient(160deg, var(--vl-night-surface-2), var(--vl-night-surface));
  color: var(--vl-night-text);
  border-color: var(--vl-night-border);
  box-shadow: 0 18px 46px rgba(10,4,7,.30);
}

.dark .vl-card-light:hover,
.dark .vl-section-card:hover {
  border-color: rgba(217,185,125,.62);
  box-shadow: 0 22px 52px rgba(10,4,7,.42), 0 0 0 1px rgba(217,185,125,.20);
}

.dark .vl-section-card .vl-card-fade {
  background: linear-gradient(transparent, var(--vl-night-surface-2) 82%);
}

/* White utility surfaces used by forms, game results and community controls. */
.dark .bg-white {
  background-color: var(--vl-night-surface-2) !important;
  color: var(--vl-night-text);
}
.dark .bg-white\/60 { background-color: rgba(58,32,42,.82) !important; }
.dark .bg-white\/70 { background-color: rgba(58,32,42,.88) !important; }
.dark .bg-white\/80 { background-color: rgba(58,32,42,.94) !important; }

/* Pale generated-result gradients in Games. */
.dark .from-rose-50 { --tw-gradient-from: #40232e var(--tw-gradient-from-position) !important; }
.dark .from-amber-50 { --tw-gradient-from: #3b2a25 var(--tw-gradient-from-position) !important; }
.dark .to-amber-50 { --tw-gradient-to: #4a3028 var(--tw-gradient-to-position) !important; }
.dark .to-rose-50 { --tw-gradient-to: #472631 var(--tw-gradient-to-position) !important; }
.dark .to-pink-50 { --tw-gradient-to: #452530 var(--tw-gradient-to-position) !important; }
.dark .from-rose-200 { --tw-gradient-from: #6a3347 var(--tw-gradient-from-position) !important; }

/* Custom decorative surfaces. */
.dark .vl-photo-frame {
  background: linear-gradient(160deg, #472832, #2f1a22);
  border-color: var(--vl-night-border);
  box-shadow: 0 24px 60px rgba(10,4,7,.36);
}
.dark .vl-flip-front {
  background: linear-gradient(160deg, #40232d, #2f1921);
  color: var(--vl-night-text);
}
.dark .vl-dice-face {
  background: linear-gradient(135deg, #432630, #321b24);
  color: var(--vl-night-text);
  border-color: var(--vl-night-border);
  box-shadow: inset 0 0 12px rgba(239,178,196,.12);
}

/* Frames remain transparent but use a clearer gold edge in night mode. */
.dark .vl-frame,
.dark .vl-deco-frame {
  border-color: rgba(217,185,125,.48);
}
.dark .vl-frame:after {
  border-color: rgba(217,185,125,.23);
}

/* Rose labels/titles that were designed for pearl backgrounds need a lighter night value. */
.dark .text-rose-deep,
.dark .vl-eyebrow,
.dark .vl-social-button-featured .vl-social-label {
  color: var(--vl-night-rose) !important;
}
.dark .text-rose-deep\/40 { color: rgba(239,178,196,.72) !important; }
.dark .text-rose-velvet { color: var(--vl-night-rose) !important; }
.dark .hover\:text-rose-deep:hover,
.dark .hover\:text-rose-velvet:hover { color: #f4c3d1 !important; }

/* Gold remains luxurious, but slightly brighter for dark backgrounds. */
.dark .text-gold,
.dark .vl-script.text-gold { color: var(--vl-night-gold) !important; }
.dark .vl-script.text-rose-deep {
  color: transparent !important;
  background: linear-gradient(100deg, #d9b97d, #efb2c4 55%, #d9b97d);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Inputs and text areas must look native to the dark theme and remain readable. */
.dark input,
.dark textarea,
.dark select {
  color: var(--vl-night-text);
}
.dark input::placeholder,
.dark textarea::placeholder {
  color: #c7a5b1;
  opacity: 1;
}
.dark input.bg-white,
.dark textarea.bg-white,
.dark select.bg-white,
.dark input.bg-white\/80,
.dark textarea.bg-white\/80 {
  background-color: #3a202a !important;
  color: var(--vl-night-text) !important;
  border-color: rgba(239,178,196,.28) !important;
}
.dark input:focus,
.dark textarea:focus,
.dark select:focus {
  border-color: var(--vl-night-gold) !important;
}

/* Social buttons are dark surfaces in night mode. */
.dark .vl-social-button {
  background: linear-gradient(160deg, #3a202a, #311a23);
  border-color: rgba(217,185,125,.34);
  color: var(--vl-night-text);
}
.dark .vl-social-button-featured {
  background: linear-gradient(160deg, rgba(217,185,125,.16), #3b202a 58%);
  border-color: rgba(217,185,125,.68);
}

/* Accordion/FAQ and generic card content inherit the night foreground. */
.dark .vl-faq-content,
.dark .text-muted-foreground {
  color: var(--vl-night-text-muted);
}
.dark .text-foreground { color: var(--vl-night-text); }

/* Improve low-opacity copy inside dark hero/wine sections without flattening hierarchy. */
.dark .vl-wine-section .opacity-85,
.dark .vl-wine-band .opacity-85 { opacity: .94; }

/* Keep elegant borders visible against the darker canvas. */
.dark .border-border,
.dark .border-border\/60 { border-color: rgba(244,211,221,.20); }
.dark .border-gold,
.dark .border-gold\/40,
.dark .border-gold\/50,
.dark .border-gold\/60 { border-color: rgba(217,185,125,.52); }

/* Readable file picker/button text in night mode. */
.dark .file\:text-rose-deep::file-selector-button { color: var(--vl-night-rose); }
.dark .file\:bg-rose-deep\/10::file-selector-button { background-color: rgba(239,178,196,.10); }

/* Accessible focus ring for keyboard navigation in night mode. */
.dark a:focus-visible,
.dark button:focus-visible,
.dark input:focus-visible,
.dark textarea:focus-visible,
.dark select:focus-visible {
  outline: 2px solid var(--vl-night-gold);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .dark .vl-card-light,
  .dark .vl-section-card,
  .dark .vl-social-button { transition: none !important; }
}

/* Extended game/multiplayer night surfaces. These components use pastel utility gradients in light mode. */
.dark .from-purple-50 { --tw-gradient-from: #34213f var(--tw-gradient-from-position) !important; }
.dark .to-purple-50 { --tw-gradient-to: #402538 var(--tw-gradient-to-position) !important; }
.dark .from-emerald-50 { --tw-gradient-from: #1f3934 var(--tw-gradient-from-position) !important; }
.dark .to-emerald-50 { --tw-gradient-to: #244139 var(--tw-gradient-to-position) !important; }
.dark .from-green-50 { --tw-gradient-from: #24392f var(--tw-gradient-from-position) !important; }
.dark .to-teal-50 { --tw-gradient-to: #203d3b var(--tw-gradient-to-position) !important; }
.dark .from-amber-50 { --tw-gradient-from: #3d2e24 var(--tw-gradient-from-position) !important; }
.dark .to-orange-50 { --tw-gradient-to: #472b24 var(--tw-gradient-to-position) !important; }
.dark .from-pink-50 { --tw-gradient-from: #422431 var(--tw-gradient-from-position) !important; }
.dark .to-pink-50 { --tw-gradient-to: #442535 var(--tw-gradient-to-position) !important; }

.dark .bg-rose-100 { background-color: rgba(239,178,196,.13) !important; }
.dark .bg-rose-300 { background-color: rgba(239,178,196,.30) !important; }
.dark .bg-gray-500\/10 { background-color: rgba(231,203,212,.08) !important; }

.dark .text-rose-600,
.dark .text-rose-700,
.dark .text-amber-700,
.dark .text-emerald-800,
.dark .text-gray-600,
.dark .text-gray-500 {
  color: var(--vl-night-text-soft) !important;
}
.dark .text-rose-600\/70 { color: rgba(239,178,196,.82) !important; }
.dark .border-rose-100,
.dark .border-rose-200,
.dark .border-rose-300,
.dark .border-rose-300\/40,
.dark .border-amber-200,
.dark .border-emerald-200 {
  border-color: rgba(217,185,125,.28) !important;
}
.dark .hover\:bg-rose-50:hover { background-color: #4a2934 !important; }

/* Keep card text hierarchy legible across every public route. */
.dark .vl-card-light .font-display,
.dark .vl-section-card .font-display,
.dark .vl-flip-front .font-display,
.dark .vl-dice-face .font-display {
  color: var(--vl-night-text);
}
.dark .vl-card-light .text-muted-foreground,
.dark .vl-section-card .text-muted-foreground {
  color: var(--vl-night-text-muted);
}

/* Explicit semantic colors used inside pastel game result panels. */
.dark .text-purple-800,
.dark .text-purple-900,
.dark .text-green-700,
.dark .text-orange-600 {
  color: var(--vl-night-text-soft) !important;
}
.dark .text-purple-400 { color: #d8b4fe !important; }
.dark .hover\:text-purple-400:hover { color: #e9d5ff !important; }