:root {
  --ink: #2c2540;
  --muted: #746d84;
  --line: #e7e1f0;
  --paper: #ffffff;
  --cream: #f7f5fb;
  --green: #6d51b5;
  --mint: #eee9fa;
  --coral: #8a6dcc;
  --yellow: #ddd1f4;
  --blue: #ddd5f1;
}

body {
  background: var(--cream);
}

.sidebar {
  background: #513a8d;
  color: #f4f0ff;
}

.brand {
  display: block;
  padding: 0 6px 30px;
}

.brand img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 5px;
}

.brand-mark {
  display: none;
}

.nav-link {
  color: #ddd4f2;
}

.nav-link.active,
.nav-link:hover {
  background: #684dac;
  color: #fff;
}

.doctor-card {
  border-color: #8069b5;
}

.doctor-card small,
.logout-button {
  color: #d4c8ed;
}

.logout-button:hover {
  color: #fff;
}

.primary-button,
.details button,
.whatsapp {
  background: #6d51b5;
}

.primary-button:hover,
.details button:hover,
.whatsapp:hover {
  background: #59429a;
}

.login-screen {
  background: linear-gradient(135deg, #513a8d, #8466c4);
}

.login-logo {
  display: block;
  width: min(100%, 280px);
  height: auto;
  margin: 0 auto 6px;
}

.booking-shell .brand {
  width: min(100%, 300px);
  padding: 0;
}

.booking-shell .brand img {
  border-radius: 0;
}

.booking-shell {
  padding-top: 32px;
}

.booking-card,
.contact-card {
  box-shadow: 0 22px 60px #513a8d1c;
}

.slots button {
  border-color: #d1c7e6;
  color: var(--green);
}

.slots button:hover,
.slots button.selected {
  background: var(--green);
  border-color: var(--green);
}