/**
 * CSS Variables (Design Tokens)
 *
 * 전역 CSS 변수 정의
 * 참고: docs/DESIGN_SYSTEM.md
 */

:root {
  /* =========================================
   * 색상 시스템
   * ========================================= */

  /* Primary (Blue) */
  --color-primary-50: #E3F2FD;
  --color-primary-100: #BBDEFB;
  --color-primary-200: #90CAF9;
  --color-primary-300: #64B5F6;
  --color-primary-400: #42A5F5;
  --color-primary-500: #2196F3;
  --color-primary-600: #1E88E5;
  --color-primary-700: #1976D2;
  --color-primary-800: #1565C0;
  --color-primary-900: #0D47A1;

  /* Secondary (Green) */
  --color-secondary-50: #E8F5E9;
  --color-secondary-100: #C8E6C9;
  --color-secondary-200: #A5D6A7;
  --color-secondary-300: #81C784;
  --color-secondary-400: #66BB6A;
  --color-secondary-500: #4CAF50;
  --color-secondary-600: #43A047;
  --color-secondary-700: #388E3C;
  --color-secondary-800: #2E7D32;
  --color-secondary-900: #1B5E20;

  /* Neutral (Gray) */
  --color-neutral-50: #FAFAFA;
  --color-neutral-100: #F5F5F5;
  --color-neutral-200: #EEEEEE;
  --color-neutral-300: #E0E0E0;
  --color-neutral-400: #BDBDBD;
  --color-neutral-500: #9E9E9E;
  --color-neutral-600: #757575;
  --color-neutral-700: #616161;
  --color-neutral-800: #424242;
  --color-neutral-900: #212121;

  /* Semantic Colors */
  --color-success: #4CAF50;
  --color-warning: #FF9800;
  --color-error: #F44336;
  --color-info: #2196F3;

  /* Background */
  --color-bg-primary: #FFFFFF;
  --color-bg-secondary: #F5F5F5;
  --color-bg-canvas: #FAFAFA;

  /* Text */
  --color-text-primary: #212121;
  --color-text-secondary: #757575;
  --color-text-disabled: #BDBDBD;
  --color-text-inverse: #FFFFFF;

  /* Node Palette */
  --node-color-blue: #2196F3;
  --node-color-green: #4CAF50;
  --node-color-orange: #FF9800;
  --node-color-red: #F44336;
  --node-color-purple: #9C27B0;
  --node-color-cyan: #00BCD4;
  --node-color-pink: #E91E63;
  --node-color-teal: #009688;

  /* =========================================
   * 타이포그래피
   * ========================================= */
  --font-family-base: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;

  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 30px;

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

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

  /* =========================================
   * 간격 (8px Grid)
   * ========================================= */
  --spacing-0: 0;
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-10: 40px;
  --spacing-12: 48px;
  --spacing-16: 64px;

  /* =========================================
   * 테두리
   * ========================================= */
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-full: 9999px;

  --border-width-thin: 1px;
  --border-width-medium: 2px;
  --border-width-thick: 3px;

  /* =========================================
   * 그림자
   * ========================================= */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);

  --shadow-node: 0 2px 8px rgba(0, 0, 0, 0.12);
  --shadow-node-hover: 0 4px 12px rgba(0, 0, 0, 0.16);
  --shadow-node-selected: 0 0 0 2px var(--color-primary-500);

  /* =========================================
   * 트랜지션
   * ========================================= */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;

  /* =========================================
   * Z-Index
   * ========================================= */
  --z-canvas: 1;
  --z-connection: 10;
  --z-node: 20;
  --z-node-selected: 30;
  --z-toolbar: 100;
  --z-sidebar: 200;
  --z-dropdown: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-tooltip: 600;
  --z-toast: 700;

  /* =========================================
   * 레이아웃
   * ========================================= */
  --header-height: 56px;
  --sidebar-width: 280px;
  --toolbar-height: 48px;
  --minimap-size: 200px;
}

/* 다크 모드 (추후 구현) */
@media (prefers-color-scheme: dark) {
  :root {
    /* 다크 모드 변수는 Phase 4에서 구현 */
  }
}