/**
 * PickSignal Design Tokens v2 (Blue Edition)
 * 
 * 이 파일은 PickSignal의 디자인 시스템 원본(Single Source of Truth)입니다.
 * 모든 화면은 여기 정의된 변수(토큰)만 사용해야 합니다.
 * 
 * 조사 결과 반영 (2026-04-21):
 * - 현재 프로젝트는 블루 팔레트 기반 (#3b82f6, #1d4ed8, #5B8DEF 등)
 * - 바이올렛 미사용 → 블루 공식화 방향 채택
 * - 이미 mobile.css 에 일부 토큰(--bg, --primary 등) 존재 → 호환성 유지
 * 
 * Updated: 2026-04-21
 */

:root {
  /* =================================================================
   * 1. COLORS — Brand (블루 기반)
   * ================================================================= */
  --ps-primary: #3b82f6;              /* Tailwind blue-500 (현재 13건 사용 중) */
  --ps-primary-hover: #1d4ed8;        /* Tailwind blue-700 (현재 16건 사용 중) */
  --ps-primary-active: #1e40af;       /* blue-800, pressed 상태 */
  --ps-primary-light: #eff6ff;        /* Tailwind blue-50 (현재 12건 사용 중) */
  --ps-primary-lighter: #f8faff;      /* 극연한 배경 */

  /* Accent (서브 브랜드 컬러) */
  --ps-accent: #5B8DEF;               /* 하늘빛 블루 (현재 20건 사용 중) */
  --ps-accent-light: #EBF1FD;         /* 연 블루 (현재 10건 사용 중) */

  /* 하위 호환용 alias (기존 mobile.css 토큰 지원) */
  --primary: var(--ps-primary);
  --primary-hover: var(--ps-primary-hover);

  /* =================================================================
   * 2. COLORS — Neutral (배경 / 텍스트 / 경계선)
   * ================================================================= */
  /* 배경 */
  --ps-canvas: #F7F8FA;              /* 페이지 전체 배경 (살짝 블루 틴트) */
  --ps-surface: #FFFFFF;             /* 카드 / 모달 / 입력 배경 */
  --ps-surface-elevated: #FFFFFF;    /* shadow와 함께 쓰는 떠있는 요소 */
  --ps-surface-sunken: #F3F4F8;      /* 비활성 영역 */

  /* 하위 호환 */
  --bg: var(--ps-canvas);
  --white: var(--ps-surface);

  /* 텍스트 (9단계 Gray) */
  --ps-ink: #0B1628;                 /* 헤딩 (거의 검정, 살짝 블루 틴트) */
  --ps-ink-80: #1F2937;              /* 본문 */
  --ps-ink-60: #4B5563;              /* 보조 텍스트 / 라벨 */
  --ps-ink-40: #9CA3AF;              /* 힌트 / 플레이스홀더 (현재 11건 사용 중) */
  --ps-ink-20: #D1D5DB;              /* 비활성 */

  /* 하위 호환 */
  --text: var(--ps-ink);
  --text-muted: var(--ps-ink-60);
  --g50: var(--ps-surface-sunken);
  --g400: var(--ps-ink-40);
  --g500: #6b7280;                   /* Tailwind gray-500 (현재 9건 사용 중) */
  --g900: #111827;                   /* Tailwind gray-900 (현재 12건 사용 중) */

  /* 경계선 */
  --ps-border: #E5E7EB;              /* 기본 경계선 */
  --ps-border-strong: #D1D5DB;       /* 강조 경계선 */
  --ps-border-subtle: #F3F4F6;       /* 약한 구분선 */
  --border: var(--ps-border);

  /* =================================================================
   * 3. COLORS — Semantic
   * ================================================================= */
  /* 성공 (녹색 계열, 현재 #4BA07A 10건 사용 중) */
  --ps-success: #10B981;             /* emerald-500 */
  --ps-success-light: #D1FAE5;       /* emerald-100 */
  --ps-success-dark: #047857;        /* emerald-700 */

  /* 경고 (앰버 계열, 현재 #f59e0b 8건, #f5a623 8건 사용 중) */
  --ps-warning: #F59E0B;             /* amber-500 */
  --ps-warning-light: #FEF3C7;       /* amber-100 */
  --ps-warning-dark: #B45309;        /* amber-700 */

  /* 위험 (현재 #ef4444 23건 사용 중) */
  --ps-danger: #EF4444;              /* red-500 */
  --ps-danger-light: #FEE2E2;        /* red-100 */
  --ps-danger-dark: #B91C1C;         /* red-700 */

  /* 정보 (브랜드 컬러와 동일 계열) */
  --ps-info: var(--ps-primary);
  --ps-info-light: var(--ps-primary-light);
  --ps-info-dark: var(--ps-primary-hover);

  /* =================================================================
   * 4. COLORS — Signal (PickSignal 고유 · 반응 추적용)
   * ================================================================= */
  /* 핫 (강한 관심) */
  --ps-signal-hot: var(--ps-danger);
  --ps-signal-hot-light: var(--ps-danger-light);

  /* 웜 (관찰 필요) */
  --ps-signal-warm: var(--ps-warning);
  --ps-signal-warm-light: var(--ps-warning-light);

  /* 쿨 (긍정 응답) */
  --ps-signal-cool: var(--ps-success);
  --ps-signal-cool-light: var(--ps-success-light);

  /* 중립 */
  --ps-signal-neutral: var(--ps-ink-60);
  --ps-signal-neutral-light: var(--ps-surface-sunken);

  /* =================================================================
   * 5. TYPOGRAPHY
   * ================================================================= */
  /* 폰트 패밀리 */
  --ps-font-sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif;
  --ps-font-mono: 'SF Mono', Menlo, Monaco, 'Courier New', monospace;

  /* 크기 (6단계) */
  --ps-text-xs: 11px;                /* 힌트, 뱃지 */
  --ps-text-sm: 13px;                /* 라벨, 보조 */
  --ps-text-base: 15px;              /* 본문 (모바일) */
  --ps-text-md: 16px;                /* 본문 (PC) */
  --ps-text-lg: 18px;                /* 섹션 타이틀 */
  --ps-text-xl: 22px;                /* 페이지 타이틀 */
  --ps-text-2xl: 28px;               /* 큰 숫자 / 히어로 */
  --ps-text-3xl: 36px;               /* 랜딩 히어로 */

  /* 굵기 (2단계만) */
  --ps-weight-regular: 400;
  --ps-weight-medium: 500;

  /* 줄간격 */
  --ps-leading-tight: 1.3;
  --ps-leading-normal: 1.5;
  --ps-leading-relaxed: 1.7;

  /* 자간 */
  --ps-tracking-tight: -0.01em;
  --ps-tracking-normal: 0;
  --ps-tracking-wide: 0.02em;

  /* =================================================================
   * 6. SPACING (8pt 그리드)
   * ================================================================= */
  --ps-space-0: 0;
  --ps-space-1: 4px;
  --ps-space-2: 8px;
  --ps-space-3: 12px;
  --ps-space-4: 16px;
  --ps-space-5: 20px;
  --ps-space-6: 24px;
  --ps-space-8: 32px;
  --ps-space-10: 40px;
  --ps-space-12: 48px;
  --ps-space-16: 64px;

  /* =================================================================
   * 7. RADIUS (4단계로 통일)
   * 
   * 현재 프로젝트: 4/5/6/7/8/9/10/12/20/99px 혼재 (10종)
   * 새 스케일: 4단계로 압축
   * ================================================================= */
  --ps-radius-sm: 4px;               /* 작은 요소 (뱃지 내부, 태그) */
  --ps-radius-md: 8px;               /* 입력 / 작은 버튼 / 칩 (현재 91건 사용 중) */
  --ps-radius-lg: 12px;              /* 카드 / 큰 버튼 (현재 11건 사용 중) */
  --ps-radius-xl: 16px;              /* 모달 / 바텀시트 */
  --ps-radius-full: 9999px;          /* pill / 원형 (현재 99px 44건 사용 중, 9999로 정규화) */

  /* 치환 매핑 (Phase A.2 에서 사용):
   * 4px, 5px → var(--ps-radius-sm)
   * 6px, 7px, 8px, 9px → var(--ps-radius-md)
   * 10px, 12px → var(--ps-radius-lg)
   * 16px, 20px → var(--ps-radius-xl)
   * 99px, 9999px → var(--ps-radius-full)
   */

  /* =================================================================
   * 8. SHADOW (절제해서 사용)
   * ================================================================= */
  --ps-shadow-none: none;
  --ps-shadow-sm: 0 1px 2px rgba(11, 22, 40, 0.04);
  --ps-shadow-md: 0 4px 12px rgba(11, 22, 40, 0.08);
  --ps-shadow-lg: 0 12px 32px rgba(11, 22, 40, 0.12);
  --ps-shadow-focus: 0 0 0 3px var(--ps-primary-light);

  /* =================================================================
   * 9. Z-INDEX (관리)
   * ================================================================= */
  --ps-z-base: 0;
  --ps-z-dropdown: 100;
  --ps-z-sticky: 200;
  --ps-z-overlay: 500;
  --ps-z-modal: 1000;
  --ps-z-toast: 2000;

  /* =================================================================
   * 10. TRANSITION
   * ================================================================= */
  --ps-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ps-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  --ps-duration-fast: 120ms;
  --ps-duration-normal: 200ms;
  --ps-duration-slow: 320ms;

  --ps-transition: all var(--ps-duration-normal) var(--ps-ease-out);
}

