:root {
  --ink: #172033;
  --muted: #657084;
  --paper: #fbf8f2;
  --red: #d9253a;
  --line: #ded8cf;
}

html,
body {
  background: var(--paper);
}

.topbar {
  background: #182235;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.brand-logo {
  background: #fffaf2;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 11px;
  box-shadow: 0 5px 18px rgba(0, 0, 0, .22);
  height: 48px;
  max-width: 176px;
  padding: 8px 12px;
}

.user-chip,
.login-chip {
  background: #fff;
  border-color: #fff;
  color: #182235;
}

.hero {
  background: linear-gradient(135deg, #182235 0%, #241720 100%);
}

.hero::after {
  color: rgba(255, 255, 255, .045);
}

.hero > p,
.hero-stats span {
  color: #c7cfdb;
}

.teacher-search {
  border-color: #d5dbe3;
  box-shadow: 0 6px 22px rgba(23, 32, 51, .08);
}

.teacher-search > span,
.teacher-search input::placeholder {
  color: #778196;
  opacity: 1;
}

.filters button {
  background: #fff;
  border-color: #d7dce4;
  color: #4c586d;
}

.filters button.active {
  background: #182235;
  border-color: #182235;
}

.date-group > h2 {
  color: #172033;
}

.teacher-group {
  border-color: #d9dee6;
  box-shadow: 0 7px 22px rgba(23, 32, 51, .08);
}

.teacher-group > header {
  background: linear-gradient(120deg, #263653, #182235);
}

.teacher-group > header small {
  color: #ff9ba8;
}

.lesson-title span {
  background: #edf1f6;
  color: #536078;
}

.availability > div {
  background: #e5e9ef;
}

.availability i {
  background: #31486d;
}

.detail-btn {
  background: #d9253a;
  box-shadow: 0 4px 12px rgba(217, 37, 58, .22);
}

.bottom-nav {
  border-color: #dce1e8;
  box-shadow: 0 -5px 22px rgba(23, 32, 51, .08);
}

.modal-date,
.booking-date,
.signin-link {
  color: #bb1e32;
}

.modal-date {
  background: #fff0f2;
}

.primary-link,
.booking-confirm .apply {
  background: #182235;
}

@media (max-width: 560px) {
  .topbar {
    height: 78px;
  }

  .brand-logo {
    height: 46px;
    max-width: 164px;
  }
}