# 컬러 시스템

해양 데이터 시스템을 위한 컬러 시스템. 신뢰감과 전문성을 기반으로 하며, 해양·항법 데이터의 정확성을 시각적으로 표현한다.

---

## 브랜드 컬러 원본

| 역할 | HEX | 설명 |
|------|-----|------|
| Primary | #6D94C5 | Slate Blue — 신뢰, 전문성 |
| Secondary | #CBDCEB | Powder Blue — 부드러운 보조 |
| Accent | #E8DFCA | Warm Sand — 따뜻한 포인트 |
| Background | #F5EFE6 | Warm Cream — 배경색 |

---

## 브랜드 컬러 스케일

각 브랜드 컬러는 50(가장 밝음)에서 950(가장 어두움)까지 11단계 스케일로 확장된다.

### Primary (Slate Blue, hue ≈ 213°)

| Token | HEX | 용도 예시 |
|-------|-----|-----------|
| primary-50 | #F5F7F9 | subtle 배경 |
| primary-100 | #E5EBF2 | hover 배경 |
| primary-200 | #D2DAE5 | 비활성 테두리 |
| primary-300 | #B7C5D7 | 비활성 텍스트 |
| primary-400 | #8AA5C7 | 보조 아이콘 |
| primary-500 | #6D94C5 | 브랜드 원본 |
| primary-600 | #507FB9 | 기본 버튼 배경 (Light) |
| primary-700 | #3B669C | hover 상태 |
| primary-800 | #2D507B | active 상태 |
| primary-900 | #1B2C41 | 다크 배경 subtle |
| primary-950 | #0E1A2B | 다크 배경 강조 |

### Secondary (Powder Blue, hue ≈ 210°)

| Token | HEX | 용도 예시 |
|-------|-----|-----------|
| secondary-50 | #F5F7F9 | subtle 배경 |
| secondary-100 | #E6EDF5 | hover 배경 |
| secondary-200 | #D1DAE5 | 비활성 테두리 |
| secondary-300 | #B7C8D7 | 비활성 텍스트 |
| secondary-400 | #89AAC8 | 보조 아이콘 |
| secondary-500 | #CBDCEB | 브랜드 원본 |
| secondary-600 | #6B9AC8 | 보조 버튼 (Light) |
| secondary-700 | #4E88BB | hover 상태 |
| secondary-800 | #396E9D | active 상태 |
| secondary-900 | #1B2F41 | 다크 배경 subtle |
| secondary-950 | #0E1A2B | 다크 배경 강조 |

### Accent (Warm Sand, hue ≈ 38°)

| Token | HEX | 용도 예시 |
|-------|-----|-----------|
| accent-50 | #F9F8F6 | subtle 배경 |
| accent-100 | #F2EDE4 | hover 배경 |
| accent-200 | #E4E0D7 | 비활성 테두리 |
| accent-300 | #D5CDB9 | 비활성 텍스트 |
| accent-400 | #C4B48C | 보조 아이콘 |
| accent-500 | #E8DFCA | 브랜드 원본 |
| accent-600 | #B59854 | 포인트 버튼 (Light) |
| accent-700 | #9A7E3E | hover 상태 |
| accent-800 | #786230 | active 상태 |
| accent-900 | #3F351D | 다크 배경 subtle |
| accent-950 | #2B2312 | 다크 배경 강조 |

---

## 디자인 토큰 (CSS 변수)

컴포넌트에서 직접 HEX를 사용하지 않고 반드시 토큰을 사용한다.

### Primary 토큰

| CSS 변수 | Light | Dark |
|----------|-------|------|
| `--color-primary` | #507FB9 | #B7C5D7 |
| `--color-primary-hover` | #3B669C | #D2DAE5 |
| `--color-primary-active` | #2D507B | #8AA5C7 |
| `--color-primary-subtle` | #F5F7F9 | #1B2C41 |
| `--color-primary-text` | #2D507B | #D2DAE5 |

### Secondary 토큰

| CSS 변수 | Light | Dark |
|----------|-------|------|
| `--color-secondary` | #CBDCEB | #B7C8D7 |
| `--color-secondary-hover` | #89AAC8 | #D1DAE5 |
| `--color-secondary-active` | #4E88BB | #89AAC8 |
| `--color-secondary-subtle` | #F5F7F9 | #1B2F41 |
| `--color-secondary-text` | #396E9D | #D1DAE5 |

### Accent 토큰

| CSS 변수 | Light | Dark |
|----------|-------|------|
| `--color-accent` | #E8DFCA | #D5CDB9 |
| `--color-accent-hover` | #C4B48C | #E4E0D7 |
| `--color-accent-active` | #B59854 | #C4B48C |
| `--color-accent-subtle` | #F9F8F6 | #3F351D |
| `--color-accent-text` | #786230 | #E4E0D7 |

---

## 시멘틱 컬러

상태를 나타내는 컬러. 의미가 명확하므로 브랜드 컬러와 혼용하지 않는다.

| 역할 | CSS 변수 | Light | Dark |
|------|----------|-------|------|
| Success | `--color-success` | #059669 | #34D399 |
| Warning | `--color-warning` | #D97706 | #FBBF24 |
| Danger | `--color-danger` | #DC2626 | #FCA5A5 |
| Info | `--color-info` | #0284C7 | #38BDF8 |

---

## 뉴트럴 (Surface & Text)

| 역할 | CSS 변수 | Light | Dark | 설명 |
|------|----------|-------|------|------|
| 기본 배경 | `--color-bg-base` | #F5EFE6 | #131416 | 페이지 최외곽 |
| 카드 배경 | `--color-bg-surface` | #FFFFFF | #1E2023 | 카드, 패널 |
| 모달 배경 | `--color-bg-elevated` | #FFFFFF | #282A2E | 모달, 드롭다운 |
| 기본 테두리 | `--color-border` | #D5D2CC | #3A3C41 | 카드, 인풋 |
| 강조 테두리 | `--color-border-strong` | #9198A1 | #5C6570 | 포커스, 구분선 |
| 본문 텍스트 | `--color-text-primary` | #1E2329 | #F4F5F5 | 제목, 본문 |
| 보조 텍스트 | `--color-text-secondary` | #5C6570 | #9198A1 | 설명, 레이블 |
| 약한 텍스트 | `--color-text-tertiary` | #9198A1 | #5C6570 | placeholder |

---

## 차트 팔레트

데이터 시각화 전용. Cool(Blue 계열)과 Warm(Sand 계열)을 교차하여 구분성을 높인다.

| 순서 | CSS 변수 | Light HEX | Dark HEX |
|------|----------|-----------|----------|
| 1번 | `--color-chart-1` | #507FB9 | #6D94C5 |
| 2번 | `--color-chart-2` | #B59854 | #C4B48C |
| 3번 | `--color-chart-3` | #B5607D | #D4839B |
| 4번 | `--color-chart-4` | #3D998A | #5BB5A6 |
| 5번 | `--color-chart-5` | #8B6DB5 | #B79FD4 |
| 6번 | `--color-chart-6` | #C07850 | #D4956B |

차트에서는 `CHART_COLORS` 상수(`src/constants/chart.ts`)를 사용한다.

---

## 사용 규칙

- 컴포넌트에서 HEX 직접 사용 금지. 반드시 CSS 변수 토큰 사용.
- 시멘틱 컬러(success, warning, danger, info)를 브랜드 컬러 대용으로 사용 금지.
- 다크 모드는 `.dark` 클래스 또는 `prefers-color-scheme: dark` 미디어 쿼리로 자동 전환.