/**
 * CSS 변수 정의 (2026-02-22 리팩토링 v2)
 * 원본 변수 유지 + 새 색상 팔레트 적용
 */

@import url('https://cdn.jsdelivr.net/gh/wanteddev/wanted-sans@v1.0.1/packages/wanted-sans/fonts/webfonts/variable/split/WantedSansVariable.min.css');

:root {
  /* ========== 색상 시스템 (NEW) ========== */
  
  /* Primary Colors - 메인 컬러 */
  --color-primary: #2563eb;           /* Blue 600 - 메인 */
  --color-primary-dark: #1d4ed8;      /* Blue 700 - 진한 버전 */
  --color-primary-light: #3b82f6;     /* Blue 500 - 밝은 버전 */
  --color-primary-lighter: #60a5fa;   /* Blue 400 - 더 밝은 버전 */
  
  /* Secondary Colors - 서브 컬러 */
  --color-secondary-1: #a6a6dd;       /* 보라빛 파랑 */
  --color-secondary-2: #e6f4f1;       /* 민트 */
  --color-secondary-3: #eee8a9;       /* 연한 노랑 */
  
  /* Neutral Colors - Slate 계열 (통일) */
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-slate-50: #F8FAFC;
  --color-slate-100: #F1F5F9;
  --color-slate-200: #E2E8F0;
  --color-slate-300: #CBD5E1;
  --color-slate-400: #94A3B8;
  --color-slate-500: #64748B;
  --color-slate-600: #475569;
  --color-slate-700: #334155;
  --color-slate-800: #1E293B;
  --color-slate-900: #0F172A;
  
  /* Gray Aliases (호환성 - Slate와 동일) */
  --color-gray-50: #F8FAFC;
  --color-gray-100: #F1F5F9;
  --color-gray-200: #E2E8F0;
  --color-gray-300: #CBD5E1;
  --color-gray-400: #94A3B8;
  --color-gray-500: #64748B;
  --color-gray-600: #475569;
  --color-gray-700: #334155;
  --color-gray-800: #1E293B;
  --color-gray-900: #0F172A;
  
  /* Semantic Colors */
  --color-success: #10B981;
  --color-success-light: #D1FAE5;
  --color-success-dark: #059669;      /* Emerald 600 */
  --color-warning: #F59E0B;
  --color-warning-light: #FEF3C7;
  --color-warning-dark: #D97706;      /* Amber 600 */
  --color-error: #EF4444;
  --color-error-light: #FEE2E2;
  --color-error-dark: #B91C1C;        /* Red 700 */
  --color-info: #2563eb;              /* Primary와 동일 */
  --color-info-light: #DBEAFE;
  --color-info-lighter: #BFDBFE;      /* Blue 200 */
  
  /* Background Colors */
  --bg-primary: #FFFFFF;
  --bg-secondary: #F8FAFC;            /* Slate 50 */
  --bg-tertiary: #F1F5F9;             /* Slate 100 */
  --bg-warm: #FFF8F0;
  --bg-accent-1: #a6a6dd;             /* 서브컬러1 (보라빛 파랑) */
  --bg-accent-2: #e6f4f1;             /* 서브컬러2 (민트) */
  --bg-accent-3: #eee8a9;             /* 서브컬러3 (연한 노랑) */
  
  /* Text Colors */
  --text-primary: #0F172A;            /* Slate 900 */
  --text-secondary: #64748B;          /* Slate 500 */
  --text-tertiary: #94A3B8;           /* Slate 400 */
  --text-inverse: #FFFFFF;
  --text-accent: #a6a6dd;             /* 서브컬러1 (보라빛 파랑) */
  
  /* Border Colors */
  --border-light: #E2E8F0;            /* Slate 200 */
  --border-medium: #CBD5E1;           /* Slate 300 */
  --border-dark: #94A3B8;             /* Slate 400 */
  --border-accent: #a6a6dd;           /* 서브컬러1 (보라빛 파랑) */
  --border-color: #e8eaed;            /* 공통 테두리 색상 */
  
  /* ========== 레이아웃 크기 ========== */
  
  /* Sidebar */
  --sidebar-width: 280px;
  --sidebar-collapsed-width: 64px;
  --sidebar-header-height: 80px;
  --sidebar-footer-height: 80px;
  
  /* Content */
  --content-max-width: 1600px;
  --content-padding: 32px;
  
  /* ========== 간격 시스템 ========== */
  
  --spacing-0: 0;
  --spacing-1: 0.25rem;   /* 4px */
  --spacing-2: 0.5rem;    /* 8px */
  --spacing-3: 0.75rem;   /* 12px */
  --spacing-4: 1rem;      /* 16px */
  --spacing-5: 1.25rem;   /* 20px */
  --spacing-6: 1.5rem;    /* 24px */
  --spacing-8: 2rem;      /* 32px */
  --spacing-10: 2.5rem;   /* 40px */
  --spacing-12: 3rem;     /* 48px */
  --spacing-16: 4rem;     /* 64px */
  --spacing-20: 5rem;     /* 80px */
  
  /* ========== 타이포그래피 ========== */
  
  /* Font Family */
  --font-primary: 'Wanted Sans Variable', 'Wanted Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  
  /* Font Size */
  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.875rem;    /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg: 1.125rem;    /* 18px */
  --text-xl: 1.25rem;     /* 20px */
  --text-2xl: 1.5rem;     /* 24px */
  --text-3xl: 1.875rem;   /* 30px */
  --text-4xl: 2.25rem;    /* 36px */
  --text-5xl: 3rem;       /* 48px */
  
  /* Font Weight */
  --font-thin: 100;
  --font-extralight: 200;
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;
  --font-black: 900;
  
  /* Line Height */
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  
  /* ========== 그림자 ========== */
  
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  
  /* ========== 둥근 모서리 ========== */
  
  --radius-sm: 0.25rem;   /* 4px */
  --radius-md: 0.375rem;  /* 6px */
  --radius-lg: 0.5rem;    /* 8px */
  --radius-xl: 0.75rem;   /* 12px */
  --radius-2xl: 1rem;     /* 16px */
  --radius-full: 9999px;
  
  /* ========== 전환 효과 ========== */
  
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-medium: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
  
  /* ========== Z-Index ========== */

  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-header: 200;                    /* prod-header용 (sticky와 동일 레벨) */
  --z-fixed: 300;
  --z-sidebar: 400;
  --z-modal-backdrop: 500;
  --z-modal: 10001;
  --z-popover: 600;
  --z-tooltip: 700;
  --z-toast: 800;
  --z-overlay: 9999;
  --z-confirm: 10002;
}

