/* ===========================
   SIMULATOR LIGHT THEME TOKENS
   Bootstrap 5 compatible
=========================== */
html[data-bs-theme="light"] {
  --primary-color: #0d6efd;
  --background-color: #ffffff;
  --text-color: #121212;

  --navbar-bg-color: color-mix(in srgb, var(--primary-color) 5%, #ffffff);
  --hover-bg-color: color-mix(in srgb, var(--primary-color) 10%, #ffffff);

  --surface-1: #ffffff;
  --border-1: rgba(0, 0, 0, 0.22);

  /* Chat tokens */
  --chat-control-btn-bg: #ffffff;
  --chat-control-btn-shadow: rgba(0,0,0,0.22);
  --chat-tts-icon-url: url("/static/img/icons/voice_light.a1740f8e6b8b.png");
  --chat-send-triangle-color: #121212;

  --chat-voice-overlay-bg: radial-gradient(circle at 30% 20%, #1a1a1a, #0f0f0f);
  --chat-voice-overlay-ring: rgba(0,0,0,0.35);
  --chat-voice-overlay-shadow: rgba(0,0,0,0.45);

  /* Surfaces for cards/panels */
  --surface-2: rgba(18, 18, 18, 0.03);

  /* Shadows for light UI */
  --shadow-1: rgba(0,0,0,0.18);
  --shadow-2: rgba(0,0,0,0.10);

  /* Primary ring */
  --ring-1: rgba(13,110,253,0.15);
}

html[data-bs-theme="light"] body {
  background-color: var(--background-color);
  color: var(--text-color);
}

/* .navbar deliberately excluded — .sim-top-strip (its parent) already paints
   the same color, and giving .navbar its own opaque background would cover
   the header's spectrum-glow animation, which sits behind it. */
html[data-bs-theme="light"] .sim-header,
html[data-bs-theme="light"] .sim-footer {
  background-color: var(--navbar-bg-color);
  color: var(--text-color);
}

html[data-bs-theme="light"] .navbar {
  color: var(--text-color);
}

html[data-bs-theme="light"] .dropdown-menu {
  background-color: #ffffff;
  border: 1px solid var(--border-1);
}

/* Forms */
html[data-bs-theme="light"] .form-control,
html[data-bs-theme="light"] textarea.form-control,
html[data-bs-theme="light"] select.form-select {
  background-color: #ffffff;
  color: var(--text-color);
  border: 1px solid rgba(0,0,0,0.18);
  box-shadow: none;
}

html[data-bs-theme="light"] .form-control:focus,
html[data-bs-theme="light"] .form-select:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 .2rem rgba(13,110,253,.15);
}

/* Keep placeholders consistent (white inputs) */
html[data-bs-theme="light"] input.form-control::placeholder,
html[data-bs-theme="light"] textarea.form-control::placeholder {
  color: rgba(0, 0, 0, 0.55) !important;
  opacity: 1 !important;
}

html[data-bs-theme="light"] input.form-control::-webkit-input-placeholder,
html[data-bs-theme="light"] textarea.form-control::-webkit-input-placeholder {
  color: rgba(0, 0, 0, 0.55) !important;
}

html[data-bs-theme="light"] input.form-control::-moz-placeholder,
html[data-bs-theme="light"] textarea.form-control::-moz-placeholder {
  color: rgba(0, 0, 0, 0.55) !important;
  opacity: 1 !important;
}

html[data-bs-theme="light"] input.form-control:-ms-input-placeholder,
html[data-bs-theme="light"] textarea.form-control:-ms-input-placeholder {
  color: rgba(0, 0, 0, 0.55) !important;
}