/* =========================================================
   Design System Variables
   - 재사용 가능한 디자인 토큰 (최종 통합본)
   - 원칙:
     1) 의미 기반(semantic) 토큰을 1차로 사용
     2) 레거시/페이지별 변수는 alias로만 유지
========================================================= */

:root {
   /* =======================================================
     Brand / Semantic Colors
  ======================================================= */

   --travel-primary: #0EA5E9;
   --travel-secondary: #06B6D4;
   --travel-accent: #F59E0B;
   --travel-dark: #0C4A6E;
   --travel-light: #E0F2FE;

   --color-primary: #218c4a;
   --color-primary-hover: #1a7038;
   --color-primary-light: #e8f5ee;

   --color-secondary: #64748b;

   --color-success: #16a34a;
   --color-danger: #dc2626;
   --color-warning: #f59e0b;

   /* Text semantic */
   --text-strong: var(--color-gray-900);
   --text-base: var(--color-gray-800);
   --text-muted: var(--color-gray-600);
   --text-subtle: var(--color-gray-500);
   --text-inverse: #ffffff;

   /* Background / Surface semantic */
   --bg-body: #f9fafb;
   --bg-white: #ffffff;

   /* Surface scale (컴포넌트에서 더 명확하게 쓰기 위함) */
   --surface-1: var(--bg-white);
   --surface-2: var(--color-gray-50);
   --surface-3: var(--color-gray-100);

   /* Borders / Dividers */
   --border-base: var(--color-gray-200);
   --border-strong: var(--color-gray-300);
   --divider: var(--color-gray-200);

   /* Focus ring (접근성/일관성) */
   --focus-ring: 0 0 0 4px rgba(33, 140, 74, 0.18);

   /* =======================================================
     Grays
  ======================================================= */
   --color-gray-50: #f9fafb;
   --color-gray-100: #f3f4f6;
   --color-gray-200: #e5e7eb;
   --color-gray-300: #d1d5db;
   --color-gray-400: #9ca3af;
   --color-gray-500: #6b7280;
   --color-gray-600: #4b5563;
   --color-gray-700: #374151;
   --color-gray-800: #1f2937;
   --color-gray-900: #111827;

   /* =======================================================
     Spacing
  ======================================================= */
   --spacing-1: 0.25rem;
   --spacing-2: 0.5rem;
   --spacing-3: 0.75rem;
   --spacing-4: 1rem;
   --spacing-5: 1.25rem;
   --spacing-6: 1.5rem;
   --spacing-8: 2rem;
   --spacing-10: 2.5rem;
   --spacing-12: 3rem;
   --spacing-16: 4rem;
   --spacing-20: 5rem;
   --spacing-24: 6rem;

   /* =======================================================
     Typography
  ======================================================= */
   --font-size-xs: 0.75rem;
   --font-size-sm: 0.875rem;
   --font-size-base: 1rem;
   --font-size-lg: 1.125rem;
   --font-size-xl: 1.25rem;
   --font-size-2xl: 1.5rem;
   --font-size-3xl: 1.875rem;
   --font-size-4xl: 2.25rem;
   --font-size-5xl: 3rem;

   /* Line heights (컴포넌트에서 자주 필요) */
   --line-height-tight: 1.25;
   --line-height-snug: 1.4;
   --line-height-base: 1.6;
   --line-height-relaxed: 1.8;

   /* =======================================================
     Border Radius
  ======================================================= */
   --radius-sm: 0.25rem;
   --radius-md: 0.375rem;
   --radius-lg: 0.5rem;
   --radius-xl: 0.75rem;
   --radius-2xl: 1rem;
   --radius-3xl: 1.5rem;
   --radius-full: 9999px;

   /* =======================================================
     Shadows
  ======================================================= */
   --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
   --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
   --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
   --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);

   /* =======================================================
     Transitions
  ======================================================= */
   --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
   --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
   --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

   /* =======================================================
     Container
  ======================================================= */
   --container-max-width: 80rem;
   --container-padding: 1rem;

   /* =======================================================
     Z-index (충돌 방지: 더 여유 있게 스케일 업)
     - 기존 프로젝트에서 2000/9999 같은 값이 튀는 경우가 있어
       최상단을 10000대로 잡아둠
  ======================================================= */
   --z-dropdown: 700;
   --z-header: 800;
   --z-floating: 900;
   --z-overlay: 5000;
   --z-modal: 6000;
   --z-toast: 7000;
   --z-popover: 8000;
   --z-max: 10000;

   /* =======================================================
     Header
  ======================================================= */
   --header-height: 60px;

   /* 레거시 배경/서피스 */
   --color-bg: var(--bg-body);
   --color-surface: var(--surface-1);

   /* 레거시 보더 */
   --color-border: var(--border-base);
}

/* =========================================================
   Media Query Breakpoints
========================================================= */
@media (min-width: 640px) {
   :root {
      --container-padding: 1.5rem;
   }
}

@media (min-width: 1024px) {
   :root {
      --container-padding: 2rem;
   }
}