/**
 * CSS 변수 정의
 * 프로젝트 전체에서 사용되는 색상, 간격 등의 변수
 */
:root {
  /* Brand Palette - Anna Mom English */
  /* Primary (코랄 레드) */
  --primary-color: #ff6b6b;
  --primary-hover: #e85a5a;

  /* Secondary (민트 터콰이즈) */
  --secondary-color: #4ecdc4;

  /* Accent (소프트 옐로우) */
  --accent-color: #ffe66d;

  /* Background & Text */
  --background-color: #f7f7f7;
  --text-color-main: #2c3e50;

  /* Gray Scale (텍스트/보조 톤) */
  --gray-500: #95a5a6;
  --gray-600: #7f8c8d;
  --gray-700: #2c3e50;
  --gray-800: #1f2933;

  /* Legacy semantic colors → 브랜드 팔레트에 맞춰 재매핑 */
  /* Indigo 계열은 코랄/민트 조합으로 사용 */
  --indigo-50: #fff5f5;  /* 아주 옅은 코랄 */
  --indigo-100: #ffecec;
  --indigo-200: #ffe0e0;
  --indigo-300: #ffd5d5;
  --indigo-500: #ff6b6b; /* primary */
  --indigo-600: #ff6b6b; /* primary */
  --indigo-700: #e85a5a; /* primary hover/딥 코랄 */
  --indigo-900: #c13f3f; /* 더 어두운 코랄 */

  /* Blue 계열은 배경용 소프트 톤으로 사용 */
  --blue-50: #f7f7f7;    /* 전체 배경 톤 */
  --blue-200: #e3f6f3;   /* 옅은 민트 배경 */
  --blue-800: #2c3e50;   /* 텍스트 다크 블루그레이 */

  /* Red Colors (에러용 - primary와 구분되는 딥 레드) */
  --red-500: #e63946;
  --red-600: #c53030;
  --red-700: #9b2c2c;

  /* Green Colors (성공/완료 상태 유지) */
  --green-600: #16a34a;
  --green-700: #15803d;

  /* Orange / 경고 톤 (accent와 함께 사용 가능) */
  --orange-600: #f59e0b;

  /* Spacing */
  --spacing-unit: 1rem;
}