/* 당근영어 테마 CSS */

:root {
  --primary: #FF8A00; /* 당근 오렌지 */
  --secondary: #4CAF50; /* 잎사귀 녹색 */
  --background: #FFF8F0; /* 연한 오렌지 배경 */
  --text-primary: #333333;
  --accent-1: #FF6B2B; /* 진한 오렌지 */
  --accent-2: #2E7D32; /* 진한 녹색 */
  --accent-3: #FF9800;
  --success: #4CAF50;
  --error: #F44336;
  --neutral: #FFC107;
  --shadow: rgba(0, 0, 0, 0.1);
}

/* 헤더 스타일 덮어쓰기 */
.app-header, .screen-header, .phonics-header {
  background: linear-gradient(135deg, #FF8A00 0%, #FF6B2B 100%) !important;
  box-shadow: 0 6px 20px rgba(255, 138, 0, 0.35) !important;
}

/* 메뉴 아이콘 색상 */
.menu-icon {
  background-color: var(--primary) !important;
}

.menu-item:nth-child(2) .menu-icon {
  background-color: var(--secondary) !important;
}

.menu-item:nth-child(3) .menu-icon {
  background-color: var(--accent-1) !important;
}

/* 버튼 스타일 */
.btn-primary, .menu-button, .start-game-btn, .card-button, .modal-button, .submit-button {
  background-color: var(--primary) !important;
}

.btn-primary:hover, .menu-button:hover, .start-game-btn:hover, 
.card-button:hover, .modal-button:hover, .submit-button:hover {
  background-color: var(--accent-1) !important;
}

/* 네비게이션 활성화 색상 */
.nav-item.active {
  color: var(--primary) !important;
}

/* 당근 캐릭터 스타일 */
.character-dot {
  background-color: #FF8A00 !important;
}

.character-dot::before,
.character-dot::after,
.character-dot .smile {
  border-color: #4CAF50 !important;
}

/* 페이지 배경색 */
body {
  background-color: var(--background) !important;
}