/* ============================================================
 * 도매실적지도 - 디자인 토큰 (Design Tokens)
 * ============================================================
 *
 * store-locate 디자인 시스템을 기반으로 도매실적지도 프로젝트용으로
 * 커스터마이즈한 디자인 토큰입니다.
 *
 * 차별점: Primary 색상을 청색(#0066CC) → 에메랄드/틸(#0F766E) 계열로 변경
 *   - 실적/성과 지표 느낌을 전달 (초록 = 성장/매출)
 *   - store-locate와 시각적으로 명확히 구분
 *
 * 원칙:
 *   1. 변수명은 store-locate와 동일하게 유지 (에이전트 간 혼동 방지)
 *   2. 하드코딩 금지, 반드시 var() 사용
 *   3. 플랫 디자인, 그라데이션 금지
 *   4. border-radius 8px 이하, transition 0.2s 이하
 *
 * ============================================================
 */

:root {
  /* ===========================================
   * 색상 시스템 (Color System)
   * =========================================== */

  /* Primary - 에메랄드/틸 (도매실적지도 브랜드 컬러) */
  --color-primary: #0F766E;           /* 기본 - 버튼, 링크, 마커 */
  --color-primary-light: #14B8A6;     /* 밝은 - 호버 상태 */
  --color-primary-dark: #115E59;      /* 어두운 - 액티브 상태 */
  --color-primary-pale: #CCFBF1;      /* 연한 - 배경, 배지 */

  /* Secondary - 실적 강조용 (보조 브랜드 컬러, 자주색) */
  --color-secondary: #7C3AED;
  --color-secondary-light: #A78BFA;
  --color-secondary-dark: #5B21B6;
  --color-secondary-pale: #EDE9FE;

  /* Neutral 색상 */
  --color-black: #000000;
  --color-gray-900: #1A1A1A;
  --color-gray-800: #333333;
  --color-gray-700: #4D4D4D;
  --color-gray-600: #666666;
  --color-gray-500: #808080;
  --color-gray-400: #999999;
  --color-gray-300: #CCCCCC;
  --color-gray-200: #E5E5E5;
  --color-gray-100: #F5F5F5;
  --color-gray-50: #FAFAFA;
  --color-white: #FFFFFF;

  /* Semantic 색상 */
  --color-success: #10B981;
  --color-success-light: #34D399;
  --color-success-dark: #059669;
  --color-success-pale: #ECFDF5;

  --color-warning: #F59E0B;
  --color-warning-light: #FBBF24;
  --color-warning-dark: #D97706;
  --color-warning-pale: #FEF3C7;

  --color-error: #EF4444;
  --color-error-light: #F87171;
  --color-error-dark: #DC2626;
  --color-error-pale: #FEE2E2;

  --color-info: #3B82F6;
  --color-info-light: #60A5FA;
  --color-info-dark: #2563EB;
  --color-info-pale: #DBEAFE;

  /* 실적 등급 색상 (도매실적지도 전용) */
  --color-rank-high: #0F766E;         /* 상위 실적 - primary와 동일 */
  --color-rank-mid: #F59E0B;          /* 중위 실적 - warning */
  --color-rank-low: #94A3B8;          /* 하위 실적 - 중성 회색 */
  --color-rank-none: #CBD5E1;         /* 실적 없음 */

  /* 매장 유형 칩 색상 (stores.store_type) */
  --color-chip-road-bg: #D1FAE5;      /* 로드 - 에메랄드 pale */
  --color-chip-road-text: #065F46;    /* 로드 - 에메랄드 dark */
  --color-chip-group-bg: #FFEDD5;     /* 집단 - 주황 pale */
  --color-chip-group-text: #9A3412;   /* 집단 - 주황 dark */


  /* ===========================================
   * 타이포그래피 (Typography)
   * =========================================== */

  --font-family-base: -apple-system, BlinkMacSystemFont,
                       "Apple SD Gothic Neo", "Pretendard",
                       "Noto Sans KR", sans-serif;

  --font-family-mono: "SF Mono", Monaco, Consolas,
                      "Liberation Mono", monospace;

  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 28px;
  --font-size-4xl: 32px;

  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

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


  /* ===========================================
   * 간격 시스템 (Spacing System) - 8px 기반
   * =========================================== */

  --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;
  --spacing-20: 80px;


  /* ===========================================
   * 레이아웃 (Layout)
   * =========================================== */

  /* 브레이크포인트 (store-locate와 동일) */
  --breakpoint-mobile: 0px;
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 1024px;
  --breakpoint-wide: 1280px;

  --container-max-width: 1200px;
  --container-padding-mobile: 16px;
  --container-padding-desktop: 24px;

  /* 헤더 */
  --header-height: 56px;

  /* 사이드바 (PC 전용) - performance-agent 전용 영역 */
  --sidebar-width: 380px;

  /* 바텀시트 (모바일 전용) */
  --bottomsheet-closed: 88px;
  --bottomsheet-half: 50vh;
  --bottomsheet-full: 85vh;


  /* ===========================================
   * 디자인 토큰
   * =========================================== */

  /* 둥글기 - 8px 이하 */
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-full: 9999px;              /* 원형 뱃지, 아바타용 */

  /* 그림자 - 미세하게 */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 2px 8px rgba(0, 0, 0, 0.12);
  --shadow-overlay: 0 4px 16px rgba(0, 0, 0, 0.15);  /* 오버레이 패널용 */

  /* 애니메이션 - 0.2s 이하 */
  --transition-fast: 0.1s ease-in-out;
  --transition-normal: 0.2s ease-in-out;

  /* Z-Index 체계 */
  --z-base: 0;
  --z-map: 1;                         /* 지도 */
  --z-overlay: 50;                    /* 지도 위 오버레이 UI */
  --z-header: 100;                    /* 상단 헤더 */
  --z-sidebar: 150;                   /* 사이드바 (PC) */
  --z-bottomsheet: 200;               /* 바텀시트 (모바일) */
  --z-dropdown: 300;                  /* 드롭다운 */
  --z-modal-backdrop: 400;            /* 모달 배경 */
  --z-modal: 410;                     /* 모달 본체 */
  --z-toast: 500;                     /* 토스트 메시지 */
  --z-loader: 9999;                   /* 전체 로더 */


  /* ===========================================
   * 기타 (Miscellaneous)
   * =========================================== */

  --touch-target-min: 44px;
  --input-height: 44px;
  --button-height-sm: 36px;
  --button-height-md: 44px;
  --button-height-lg: 52px;

  /* ===========================================
   * 확장 토큰 (대리점 칩 / 카드 섹션 / 필터 패널)
   * =========================================== */

  /* 우리 회사 대리점 칩 (빨강) */
  --color-chip-own-bg: #FEE2E2;
  --color-chip-own-text: #991B1B;
  --color-chip-own-border: #DC2626;

  /* 기타 대리점 칩 (연회색) */
  --color-chip-other-bg: #F3F4F6;
  --color-chip-other-text: #6B7280;

  /* 카드 섹션 배경 (색상 분할) */
  --color-card-section-info: #F0FDF4;     /* 연민트 — 기본정보 */
  --color-card-section-month: #FFFFFF;    /* 흰색 — 월블록 */
  --color-card-section-detail: #FEF3C7;   /* 연노랑 — 상세 펼침 */
  --color-card-section-nearby: #EFF6FF;   /* 연파랑 — 주변 매장 */

  /* 필터 UI */
  --filter-panel-width: 280px;
  --filter-panel-bg: rgba(255, 255, 255, 0.96);
  --filter-panel-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}