:root {
  --pink: #FF40A0;
  --pink-light: #FFB7E6;
  --yellow: #F0FE72;
  --teal: #60A3A6;

  --bg: #0A0E27;
  --surface: #1A203A;
  --surface-dark: #080D2B;
  --border: rgba(255, 255, 255, 0.08);

  --text-white: #FFFFFC;
  --text-muted: #BDC2C9;
  --text-body: #C8D0E7;

  --font: 'Inter', sans-serif;
  --radius: 12px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-body);
  font-family: var(--font);
  min-height: 100vh;
}

 /*page fade in animation*/

.main-content,
.page,
.enroll-wrapper {
  animation: pageEnter 0.35s ease both;
}

@keyframes pageEnter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/*card hover animation*/
 .course-card,
.challenge-card,
.stat-card,
.enroll-card,
.leaderboard-card {
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.course-card:hover,
.challenge-card:hover,
.stat-card:hover,
.enroll-card:hover,
.leaderboard-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 64, 160, 0.45);
  box-shadow: 0 12px 28px rgba(255, 64, 160, 0.12);
}

/*button press animation*/
button,
.btn-enroll,
.continue-btn,
.btn-view-details,
.btn-continue,
.btn-signup,
.btn-primary {
  transition: transform 0.15s ease, opacity 0.15s ease;
}

button:active,
.btn-enroll:active,
.continue-btn:active,
.btn-view-details:active,
.btn-continue:active,
.btn-signup:active,
.btn-primary:active {
  transform: scale(0.97);
}