/* ==========================================================================
   Lottielab Bootstrap Overrides
   Conservative skin: maps Bootstrap component defaults onto Lottielab tokens.
   Load AFTER bootstrap.min.css and AFTER lottielab-tokens.css.
   ========================================================================== */

/* ---------- Base typography ---------------------------------------------- */
body {
  font-family: var(--font-plus-jakarta-sans);
  color: var(--color-stormy-indigo);
  background-color: var(--color-bright-white);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-plus-jakarta-sans);
  color: var(--color-stormy-indigo);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.02em;
}

.text-muted {
  color: var(--color-soft-gray) !important;
}

.text-primary {
  color: var(--color-electric-violet) !important;
}

/* Bootstrap link colour follows primary accent */
a {
  color: var(--color-electric-violet);
  text-decoration: none;
}
a:hover,
a:focus {
  color: #5957d6;
  text-decoration: none;
}
/* 사이트 전체 정책: 어떤 링크/버튼도 호버시 밑줄 표시 안 함 */
a:hover *,
a:focus *,
.btn:hover,
.nav-link:hover,
.dropdown-item:hover {
  text-decoration: none !important;
}
.nav-link, .navbar-brand, .navbar-nav .nav-link {
  color: inherit;
}

/* ---------- Buttons ------------------------------------------------------ */
.btn {
  border-radius: var(--radius-button);
  font-weight: var(--font-weight-medium);
  padding: 6px 20px;
}
.btn-lg {
  padding: 10px 28px;
  font-size: var(--text-body);
}
.btn-sm {
  padding: 4px 14px;
  font-size: var(--text-body-sm);
}

.btn-primary {
  --bs-btn-bg: var(--color-electric-violet);
  --bs-btn-border-color: var(--color-electric-violet);
  --bs-btn-hover-bg: #5957d6;
  --bs-btn-hover-border-color: #5957d6;
  --bs-btn-active-bg: #4a48c2;
  --bs-btn-active-border-color: #4a48c2;
  --bs-btn-disabled-bg: var(--color-electric-violet);
  --bs-btn-disabled-border-color: var(--color-electric-violet);
  --bs-btn-color: var(--color-bright-white);
  --bs-btn-hover-color: var(--color-bright-white);
  --bs-btn-active-color: var(--color-bright-white);
}

.btn-outline-primary {
  --bs-btn-color: var(--color-electric-violet);
  --bs-btn-border-color: var(--color-electric-violet);
  --bs-btn-hover-bg: var(--color-electric-violet);
  --bs-btn-hover-border-color: var(--color-electric-violet);
  --bs-btn-hover-color: var(--color-bright-white);
  --bs-btn-active-bg: var(--color-electric-violet);
  --bs-btn-active-border-color: var(--color-electric-violet);
}

.btn-secondary {
  --bs-btn-bg: var(--color-light-mist);
  --bs-btn-border-color: var(--color-ash-gray);
  --bs-btn-color: var(--color-stormy-indigo);
  --bs-btn-hover-bg: var(--color-ash-gray);
  --bs-btn-hover-border-color: var(--color-ash-gray);
  --bs-btn-hover-color: var(--color-stormy-indigo);
}

.btn-outline-secondary {
  --bs-btn-color: var(--color-stormy-indigo);
  --bs-btn-border-color: var(--color-ash-gray);
  --bs-btn-hover-bg: var(--color-light-mist);
  --bs-btn-hover-border-color: var(--color-ash-gray);
  --bs-btn-hover-color: var(--color-stormy-indigo);
}

/* ---------- List group --------------------------------------------------- */
.list-group-item.active {
  background-color: rgba(114, 112, 255, 0.06);
  border-color: var(--color-ash-gray);
  color: var(--color-electric-violet);
  font-weight: var(--font-weight-medium);
  border-left: 3px solid var(--color-electric-violet);
}

/* ---------- Cards -------------------------------------------------------- */
.card {
  border-radius: var(--radius-card);
  border-color: var(--color-ash-gray);
  background-color: var(--color-bright-white);
}

/* Surface utility classes */
.surface-canvas  { background-color: var(--surface-canvas); }
.surface-section { background-color: var(--surface-section); }
.surface-card    { background-color: var(--surface-card); }

/* ---------- Forms -------------------------------------------------------- */
.form-control,
.form-select {
  border-radius: var(--radius-input);
  border-color: var(--color-ash-gray);
  color: var(--color-stormy-indigo);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--color-electric-violet);
  box-shadow: 0 0 0 0.2rem rgba(114, 112, 255, 0.18);
}

/* ---------- Background utilities ----------------------------------------- */
.bg-primary {
  background-color: var(--color-electric-violet) !important;
}

/* ---------- Progress bar ------------------------------------------------- */
.progress-bar {
  background-color: var(--color-electric-violet);
}

/* ---------- Badges / tags ------------------------------------------------ */
.badge {
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-tag);
  padding: 4px 10px;
}
.badge.bg-primary {
  background-color: var(--color-electric-violet) !important;
}
.badge.rounded-pill {
  border-radius: var(--radius-tag) !important;
}

/* ---------- Images ------------------------------------------------------- */
.img-thumbnail,
.img-rounded {
  border-radius: var(--radius-card);
  border-color: var(--color-ash-gray);
}