/**
 * css-variables.css - 통합된 CSS 변수 시스템 및 기본 리셋
 * 모든 페이지에서 공통으로 사용할 디자인 토큰 정의
 */

/* ===== 기본 리셋 (통합) ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ===== 라이트 모드 변수 ===== */
:root {
  /* 기본 브라우저 설정 최적화 */
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeSpeed;

  /* 메인 브랜드 색상 - 중복 제거 및 정리 */
  --primary-color: #4361ee;
  --primary-light: #6085ff;
  --primary-dark: #3a56d4;
  --primary-50: #eff6ff;
  --primary-100: #dbeafe;
  --primary-500: var(--primary-color);
  --primary-600: var(--primary-dark);
  --primary-700: #2c4bc7;
  --primary-900: #1e3a8a;
  --primary-light-transparent: rgba(67, 97, 238, 0.1);
  
  /* 보조 색상 - 중복 정리 */
  --secondary-color: #4cc9f0;
  --secondary-light: #6dd5f4;
  --secondary-dark: #38bdf0;
  --secondary-50: #f0f9ff;
  --secondary-500: var(--secondary-color);
  --secondary-600: var(--secondary-dark);
  
  /* 액센트 색상 */
  --accent-color: #f72585;
  --accent-light: #ff4da6;
  --accent-dark: #d90368;
  
  /* 상태 색상 */
  --success-color: #22c55e;
  --success-light: #4ade80;
  --success-dark: #16a34a;
  --success-50: #f0fdf4;
  --success-500: var(--success-color);
  --success-600: var(--success-dark);
  --success-light-bg: #ecfdf5;
  --success-dark-text: #065f46;
  
  --warning-color: #f59e0b;
  --warning-light: #fbbf24;
  --warning-dark: #d97706;
  --warning-50: #fffbeb;
  --warning-500: #f59e0b;
  --warning-600: #d97706;
  
  --error-color: #ef4444;
  --error-light: #f87171;
  --error-dark: #dc2626;
  
  /* 레벨별 칭호 색상 */
  --level-1-color: #84cc16;  /* 씨앗 - 라임 그린 */
  --level-2-color: #22c55e;  /* 새싹 - 그린 */
  --level-3-color: #10b981;  /* 묘목 - 에메랄드 */
  --level-4-color: #06b6d4;  /* 나무 - 시안 */
  --level-5-color: #8b5cf6;  /* 꽃 - 보라 */
  --level-6-color: #f59e0b;  /* 열매 - 주황 */
  --error-50: #fef2f2;
  --error-500: #ef4444;
  --error-600: #dc2626;
  
  --info-color: #3b82f6;
  --info-light: #60a5fa;
  --info-dark: #2563eb;
  
  /* 중성 색상 */
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
  
  /* 의미론적 색상 */
  --background: #ffffff;
  --background-color: #ffffff;
  --background-light: #f8f9fa;
  --background-dark: #e9ecef;
  --surface: #ffffff;
  --surface-alt: #f9fafb;
  --card-bg: #ffffff;
  
  /* 텍스트 색상 */
  --text-primary: #111827;
  --text-dark: #212529;
  --text-medium: #495057;
  --text-light: #6c757d;
  --text-color: #333333;
  --text-color-light: #666666;
  --text-secondary: #6b7280;
  --text-muted: #9ca3af;
  
  /* 테두리 색상 */
  --border: #e5e7eb;
  --border-color: #dee2e6;
  --border-color-light: #f1f3f5;
  --border-focus: #4361ee;
  --border-light: #f1f3f5;
  
  /* 배경 색상 */
  --bg-hover: #f1f3f5;
  --bg-light: #f8f9fa;
  --bg-muted: #f3f4f6;
  
  /* 간격 */
  --spacing-xs: 0.25rem;   /* 4px */
  --spacing-sm: 0.5rem;    /* 8px */
  --spacing-md: 1rem;      /* 16px */
  --spacing-lg: 1.5rem;    /* 24px */
  --spacing-xl: 2rem;      /* 32px */
  --spacing-xxl: 3rem;     /* 48px */
  
  /* 테두리 반경 */
  --border-radius: 12px;
  --radius-sm: 0.25rem;    /* 4px */
  --radius-md: 0.5rem;     /* 8px */
  --radius-lg: 1rem;       /* 16px */
  --radius-xl: 1.25rem;    /* 20px */
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  --border-radius-xl: 16px;
  
  /* 그림자 */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.15);
  
  /* 트랜지션 */
  --transition: all 0.3s ease;
  --transition-fast: 150ms ease;
  --transition-normal: 200ms ease;
  --transition-slow: 300ms ease;
  
  /* 레이아웃 */
  --container-width: 1200px;
  --header-height: 70px;
  --footer-height: 80px;
  
  /* Z-인덱스 */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  --z-toast: 1080;
}

/* ===== 다크 모드 변수 ===== */
body.dark-mode,
[data-theme="dark"] {
  /* 메인 브랜드 색상 (다크 모드에서 조금 더 밝게) */
  --primary-color: #6366F1;
  --primary-light: #A5B4FC;
  --primary-dark: #4F46E5;
  --primary-500: #6366F1;
  --primary-600: #4F46E5;
  --primary-700: #4338CA;
  
  /* 보조 색상 */
  --secondary-color: #38BDF8;
  --secondary-light: #7DD3FC;
  --secondary-dark: #0EA5E9;
  
  /* 액센트 색상 */
  --accent-color: #F471B5;
  --accent-light: #F9A8D4;
  --accent-dark: #EC4899;
  
  /* 상태 색상 */
  --success-color: #34D399;
  --success-light: #6EE7B7;
  --success-dark: #10B981;
  
  --warning-color: #FBBF24;
  --warning-light: #FCD34D;
  --warning-dark: #F59E0B;
  
  --error-color: #F87171;
  --error-light: #FCA5A5;
  --error-dark: #EF4444;
  
  --info-color: #60A5FA;
  --info-light: #93C5FD;
  --info-dark: #3B82F6;
  
  /* 중성 색상 (다크 모드) */
  --gray-50: #1f2937;
  --gray-100: #374151;
  --gray-200: #4b5563;
  --gray-300: #6b7280;
  --gray-400: #9ca3af;
  --gray-500: #d1d5db;
  --gray-600: #e5e7eb;
  --gray-700: #f3f4f6;
  --gray-800: #f9fafb;
  --gray-900: #ffffff;
  
  /* 의미론적 색상 (다크 모드) */
  --background: #111827;
  --background-color: #111827;
  --background-light: #1f2937;
  --background-dark: #000000;
  --surface: #1f2937;
  --surface-alt: #374151;
  --card-bg: #1f2937;
  
  /* 텍스트 색상 (다크 모드) */
  --text-primary: #ffffff;
  --text-dark: #f9fafb;
  --text-medium: #e5e7eb;
  --text-light: #d1d5db;
  --text-color: #f3f4f6;
  --text-color-light: #d1d5db;
  --text-secondary: #9ca3af;
  --text-muted: #6b7280;
  
  /* 테두리 색상 (다크 모드) */
  --border: #374151;
  --border-color: #4b5563;
  --border-color-light: #374151;
  --border-focus: #6366F1;
  --border-light: #374151;
  
  /* 배경 색상 (다크 모드) */
  --bg-hover: #374151;
  --bg-light: #1f2937;
  --bg-muted: #374151;
}