:root {
  --primary: #6F4E37;
  --primary-dark: #4A3428;
  --primary-light: #A0826D;
  --secondary: #F5F5DC;
  --accent: #D4A574;
  --bg-primary: #FAF7F2;
  --bg-secondary: #FFF8F0;
  --bg-card: #FFFFFF;
  --text-primary: #2C1810;
  --text-secondary: #6B5B4F;
  --text-muted: #9E8E82;
  --border: #E8D5C4;
  --success: #7A9E7E;
  --danger: #C17B7B;
  --warning: #D4A574;
  --shadow: 0 4px 20px rgba(111, 78, 55, 0.08);
  --radius: 12px;
  --font-heading: 'Playfair Display', serif;
  --font-body: 'Inter', sans-serif;
}

body.coffee-white {
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-body);
}

.coffee-white .navbar {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  box-shadow: var(--shadow);
}

.coffee-white .card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.coffee-white .btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border: none;
  color: white;
  border-radius: 8px;
  padding: 12px 24px;
  transition: all 0.3s ease;
}

.coffee-white .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(111, 78, 55, 0.3);
}

.coffee-white .sidebar {
  background: var(--bg-secondary);
  border-right: 1px solid var(--border);
}

.coffee-white .nav-link.active {
  background: var(--primary);
  color: white;
  border-radius: 8px;
}

.coffee-white .course-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 40px rgba(111, 78, 55, 0.15);
}

.coffee-white .progress-bar {
  background: linear-gradient(90deg, var(--primary), var(--accent));
}

.coffee-white input:focus, .coffee-white select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(111, 78, 55, 0.1);
}