/* Light-mode contrast overrides for Party Games.
   The UI is authored with dark-theme Tailwind (text-white, bg-white/10, etc.).
   html.light already swaps surface colors; these rules make text, chrome, and
   form controls readable on the light surfaces. */

html.light {
  color-scheme: light;
}

html.light body {
  color: #1a1228;
}

html.light select option {
  color: #1a1228;
  background: #fff;
}

html.light .bg-surface\/95 {
  background-color: #f5f0fff2;
}

html.light .bg-surface-elevated\/95 {
  background-color: #fffffff2;
}

/* White text → ink */
html.light .text-white { color: #1a1228; }
html.light .text-white\/90 { color: #2a203c; }
html.light .text-white\/80 { color: #3a2d50; }
html.light .text-white\/70 { color: #45385c; }
html.light .text-white\/60 { color: #524568; }
html.light .text-white\/55 { color: #5a4d70; }
html.light .text-white\/50 { color: #5c4d73; }
html.light .text-white\/45 { color: #625478; }
html.light .text-white\/40 { color: #67597d; }
html.light .text-white\/35 { color: #6d5f82; }
html.light .text-white\/30 { color: #736588; }

html.light .placeholder\:text-white\/30::placeholder,
html.light .placeholder\:text-white\/35::placeholder {
  color: #8a7b9e;
}

/* Pastels that only read on dark backgrounds */
html.light .text-violet-200,
html.light .text-violet-200\/80,
html.light .text-violet-300 {
  color: #5b21b6;
}

html.light .text-amber-100,
html.light .text-amber-100\/90,
html.light .text-amber-200,
html.light .text-amber-200\/80,
html.light .text-amber-300,
html.light .text-amber-300\/90 {
  color: #92400e;
}

html.light .text-emerald-200,
html.light .text-emerald-300,
html.light .text-emerald-300\/80 {
  color: #047857;
}

html.light .text-rose-200\/90,
html.light .text-rose-300,
html.light .hover\:text-rose-300:hover {
  color: #be123c;
}

html.light .text-fuchsia-300\/90 {
  color: #a21caf;
}

html.light .text-teal-300 {
  color: #0f766e;
}

html.light .text-sky-400 {
  color: #0369a1;
}

/* Title gradient: pale stops → saturated stops */
html.light .from-violet-300.via-fuchsia-300.to-amber-200 {
  --tw-gradient-from: #6d28d9;
  --tw-gradient-via: #c026d3;
  --tw-gradient-to: #b45309;
}

/* Glass panels / hairlines */
html.light .bg-white\/5 { background-color: rgba(26, 18, 40, 0.06); }
html.light .bg-white\/10 { background-color: rgba(26, 18, 40, 0.08); }
html.light .bg-white\/15 { background-color: rgba(26, 18, 40, 0.12); }

html.light .border-white\/5 { border-color: rgba(26, 18, 40, 0.1); }
html.light .border-white\/10 { border-color: rgba(26, 18, 40, 0.14); }
html.light .border-white\/15 { border-color: rgba(26, 18, 40, 0.18); }
html.light .border-white\/20 { border-color: rgba(26, 18, 40, 0.22); }
html.light .border-white\/25 { border-color: rgba(26, 18, 40, 0.26); }
html.light .border-white\/30 { border-color: rgba(26, 18, 40, 0.32); }

html.light .ring-white\/40 {
  --tw-ring-color: rgba(26, 18, 40, 0.28);
}

html.light .focus-visible\:ring-white\/60:focus-visible {
  --tw-ring-color: rgba(109, 40, 217, 0.55);
}

html.light .hover\:bg-white\/10:hover,
html.light .active\:bg-white\/10:active {
  background-color: rgba(26, 18, 40, 0.1);
}

html.light .hover\:text-white\/80:hover,
html.light .active\:text-white\/80:active {
  color: #3a2d50;
}

/* Dark-glass inputs become light fields */
html.light .bg-black\/20,
html.light .bg-black\/30,
html.light .bg-black\/35,
html.light .bg-black\/40 {
  background-color: rgba(26, 18, 40, 0.08);
}

/* Modal dimmer stays a dimmer */
html.light .bg-black\/60 {
  background-color: rgba(15, 10, 26, 0.45);
}

/* Saturated / dark chips keep light type (same element only).
   Do not style descendants: game tiles use a 1px gradient ring around a
   light elevated surface, and those titles must stay dark. */
html.light .bg-violet-500,
html.light .bg-pink-500,
html.light .bg-rose-500,
html.light .bg-rose-600,
html.light .bg-rose-500\/80,
html.light .bg-sky-600,
html.light .bg-sky-500\/80,
html.light .bg-emerald-500,
html.light .bg-stone-800,
html.light .bg-stone-900,
html.light .bg-\[\#1a1230\],
html.light .from-violet-500.to-fuchsia-500,
html.light .from-pink-500.to-rose-500 {
  color: #fff;
}

html.light :is(
  .bg-violet-500,
  .bg-pink-500,
  .bg-rose-500,
  .bg-rose-600,
  .bg-rose-500\/80,
  .bg-sky-600,
  .bg-sky-500\/80,
  .bg-emerald-500,
  .bg-stone-800,
  .bg-stone-900,
  .bg-\[\#1a1230\],
  .from-violet-500.to-fuchsia-500,
  .from-pink-500.to-rose-500
).text-white {
  color: #fff;
}

html.light .bg-\[\#1a1230\] .text-white,
html.light .bg-stone-800 .text-white,
html.light .bg-stone-900 .text-white {
  color: #fff;
}

/* Primary CTA is too light for white type on a lavender page.
   Target the filled button (same-element text-white), not 1px game-card rings. */
html.light .bg-gradient-to-br.from-violet-500.to-fuchsia-500.text-white {
  background-image: linear-gradient(to bottom right, #5b21b6, #86198f);
  color: #fff;
}

/* So Clover keeps its own dark board palette */
html.light .so-clover-page,
html.light .so-clover-page .text-white {
  color: var(--sc-ink);
}