/* Indigo-pink like theme */
:root{
  --primary-50: #e8eaf6;
  --primary-100: #c5cae9;
  --primary-200: #9fa8da;
  --primary-300: #7986cb;
  --primary-400: #5c6bc0;
  --primary-500: #3f51b5; /* indigo */
  --primary-600: #3949a6;
  --primary-700: #303f9f;
  --primary-800: #283593;
  --primary-900: #1a237e;

  --accent-50: #fce4ec;
  --accent-100: #f8bbd0;
  --accent-200: #f48fb1;
  --accent-300: #f06292;
  --accent-400: #ec407a;
  --accent-500: #e91e63; /* pink */
  --accent-600: #d81b60;
  --accent-700: #c2185b;
  --accent-800: #ad1457;
  --accent-900: #880e4f;

  --on-primary: #ffffff;
  --surface: #ffffff;
  --muted: #6c757d;
}

/* Navbar */
.yalf-navbar{
  background: linear-gradient(90deg, var(--primary-700), var(--primary-500));
}
.yalf-navbar .navbar-brand,
.yalf-navbar .nav-link,
.yalf-navbar .navbar-text{
  color: var(--on-primary) !important;
}
.yalf-navbar .nav-link:hover{
  color: var(--accent-100) !important;
}

/* Buttons */
.btn-primary{
  background-color: var(--primary-500) !important;
  border-color: var(--primary-700) !important;
}
.btn-primary:hover{
  background-color: var(--primary-700) !important;
  border-color: var(--primary-800) !important;
}

.btn-accent{
  background-color: var(--accent-500);
  color: #fff;
  border: 1px solid rgba(0,0,0,0.08);
}
.btn-accent:hover{
  background-color: var(--accent-700);
}

/* Links */
a{
  color: var(--primary-500);
}
a:hover{color:var(--primary-700)}

/* Forms */
.form-control:focus{
  border-color: var(--primary-500);
  box-shadow: 0 0 0 .2rem rgba(63,81,181,0.25);
}

/* Cards and surfaces */
.card{
  border-radius: .5rem;
  box-shadow: 0 2px 6px rgba(16,24,40,0.05);
}

/* Accent small element */
.accent-pill{
  display:inline-block;
  padding: .25rem .5rem;
  background: var(--accent-100);
  color: var(--accent-900);
  border-radius: 9999px;
  font-size: .8rem;
}

/* Footer or small muted text */
.text-muted{
  color: var(--muted) !important;
}