/* =========================================================
   bootstrap-dark-musicnotch-overrides.css
   Load AFTER bootstrap-dark.min.css
   Purpose: convert teal primary -> MusicNotch red/black
   ========================================================= */

/* MusicNotch palette (dark) */
:root{
  /* Brand */
  --primary: #9c0000;
  --primary-50:  #3b0000;
  --primary-100: #590000;
  --primary-200: #7a0000;
  --primary-300: #9c0000;
  --primary-400: #ff4b4b;
  --primary-600: #ff6b6b;
  --primary-700: #ff9b9b;
  --primary-800: #ffd1d1;
  --primary-900: #fff0f0;

  /* Base dark surfaces */
  --white: #050505;            /* in this theme, --white is used like a base surface */
  --light: #0a0a0a;
  --gray-50: #050505;
  --gray-100: #0b0b0b;
  --gray-200: #111111;
  --gray-300: #1b1b1b;
  --gray-400: #2a2a2a;

  /* Text */
  --gray: #9ca3af;
  --gray-dark: #e6e3dc;
  --gray-700: #b6bcc6;
  --gray-800: #e6e3dc;
  --gray-900: #f8fafc;

  /* Bootstrap semantic colors stay mostly the same */
  --danger: #dc3545;
  --warning: #ffc107;
  --success: #5ec269;
  --info: #17a2b8;
}

/* Make sure key Bootstrap elements actually use the new primary */
a:hover { color: var(--primary-400); }
code { color: var(--primary-400); }

/* Buttons */
.btn-primary{
  color:#fff !important;
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}
.btn-primary:hover{
  background-color: var(--primary-400) !important;
  border-color: var(--primary-400) !important;
}
.btn-primary:focus,
.btn-primary.focus{
  box-shadow: 0 0 0 .2rem rgba(156,0,0,.25) !important;
}

/* Form focus ring */
.form-control:focus{
  border-color: rgba(255,75,75,.65) !important;
  box-shadow: 0 0 0 .2rem rgba(156,0,0,.25) !important;
}

/* Optional: body background deep black (if your bootstrap file differs) */
body{
  background-color: #050505;
}