/* ── Brand palette ────────────────────────────────── */
:root {
  --brand-red:        #C72D27;
  --brand-red-dark:   #a52420;
  --brand-orange:     #F7941D;
  --brand-blue:       #0097D7;
  --brand-blue-dark:  #007ab0;
  --brand-green:      #92C83E;
  --brand-gray:       #6E6E6E;
  --brand-gray-light: #BEBEBE;
  --brand-bg:         #f9f7f4;
}

/* ── Base ─────────────────────────────────────────── */
body {
  background-color: var(--brand-bg);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: #2b2b2b;
}

a {
  color: var(--brand-blue);
}
a:hover {
  color: var(--brand-blue-dark);
}

/* ── Navbar ───────────────────────────────────────── */
.navbar {
  background-color: var(--brand-red) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
}

.navbar-brand img {
  height: 38px;
  width: auto;
}

/* ── Bootstrap primary ────────────────────────────── */
.bg-primary     { background-color: var(--brand-red) !important; }
.text-primary   { color: var(--brand-red) !important; }
.border-primary { border-color:     var(--brand-red) !important; }

.btn-primary {
  background-color: var(--brand-red);
  border-color:     var(--brand-red);
  color: #fff;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:disabled {
  background-color: var(--brand-red-dark);
  border-color:     var(--brand-red-dark);
  color: #fff;
}

.btn-outline-primary {
  color:        var(--brand-red);
  border-color: var(--brand-red);
}
.btn-outline-primary:hover {
  background-color: var(--brand-red);
  border-color:     var(--brand-red);
  color: #fff;
}

/* ── Bootstrap success → brand green ─────────────── */
.bg-success,
.badge.bg-success { background-color: var(--brand-green) !important; }
.text-success     { color:            var(--brand-green) !important; }

.btn-success {
  background-color: var(--brand-green);
  border-color:     var(--brand-green);
  color: #fff;
}
.btn-success:hover {
  background-color: #7aaa2e;
  border-color:     #7aaa2e;
  color: #fff;
}

/* ── Bootstrap info → brand blue ─────────────────── */
.bg-info   { background-color: var(--brand-blue) !important; }
.text-info { color:            var(--brand-blue) !important; }

/* ── Bootstrap warning → brand orange ────────────── */
.bg-warning     { background-color: var(--brand-orange) !important; }
.text-warning   { color:            var(--brand-orange) !important; }
.border-warning { border-color:     var(--brand-orange) !important; }

.badge.bg-warning { background-color: var(--brand-orange) !important; color: #fff !important; }

/* ── Muted text ───────────────────────────────────── */
.text-muted { color: var(--brand-gray) !important; }

/* ── Brand utility classes ────────────────────────── */
.text-orange { color: var(--brand-orange) !important; }
.text-blue   { color: var(--brand-blue)   !important; }
.text-green  { color: var(--brand-green)  !important; }
.bg-orange   { background-color: var(--brand-orange) !important; }

/* ── Cards ────────────────────────────────────────── */
.course-card {
  transition: transform .15s ease, box-shadow .15s ease;
  border-top: 3px solid var(--brand-red);
}
.course-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .12) !important;
}
.course-card:hover .fw-semibold.text-primary {
  color: var(--brand-orange) !important;
}

/* ── Auth card ────────────────────────────────────── */
.auth-card {
  max-width: 460px;
  margin: 2.5rem auto;
}

/* ── Lesson rich text ─────────────────────────────── */
.lesson-text h1,
.lesson-text h2,
.lesson-text h3 {
  color: var(--brand-red);
  margin-top: 1.25rem;
}

/* ── Footer ───────────────────────────────────────── */
footer {
  font-size: .875rem;
  background-color: #ece9e0 !important;
}

/* ── Alert messages ───────────────────────────────── */
.alert-success { border-left: 4px solid var(--brand-green); }
.alert-warning { border-left: 4px solid var(--brand-orange); }
.alert-danger  { border-left: 4px solid var(--brand-red); }
.alert-info    { border-left: 4px solid var(--brand-blue); }