/* ==========================================================================
   지리산권 ESG 가치여행 — 디자인 토큰  v1.0.0 (2026-10-10)
   화면과 새 컴포넌트는 "의미 토큰"(--color-*, --chart-*)을 씁니다.
   기본 램프(--gray-*, --blue-* …)는 공통 CSS 안에서 hover·옅은 바탕처럼 의미 토큰이 없는 단계에만 씁니다.
   ========================================================================== */
:root {
  color-scheme: light; /* 다크 모드 미지원: 야외 주간 사용 기준 단일 테마 */

  /* ── 기본 램프 ─────────────────────────────── */
  /* Gray: 남색 기가 도는 중립색. 본문·경계·바탕. */
  --gray-0: #FFFFFF;
  --gray-50: #F5F7FA;
  --gray-100: #EEF2F6;
  --gray-200: #E2E8EF;
  --gray-300: #C9D2DC;
  --gray-400: #9AA6B5;
  --gray-500: #7C899B;
  --gray-600: #5C697B;
  --gray-700: #465264;
  --gray-800: #2A3444;
  --gray-900: #0F1B30;
  /* Blue: 브랜드 기본색. 시안의 헤더·주 버튼 #02529C. */
  --blue-50: #F2F7FD;
  --blue-100: #E6F0FB;
  --blue-200: #CFE2F7;
  --blue-300: #A3C8EF;
  --blue-400: #5E9EDF;
  --blue-500: #1F74C4;
  --blue-600: #02529C;
  --blue-700: #024686;
  --blue-800: #023A6E;
  --blue-900: #06264A;
  /* Sky: 보조 강조. 체험·활동 유형, 진행 게이지 끝색. */
  --sky-50: #EFF9FE;
  --sky-100: #DDF2FD;
  --sky-200: #B9E6FA;
  --sky-400: #46BEEE;
  --sky-500: #0F8AC2;
  --sky-700: #0A6C9C;
  /* Green: ESG·자연·생태·행동인증·승인. */
  --green-50: #F0FAF4;
  --green-100: #E3F5EA;
  --green-200: #C8EBD6;
  --green-400: #4CAF7A;
  --green-500: #268755;
  --green-600: #1F7A4D;
  --green-700: #17613D;
  --green-800: #104A2E;
  /* Orange: 역사·인문·소비인증·강조. */
  --orange-50: #FFF7EC;
  --orange-100: #FEEFD9;
  --orange-200: #FCDDB3;
  --orange-400: #F39A2E;
  --orange-500: #E67A12;
  --orange-600: #BF5C07;
  --orange-700: #A24E06;
  --orange-800: #7A3B05;
  /* Amber: 대기·주의 상태(심사 중, 검수대기, 보류). */
  --amber-50: #FFF9E8;
  --amber-100: #FEF1CC;
  --amber-200: #FBE09A;
  --amber-500: #E6A117;
  --amber-700: #8A5A00;
  --amber-800: #6B4500;
  /* Red: 반려·오류·부정 의심. */
  --red-50: #FEF3F0;
  --red-100: #FDE4DF;
  --red-200: #F9C7BE;
  --red-500: #DC4A31;
  --red-600: #D03A22;
  --red-700: #A82C18;
  --red-800: #7F2112;
  /* Gold: 인증서·완주 표시. 어두운 남색 위에서만 글자로 사용. */
  --gold-300: #EECA86;
  --gold-500: #C68E36;
  --gold-700: #8A5E14;

  /* ── 의미 토큰 ─────────────────────────────── */
  /* Surface */
  --color-bg: var(--gray-50); /* 이용자 화면 바탕. */
  --color-bg-admin: var(--gray-100); /* 관리자 화면 바탕. */
  --color-surface: var(--gray-0); /* 카드, 시트, 모달, 입력 필드. */
  --color-surface-subtle: var(--gray-50); /* 카드 안의 타일, 읽기 전용 필드. */
  --color-surface-sunken: var(--gray-100); /* 진행 트랙, 스켈레톤, 비선택 세그먼트. */
  --color-overlay: rgba(15, 27, 48, 0.56); /* 모달·시트 뒤 딤. */
  /* Text */
  --color-text: var(--gray-900); /* 기본 글자. color-surface, color-bg 위. */
  --color-text-secondary: var(--gray-700); /* 설명 글자. color-surface, color-bg, 옅은 색 바탕 위. */
  --color-text-tertiary: var(--gray-600); /* 캡션·메타. color-surface, color-bg, color-surface-sunken 위(4.5:1 이상). */
  --color-text-disabled: var(--gray-400); /* 비활성 글자. 읽어야 하는 정보에는 금지. */
  --color-text-inverse: var(--gray-0); /* blue-600 이상 어두운 채움 위 글자. */
  --color-text-inverse-secondary: rgba(255, 255, 255, 0.8); /* 앱바 부제 등 어두운 채움 위 보조 글자. blue-600 위 5.6:1. */
  --color-text-link: var(--blue-600); /* 링크·더보기. */
  /* Border */
  --color-border: var(--gray-200); /* 카드 경계, 구분선. */
  --color-border-strong: var(--gray-500); /* 입력 필드·체크박스·라디오 경계(3:1 이상). */
  --color-border-selected: var(--blue-600); /* 선택된 컨트롤 경계. */
  /* Brand */
  --color-primary: var(--blue-600); /* 주 버튼, 앱바, 선택 상태. */
  --color-primary-hover: var(--blue-700); /* 주 버튼 hover. */
  --color-primary-active: var(--blue-800); /* 주 버튼 pressed. */
  --color-primary-subtle: var(--blue-100); /* 안내 줄, 보조 버튼 바탕. */
  --color-primary-subtler: var(--blue-50); /* 선택된 행 바탕. */
  --color-on-primary: var(--gray-0); /* color-primary 위 글자·아이콘. */
  --color-secondary: var(--green-600); /* ESG 강조(헤드라인의 초록 단어, 실천 완료). */
  --color-accent: var(--orange-500); /* 채움 강조. 글자는 color-accent-text 사용. */
  --color-accent-text: var(--orange-700); /* 주황 글자. */
  /* Status */
  --color-success: var(--green-600); /* 승인·완료 채움과 아이콘. */
  --color-success-text: var(--green-700); /* 승인 글자. color-success-bg 위. */
  --color-success-bg: var(--green-100); /* 승인 배지 바탕. */
  --color-success-border: var(--green-200); /* 성공 상자 경계. */
  --color-warning: var(--amber-500); /* 대기·주의 채움. */
  --color-warning-text: var(--amber-800); /* 심사 중·보류 글자. color-warning-bg 위. */
  --color-warning-bg: var(--amber-100); /* 심사 중 배지 바탕. */
  --color-warning-border: var(--amber-200); /* 주의 상자 경계. */
  --color-danger: var(--red-600); /* 반려·오류 채움. 흰 글자 가능. */
  --color-danger-text: var(--red-700); /* 반려·오류 글자. color-danger-bg 위. */
  --color-danger-bg: var(--red-100); /* 반려 배지 바탕. */
  --color-danger-bg-subtle: var(--red-50); /* 반려 사유 상자 바탕. */
  --color-danger-border: var(--red-200); /* 오류 경계. */
  --color-info: var(--blue-600); /* 안내 아이콘. */
  --color-info-text: var(--blue-700); /* 안내 글자. color-info-bg 위. */
  --color-info-bg: var(--blue-100); /* 안내 바탕. */
  --color-info-border: var(--blue-200); /* 안내 경계. */
  /* SpotType: 거점 3대 유형. 색과 함께 아이콘(잎·기와·사람)을 항상 같이 씀. */
  --color-nature: var(--green-600); /* 자연·생태 핀·아이콘. */
  --color-nature-text: var(--green-700); /* 자연·생태 태그 글자. */
  --color-nature-bg: var(--green-100); /* 자연·생태 태그 바탕. */
  --color-history: var(--orange-600); /* 역사·인문 핀·아이콘. */
  --color-history-text: var(--orange-700); /* 역사·인문 태그 글자. */
  --color-history-bg: var(--orange-100); /* 역사·인문 태그 바탕. */
  --color-activity: var(--sky-500); /* 체험·활동 핀·아이콘. */
  --color-activity-text: var(--sky-700); /* 체험·활동 태그 글자. */
  --color-activity-bg: var(--sky-100); /* 체험·활동 태그 바탕. */
  /* CertType: 인증 3종. 아이콘 타일(둥근 사각형) 형태로만 사용해 거점 유형 태그와 구분. */
  --color-visit: var(--blue-600); /* 방문인증 아이콘. */
  --color-visit-bg: var(--blue-100); /* 방문인증 아이콘 타일 바탕. */
  --color-action: var(--green-600); /* 행동인증 아이콘. */
  --color-action-bg: var(--green-100); /* 행동인증 아이콘 타일 바탕. */
  --color-spend: var(--orange-600); /* 소비인증 아이콘. */
  --color-spend-bg: var(--orange-100); /* 소비인증 아이콘 타일 바탕. */
  /* Chart: 색각 이상 시뮬레이션 검증 통과(인접 ΔE 18.5 이상). 순서를 바꾸지 않음. */
  --chart-visit: var(--blue-600); /* 차트: 방문인증 계열. */
  --chart-action: var(--green-600); /* 차트: 행동인증 계열. */
  --chart-spend: var(--orange-400); /* 차트: 소비인증 계열. 흰 바탕 2.2:1이라 값 표기·표 보기 필수. */
  --chart-county-1: var(--blue-600); /* 차트: 하동군. */
  --chart-county-2: var(--sky-400); /* 차트: 산청군. 값 표기 필수. */
  --chart-county-3: var(--green-600); /* 차트: 함양군. */
  --chart-county-4: var(--orange-400); /* 차트: 거창군. 값 표기 필수. */
  --chart-county-5: var(--blue-500); /* 차트: 합천군. */
  --chart-county-6: var(--gold-500); /* 차트: 구례군. 값 표기 필수. */
  --chart-muted: var(--gray-300); /* 차트: 비강조 계열, 기타. */
  --chart-grid: var(--gray-200); /* 차트 격자선(1px 실선). */
  --chart-axis: var(--gray-300); /* 차트 기준선. */
  /* Focus */
  --color-focus: var(--blue-500); /* 밝은 바탕 위 초점 링(3px). 흰 바탕 4.8:1. */
  --color-focus-inverse: var(--gray-0); /* 어두운 채움 위 초점 링. */

  /* ── 글꼴 ─────────────────────────────────── */
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Noto Sans KR", Roboto, "Segoe UI", "Malgun Gothic", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Roboto Mono", "D2Coding", Consolas, monospace;

  /* ── 간격(4px 기준) ───────────────────────── */
  --space-1: 4px; /* 아이콘과 글자 사이 최소 간격. */
  --space-2: 8px; /* 칩 사이, 타일 안 요소 간격. */
  --space-3: 12px; /* 카드 그리드 간격, 목록 항목 안 간격. */
  --space-4: 16px; /* 화면 좌우 여백(gutter), 카드 안 여백. */
  --space-5: 20px; /* 카드 안 여백(넓게). */
  --space-6: 24px; /* 섹션 사이 간격. */
  --space-8: 32px; /* 큰 섹션 사이 간격. */
  --space-10: 40px; /* 화면 상·하단 여백. */
  --space-12: 48px; /* 빈 상태 일러스트 주변. */
  --space-16: 64px; /* 온보딩·결과 화면 상단 여백. */
  /* ── 모서리 ───────────────────────────────── */
  --radius-xs: 6px; /* 배지, 작은 태그. */
  --radius-sm: 8px; /* 작은 버튼·작은 입력, 관리자 메뉴 항목. */
  --radius-md: 12px; /* 버튼, 입력 필드, 썸네일, 아이콘 타일, 관리자 패널. */
  --radius-lg: 16px; /* 카드. */
  --radius-xl: 20px; /* 히어로 위 겹침 카드, 시트 상단 모서리. */
  --radius-full: 999px; /* 칩, 알약형 배지, 원형 버튼. */
  /* ── 그림자 ───────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(15, 27, 48, 0.06); /* 카드(경계선과 함께). */
  --shadow-sm: 0 2px 8px rgba(15, 27, 48, 0.08); /* 겹침 카드, 고정 하단 바. */
  --shadow-md: 0 8px 24px rgba(15, 27, 48, 0.12); /* 지도 위 컨트롤, 토스트, 드롭다운. */
  --shadow-lg: 0 -8px 32px rgba(15, 27, 48, 0.16); /* 바텀시트, 모달. */
  /* ── 크기 ─────────────────────────────────── */
  --size-tap: 2.75rem; /* 최소 터치 영역 44px. 글자 확대에 따라 함께 커짐. */
  --size-control-xs: 2rem; /* 관리자 표 안의 작은 버튼 32px. 이용자 화면 금지. */
  --size-control-sm: 2.5rem; /* 보조 버튼·칩 40px. */
  --size-control-md: 2.75rem; /* 기본 버튼 44px. */
  --size-control-lg: 3.25rem; /* 주 행동 버튼·입력 필드 52px. */
  --size-appbar: 3.5rem; /* 앱바 최소 높이 56px. */
  --size-tabbar: 4rem; /* 하단 탭바 높이 64px(안전 영역 제외). */
  --size-app-max: 560px; /* 이용자 화면 최대 폭. 넘으면 가운데 정렬. */
  --size-gutter: 16px; /* 화면 좌우 여백. */
  --size-sidebar: 248px; /* 관리자 사이드바 폭. */
  /* ── 쌓임 순서 ─────────────────────────────── */
  --z-sticky: 100; /* 고정 필터 줄, 표 머리. */
  --z-appbar: 200; /* 앱바, 탭바. */
  --z-actionbar: 210; /* 하단 고정 행동 바. */
  --z-sheet: 400; /* 바텀시트, 드로어. */
  --z-modal: 500; /* 모달과 딤. */
  --z-toast: 600; /* 토스트. */
  /* ── 움직임 ───────────────────────────────── */
  --duration-fast: 120ms; /* 눌림, hover. */
  --duration-base: 200ms; /* 탭 전환, 펼침. */
  --duration-slow: 320ms; /* 시트·모달 등장. */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* 기본 가감속. */
  --ease-exit: cubic-bezier(0.4, 0, 1, 1); /* 사라짐. */
}