:root {
  /* 색상 - 라이트 모드 (중성 그레이 + 앰버 포인트) */
  --color-bg: #fafafa;
  --color-surface: #ffffff;
  --color-surface-hover: #f3f4f6;
  --color-surface-active: #e5e7eb;
  --color-border: #e5e7eb;
  --color-border-strong: #d1d5db;
  --color-border-focus: #1f2937;
  --color-text-primary: #111827;
  --color-text-secondary: #6b7280;
  --color-text-tertiary: #9ca3af;
  --color-text-placeholder: #9ca3af;

  /* 액센트: 다크 그레이 (선택/액티브 상태) */
  --color-accent: #1f2937;
  --color-accent-hover: #111827;
  --color-accent-text: #ffffff;
  --color-accent-soft: #f3f4f6;
  --color-accent-soft-strong: #e5e7eb;

  /* 포인트: 앰버 (고정/하이라이트만) */
  --color-point: #f59e0b;
  --color-point-hover: #d97706;
  --color-point-soft: rgba(245, 158, 11, 0.12);

  /* 시맨틱 */
  --color-danger: #dc2626;
  --color-danger-hover: #b91c1c;
  --color-danger-soft: rgba(220, 38, 38, 0.10);
  --color-success: #059669;
  --color-warning: #d97706;
  --color-pin: var(--color-point);

  /* 스크롤/오버레이/그림자 */
  --color-scrollbar: #d1d5db;
  --color-scrollbar-hover: #9ca3af;
  --color-overlay: rgba(15, 23, 42, 0.45);
  --color-shadow: rgba(15, 23, 42, 0.06);
  --color-shadow-md: rgba(15, 23, 42, 0.10);

  /* 태그 색상 팔레트 (차분한 톤) */
  --tag-blue: #3b82f6;
  --tag-green: #10b981;
  --tag-orange: #f59e0b;
  --tag-red: #ef4444;
  --tag-purple: #8b5cf6;
  --tag-teal: #14b8a6;
  --tag-gray: #6b7280;

  /* 여백 */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 24px;
  --spacing-2xl: 32px;

  /* 폰트 */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  --font-size-xs: 11px;
  --font-size-sm: 13px;
  --font-size-md: 15px;
  --font-size-lg: 18px;
  --font-size-xl: 22px;
  --font-size-2xl: 28px;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --line-height-tight: 1.3;
  --line-height-normal: 1.6;
  --line-height-relaxed: 1.8;

  /* 테두리 반경 */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* 그림자 */
  --shadow-sm: 0 1px 2px var(--color-shadow);
  --shadow-md: 0 4px 12px var(--color-shadow-md);
  --shadow-lg: 0 12px 28px var(--color-shadow-md);

  /* 전환 효과 */
  --transition-fast: 100ms ease;
  --transition-normal: 200ms ease;
  --transition-slow: 300ms ease;

  /* 레이아웃 */
  --nav-width: 220px;
  --nav-collapsed-width: 64px;
  --list-width: 220px;
  --list-min-width: 180px;
  --list-max-width: 360px;
  --toolbar-height: 56px;
  --toast-width: 320px;
}

/* 다크 모드 */
[data-theme="dark"] {
  --color-bg: #0f1115;
  --color-surface: #161922;
  --color-surface-hover: #1e2330;
  --color-surface-active: #252b3b;
  --color-border: #262b38;
  --color-border-strong: #353b4d;
  --color-border-focus: #e5e7eb;
  --color-text-primary: #e5e7eb;
  --color-text-secondary: #9ca3af;
  --color-text-tertiary: #6b7280;
  --color-text-placeholder: #4b5563;

  --color-accent: #e5e7eb;
  --color-accent-hover: #ffffff;
  --color-accent-text: #0f1115;
  --color-accent-soft: #1e2330;
  --color-accent-soft-strong: #252b3b;

  --color-point: #fbbf24;
  --color-point-hover: #f59e0b;
  --color-point-soft: rgba(251, 191, 36, 0.16);

  --color-danger: #f87171;
  --color-danger-hover: #ef4444;
  --color-danger-soft: rgba(248, 113, 113, 0.14);
  --color-success: #34d399;
  --color-warning: #fbbf24;

  --color-scrollbar: #262b38;
  --color-scrollbar-hover: #353b4d;
  --color-overlay: rgba(0, 0, 0, 0.65);
  --color-shadow: rgba(0, 0, 0, 0.4);
  --color-shadow-md: rgba(0, 0, 0, 0.6);

  --tag-blue: #60a5fa;
  --tag-green: #34d399;
  --tag-orange: #fbbf24;
  --tag-red: #f87171;
  --tag-purple: #a78bfa;
  --tag-teal: #2dd4bf;
  --tag-gray: #9ca3af;
}