/* =====================================================
   variables.css - CSS Custom Properties (Design Tokens)
   ===================================================== */

:root {
  /* ─── Brand Colors — 모노크롬 블랙 (Black & White) ─── */
  /* 메인 색상은 블랙. 인터랙티브 요소(버튼/활성/포커스)는 모두 무채색으로 통일한다. */
  --color-primary:        #18181b;   /* near-black (zinc-900) */
  --color-primary-dark:   #000000;   /* pure black — hover */
  --color-primary-light:  #3f3f46;   /* zinc-700 */
  --color-primary-pale:   #f4f4f5;   /* zinc-100 — subtle tint (badge/alert bg) */
  --color-focus-ring:     rgba(24, 24, 27, 0.15);  /* 무채색 포커스 링 */

  /* ─── Semantic Colors ─── */
  /* 블랙&화이트 톤을 유지하되, 상태 전달을 위한 최소한의 시맨틱 색상만 보존한다. */
  --color-success:        #16a34a;
  --color-success-pale:   #f0fdf4;
  --color-warning:        #d97706;
  --color-warning-pale:   #fffbeb;
  --color-danger:         #dc2626;
  --color-danger-pale:    #fef2f2;
  --color-star:           #f5b301;   /* 즐겨찾기 별 (gold) */
  --color-info:           #52525b;   /* info도 무채색 계열로 정렬 */
  --color-info-pale:      #f4f4f5;

  /* ─── Neutral Palette (zinc scale) ─── */
  --color-white:          #ffffff;
  --color-bg:             #fafafa;   /* zinc-50 — page background */
  --color-bg-secondary:   #f4f4f5;   /* zinc-100 */
  --color-surface:        #ffffff;

  --color-border:         #e4e4e7;   /* zinc-200 */
  --color-border-strong:  #d4d4d8;   /* zinc-300 */

  --color-text:           #18181b;   /* zinc-900 */
  --color-text-secondary: #52525b;   /* zinc-600 */
  --color-text-muted:     #a1a1aa;   /* zinc-400 */
  --color-text-inverse:   #ffffff;

  /* ─── Sidebar — 화이트 배경 · 블랙 활성 ─── */
  --sidebar-bg:           #ffffff;
  --sidebar-text:         #52525b;   /* zinc-600 */
  --sidebar-text-muted:   #a1a1aa;   /* zinc-400 */
  --sidebar-active-bg:    #18181b;   /* 블랙 활성 배경 — 메인 색상 강조 */
  --sidebar-active-text:  #ffffff;   /* 블랙 위 화이트 텍스트 */
  --sidebar-hover-bg:     #f4f4f5;   /* zinc-100 */
  --sidebar-hover-text:   #18181b;   /* hover 시 진한 텍스트 (밝은 hover 배경 대응) */
  --sidebar-border:       #e4e4e7;

  /* ─── Layout Dimensions ─── */
  --sidebar-width:        240px;
  --sidebar-collapsed:    64px;
  --header-height:        60px;

  /* ─── Typography ─── */
  --font-family:          'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-size-xs:         0.75rem;    /* 12px */
  --font-size-sm:         0.875rem;   /* 14px */
  --font-size-base:       1rem;       /* 16px */
  --font-size-lg:         1.125rem;   /* 18px */
  --font-size-xl:         1.25rem;    /* 20px */
  --font-size-2xl:        1.5rem;     /* 24px */
  --font-size-3xl:        1.875rem;   /* 30px */

  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --line-height-tight:    1.25;
  --line-height-normal:   1.5;
  --line-height-relaxed:  1.75;

  /* ─── Spacing ─── */
  --space-1:  0.25rem;
  --space-2:  0.25rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* ─── Border Radius ─── */
  --radius-sm:   0.25rem;
  --radius-base: 0.375rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-full: 9999px;

  /* ─── Shadows — 플랫/헤어라인 지향 (surface는 border로 구분, 오버레이만 실제 그림자) ─── */
  --shadow-xs:  0 1px 1px 0 rgba(24, 24, 27, 0.03);
  --shadow-sm:  0 1px 2px 0 rgba(24, 24, 27, 0.04);
  --shadow-md:  0 4px 12px -2px rgba(24, 24, 27, 0.10), 0 2px 4px -2px rgba(24, 24, 27, 0.06);
  --shadow-lg:  0 12px 28px -6px rgba(24, 24, 27, 0.14), 0 4px 8px -4px rgba(24, 24, 27, 0.08);
  --shadow-xl:  0 24px 48px -12px rgba(24, 24, 27, 0.20), 0 8px 16px -8px rgba(24, 24, 27, 0.10);

  /* ─── Transitions ─── */
  --transition-fast:   150ms ease;
  --transition-base:   200ms ease;
  --transition-slow:   300ms ease;

  /* ─── Z-index ─── */
  --z-sidebar:  100;
  --z-header:   200;
  --z-dropdown: 300;
  --z-modal:    400;
  --z-toast:    500;
}