/* =====================================================================
 * GLOBAL RESET & BASE STYLES
 * ===================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--ps-font-sans);
  font-size: var(--ps-text-base);
  font-weight: var(--ps-weight-regular);
  line-height: var(--ps-leading-normal);
  color: var(--ps-ink);
  background: var(--ps-canvas);
  -webkit-tap-highlight-color: transparent;
  font-feature-settings: 'tnum' 0;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: var(--ps-weight-medium);
  line-height: var(--ps-leading-tight);
  letter-spacing: var(--ps-tracking-tight);
  color: var(--ps-ink);
}

h1 { font-size: var(--ps-text-2xl); }
h2 { font-size: var(--ps-text-xl); }
h3 { font-size: var(--ps-text-lg); }
h4 { font-size: var(--ps-text-md); }

p {
  margin: 0;
}

a {
  color: var(--ps-primary);
  text-decoration: none;
  transition: color var(--ps-duration-fast) var(--ps-ease-out);
}
a:hover {
  color: var(--ps-primary-hover);
}

button {
  font-family: inherit;
  cursor: pointer;
}

/* 숫자 전용 (금액/통계용) */
.ps-tnum {
  font-variant-numeric: tabular-nums;
}

/* =====================================================================
 * COLOR MIGRATION MAP (참고용 주석)
 * Phase A.1 에서 하드코딩 컬러를 아래 규칙대로 치환
 * =====================================================================
 *
 * ┌─ 브랜드 블루 ───────────────────────────────────────────────────
 * │ #3b82f6         → var(--ps-primary)
 * │ #1d4ed8         → var(--ps-primary-hover)
 * │ #eff6ff         → var(--ps-primary-light)
 * │ #5B8DEF         → var(--ps-accent)
 * │ #7BA7E8         → var(--ps-accent) 또는 별도 토큰
 * │ #EBF1FD         → var(--ps-accent-light)
 * │
 * ├─ 중립 ──────────────────────────────────────────────────────────
 * │ #fff, #ffffff   → var(--ps-surface)  ← 131건, 가장 많음
 * │ #111827         → var(--ps-g900) 또는 var(--ps-ink)
 * │ #6b7280         → var(--ps-g500) 또는 var(--ps-ink-60)
 * │ #9ca3af         → var(--ps-ink-40)
 * │
 * ├─ 시맨틱 ────────────────────────────────────────────────────────
 * │ #ef4444         → var(--ps-danger)
 * │ #f59e0b         → var(--ps-warning)
 * │ #f5a623         → var(--ps-warning) (유사값 통합)
 * │ #fffbeb         → var(--ps-warning-light)
 * │ #fff5f5         → var(--ps-danger-light) (유사값 통합)
 * │ #4BA07A         → var(--ps-success)
 * │
 * └─ 기타 (판단 필요) ──────────────────────────────────────────────
 *   #ffdead         → 33건, navajowhite. 쓰임새 확인 후 결정
 *   #00b4a6         → 11건, 틸 계열. accent 또는 제거
 *   #f0fffe         → 8건, 연민트. 제거 권장
 */

