/* LocalPick 디자인 토큰 (v1.1 기준안)
   색·글꼴·간격 값은 이 파일 한 곳에서만 정한다. 다른 CSS는 var(--…)만 쓴다.
   근거: CONTEXT.md §2~3, 결정 로그 2026-11-04 3차 */
:root {
  color-scheme: dark;

  /* 바탕 (다크) */
  --bg: #070b18;
  --bg-alt: #0a1020;
  --bg-deep: #050812;
  --surface: #0d1426;
  --surface-2: #131c35;
  --line: rgba(140, 165, 230, 0.16);
  --line-strong: rgba(140, 165, 230, 0.32);

  /* 글자 (모두 --bg 대비 4.5:1 이상) */
  --text: #e8edfa;
  --text-2: #aeb8d4;
  --muted: #9aa6c4;
  --dim: #7884a6;

  /* 브랜드: 인디고 (Primary #4338CA) */
  --indigo: #4338ca;
  --indigo-2: #6366f1;
  --indigo-3: #a5b4fc; /* 다크 바탕의 인디고 계열 글자·링크 */
  --indigo-4: #c7d2fe;
  --indigo-wash: rgba(67, 56, 202, 0.16);
  --indigo-glow: rgba(67, 56, 202, 0.26);

  /* 브랜드: 오렌지 (Accent #F97316) */
  --orange: #f97316; /* 주 버튼·선택(Pick) 채움 */
  --on-orange: #111827; /* 오렌지 바탕 위 글자 — 흰 글자 금지 */
  --orange-text-dark: #fb923c; /* 다크 바탕 전용 예외 (지침 #C2410C는 밝은 바탕용) */
  --orange-soft: #fdba74;
  --orange-wash: rgba(249, 115, 22, 0.16);
  --orange-glow: rgba(249, 115, 22, 0.38);

  /* 보조 상태 */
  --danger: #f87171; /* 입력 오류 테두리 */
  --danger-text: #fca5a5; /* 다크 바탕 오류 글자 — --bg 대비 10:1 이상 */
  --danger-wash: rgba(248, 113, 113, 0.12);
  --green-soft: #7fd9b5;
  --green-wash: rgba(63, 182, 139, 0.18);

  /* 로컬마케팅 채널 카드 고유 색 (2026-11-05 6차). 아이콘·라벨·배지·링크 글자와 오버 틴트에 쓴다 */
  --channel-bg: var(--surface); /* 지시값 #12142E와 비슷해 기존 카드 바탕 재사용 */
  --channel-line: rgba(255, 255, 255, 0.08);
  --ch-target: #818cf8; /* 지역 타겟 광고 */
  --ch-delivery: #38bdf8; /* 배달·판매 채널 */
  --ch-field: #2dd4bf; /* 현장 로컬마케팅 */
  --ch-kit: #f472b6; /* 판촉물 키트 */
  --ch-coupon: #a78bfa; /* 지역 한정 쿠폰·푸시 */
  --ch-matrix: #94a3b8; /* 동네 × 고객 매트릭스 */

  /* 지도 색 — 기본은 v1 인디고 농도. config.js의 mapPalette로 'wardType' 전환 */
  --map-high: #7ba2f0;
  --map-mid: #4777e0;
  --map-low: #2a4da8;
  --map-none: #1b2a55;
  --map-far: #26304e;
  --map-pick: var(--orange);

  /* 지침의 동네 유형 5색 (v2 비교용) */
  --ward-unexplored: #f97316;
  --ward-low: #fbbf24;
  --ward-growth: #22a06b;
  --ward-saturated: #60a5fa;
  --ward-far: #9ca3af;

  /* 글꼴 */
  --font-body: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --font-display: "Plus Jakarta Sans", var(--font-body);
  --font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --font-vi: "Be Vietnam Pro", var(--font-body); /* 베트남어 본문 (성조 부호) */

  /* 글자 크기 */
  --fs-display: clamp(34px, 4.6vw, 60px);
  --fs-h2: clamp(26px, 3.4vw, 44px);
  --fs-h3: 21px;
  --fs-lead: clamp(16px, 1.4vw, 18px);
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-tiny: 12px;

  /* 간격 (4의 배수) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 96px;
  --gutter: 24px;
  --container: 1200px;

  /* 모서리 */
  --radius-s: 10px;
  --radius-m: 16px;
  --radius-l: 22px;
  --radius-pill: 999px;
}

@media (max-width: 640px) {
  :root {
    --space-8: 56px;
    --gutter: 16px;
  }
}

/* 지침의 동네 유형 5색으로 바꿨을 때 (config.js mapPalette: 'wardType') */
:root[data-map-palette="wardType"] {
  --map-high: var(--ward-saturated);
  --map-mid: var(--ward-growth);
  --map-low: var(--ward-low);
  --map-none: var(--ward-unexplored);
  --map-far: var(--ward-far);
}