/* ========== 다크 테마 변수 ========== */

[data-theme="dark"] {
  /* ── 배경 ── */
  --bg-primary: #1E293B;              /* Slate 800 */
  --bg-secondary: #0F172A;            /* Slate 900 */
  --bg-tertiary: #334155;             /* Slate 700 */
  --bg-warm: #1A2030;                 /* 다크용 따뜻한 배경 (warm 계열 대체) */

  /* ── 텍스트 ── */
  --text-primary: #F1F5F9;            /* Slate 100 */
  --text-secondary: #94A3B8;          /* Slate 400 */
  --text-tertiary: #64748B;           /* Slate 500 */
  --text-inverse: #0F172A;
  --text-accent: #818cf8;             /* Indigo 400 — 다크에서 accent 색상 */

  /* ── 테두리 ── */
  --border-light: #334155;            /* Slate 700 */
  --border-medium: #475569;           /* Slate 600 */
  --border-dark: #64748B;             /* Slate 500 */
  --border-accent: #6366F1;           /* 다크에서 accent 테두리 */
  --border-color: #3a3f4b;            /* 공통 테두리 색상 (다크) */

  /* ── Slate 팔레트 반전 ── */
  --color-slate-50: #1E293B;
  --color-slate-100: #334155;
  --color-slate-200: #475569;
  --color-slate-300: #64748B;
  --color-slate-400: #94A3B8;
  --color-slate-500: #CBD5E1;
  --color-slate-600: #E2E8F0;
  --color-slate-700: #F1F5F9;
  --color-slate-800: #F8FAFC;
  --color-slate-900: #FFFFFF;

  /* ── Semantic 배경 (다크용) ── */
  --color-success-light: #064E3B;     /* 어두운 초록 배경 */
  --color-warning-light: #78350F;     /* 어두운 노랑 배경 */
  --color-error-light: #7F1D1D;       /* 어두운 빨강 배경 */
  --color-info-light: #1E3A5F;        /* 어두운 파랑 배경 */
  --color-info-lighter: #1E40AF;      /* 어두운 파랑 보조 */

  /* ── 다크 전용 텍스트 색상 (밝은 계열) ── */
  --dk-success-text: #6EE7B7;         /* Emerald 300 */
  --dk-warning-text: #FCD34D;         /* Amber 300 */
  --dk-error-text: #FCA5A5;           /* Red 300 */
  --dk-info-text: #93C5FD;            /* Blue 300 */
  --dk-pink-text: #F472B6;            /* Pink 400 */
  --dk-orange-text: #FDBA74;          /* Orange 300 */
  --dk-purple-text: #D8B4FE;          /* Purple 300 */
  --dk-teal-text: #5EEAD4;            /* Teal 300 */
  --dk-yellow-text: #FDE68A;          /* Amber 200 */

  /* ── 다크 전용 배지 배경 ── */
  --dk-purple-bg: #3B0764;            /* Purple 950 */
  --dk-teal-bg: #134E4A;              /* Teal 900 */
  --dk-yellow-bg: #713F12;            /* Amber 900 */

  /* ── Gray 팔레트 재정의 (productivity/performance 테이블 등) ── */
  --color-gray-50: #1E293B;           /* bg-primary */
  --color-gray-100: #334155;          /* bg-tertiary */
  --color-gray-200: #475569;          /* border-medium */
  --color-gray-300: #64748B;
  --color-gray-400: #94A3B8;
  --color-gray-500: #CBD5E1;
  --color-gray-600: #E2E8F0;
  --color-gray-700: #F1F5F9;
  --color-gray-800: #F8FAFC;
  --color-gray-900: #FFFFFF;

  /* ── 흰색 재정의 (카드 헤더 텍스트, 버튼 등) ── */
  --color-white: #F1F5F9;             /* 다크에서 "흰색"은 밝은 텍스트 */

  /* ── Accent 재정의 (prod-table thead 등) ── */
  --bg-accent-1: #2D3B55;
  --bg-accent-2: #1A3040;
  --bg-accent-3: #2D3748;             /* 노란 헤더 → 어두운 slate */

  /* ── Secondary 색상 재정의 (category-tab border 등) ── */
  --color-secondary-1: #6366F1;       /* 다크에서 더 밝은 indigo */

  /* ── Primary 밝은 변형 재정의 (다크에서 active/selected 색상용) ── */
  --color-primary-light: #60A5FA;     /* Blue 400 — 다크배경에서 선명하게 */
  --color-primary-lighter: #BFDBFE;   /* Blue 200 — 다크 selected 배경용 (연한 파랑) */

  /* ── Semantic Colors (다크에서 채도 조정) ── */
  --color-success: #34D399;           /* Emerald 400 — 다크배경에서 선명하게 */
  --color-warning: #FBBF24;           /* Amber 400 — 다크배경에서 선명하게 */
  --color-error: #F87171;             /* Red 400 — 다크배경에서 선명하게 */
  --color-info: #60A5FA;              /* Blue 400 — 다크배경에서 선명하게 */

  /* ── Shadow ── */
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
}

/* ========== Global Reset ========== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-primary);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background-color: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}