/* =====================================================================
 * LUCIDE ICON UTILITIES
 * 이모지 대체 아이콘용 공통 스타일
 * ===================================================================== */

/* 기본 아이콘 (16px, 부모 컬러 상속) */
.ps-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  stroke-width: 2;
  flex-shrink: 0;
  vertical-align: -3px;
}

/* 크기 변형 */
.ps-icon-sm { width: 14px; height: 14px; vertical-align: -2px; }
.ps-icon-lg { width: 20px; height: 20px; vertical-align: -4px; }
.ps-icon-xl { width: 24px; height: 24px; vertical-align: -5px; }
.ps-icon-2xl { width: 32px; height: 32px; vertical-align: -7px; }
.ps-icon-3xl { width: 40px; height: 40px; vertical-align: -9px; }

/* 컬러 변형 (맥락별) */
.ps-icon-primary { color: var(--ps-primary); }
.ps-icon-muted   { color: var(--ps-ink-60); }
.ps-icon-hint    { color: var(--ps-ink-40); }
.ps-icon-success { color: var(--ps-success); }
.ps-icon-warning { color: var(--ps-warning); }
.ps-icon-danger  { color: var(--ps-danger); }

/* 인라인 정렬 조정 (텍스트 옆 아이콘) */
.ps-icon-text {
  margin-right: 4px;
}

/* SVG 자체에 색 상속 강제 — 컨테이너 패턴 (.ps-icon 안에 svg 자식) 에만 적용.
 * lucide 가 <i data-lucide=...> 를 svg 로 치환할 때 svg 자체에 .ps-icon 이
 * 붙는 경우는 size 클래스 (.ps-icon-sm 등) 가 그대로 작동하도록
 * svg.ps-icon 셀렉터는 제외 (제거 시 모달·카드 아이콘이 거대해지는 버그 방지). */
.ps-icon > svg {
  width: 100%;
  height: 100%;
}