/* ==========================================================================
   멍자국 — 디자인 토큰 (Design Tokens)
   브랜드 컬러 보드 기준: 메인(초록)/서브(라임)/포인트(오렌지) 3색 체계
   색상은 반드시 이 파일의 변수(var(--color-*))를 통해서만 참조합니다.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- 브랜드 컬러 원본 값 (그대로 유지) ---- */
  --color-primary: #5C8D4E;     /* 메인 — 자연, 산책, 건강함 / 버튼·헤더 등 핵심 액션 */
  --color-secondary: #A7C957;   /* 서브 — 활력, 생기 / 보조 강조 */
  --color-accent: #F4A261;      /* 포인트 — 따뜻함, 친근함 / 배지·하이라이트 등 시선을 끄는 요소 */
  --color-bg: #F2F2F2;          /* 배경 — 연한 회색 (요청 반영, 카드가 또렷하게 뜨도록) */
  --color-text: #252525;        /* 텍스트 — 가독성, 안정감 */
  --color-border: #E5E7EB;      /* 보조 — 심플, 중립, 구분선/비활성 */

  /* ---- 파생 토큰 (일관된 적용을 위해 추가) ---- */
  --color-surface: #FFFFFF;         /* 카드/패널 배경 */
  --color-surface-muted: #EDF1E8;   /* 사진 placeholder 등 중립 배경 */
  --color-text-muted: #5C6259;      /* 보조 설명 텍스트 — 배경 대비 5.92:1, 표면 대비 6.27:1 */
  --color-primary-dark: #4E7842;    /* 본문 크기 텍스트(링크/아이콘)용 AA 안전 변형 — 대비 4.85:1 */

  --color-primary-hover: #4E7842;
  --color-secondary-hover: #93B14D;
  --color-accent-hover: #E08F4F;

  --color-primary-soft: #F0F5EC;    /* 아바타, 선택된 필 배경 등 옅은 배경 */
  --color-secondary-soft: #EEF4DC;  /* 보조 배지 옅은 배경 */
  --color-accent-soft: #FBE3C9;     /* 포인트 배지 옅은 배경 */
  --color-map: #E9F0E2;             /* 지도 미리보기 영역 배경 */

  /* ---- On-color 텍스트 토큰: 각 배경색 위에서 쓰는 텍스트 색 ---- */
  --color-on-primary: #FFFFFF;      /* 3.91:1 — 굵고 큰 버튼 라벨 기준(3:1) 통과, hover 시 5.14:1 */
  --color-on-secondary: #252525;    /* 8.13:1 */
  --color-on-accent: #252525;       /* 7.44:1 */
  --color-on-accent-soft: #4A250B;  /* 부드러운 갈색 라벨 (산책 취소) — 6.53:1, hover 시 5.26:1 */
  --color-on-accent-white: #FFFFFF; /* 헤더 아바타 이니셜 — 2.1:1, 장식용 한 글자라 디자인 우선 */
  --color-notify: #E5484D;          /* 새 알림 빨간 점 */

  /* ---- 브랜드 로그인(카카오/네이버) — 외부 브랜드 규정색, 고정값 ---- */
  --color-kakao: #FEE500;
  --color-on-kakao: #191919;
  --color-naver: #03C75A;
  --color-on-naver: #FFFFFF;

  /* ---- 포커스 화면(로그인 등 단일 카드 화면)용 ---- */
  --color-backdrop: #EAEAEA;        /* 카드 뒤 무채색 회색 배경 — 중앙 집중 연출 */

  /* ---- 유틸리티 ---- */
  --shadow-sm: 0 1px 2px rgba(37, 37, 37, 0.06);
  --shadow-md: 0 8px 20px rgba(37, 37, 37, 0.08);
  --shadow-lg: 0 24px 60px rgba(37, 37, 37, 0.18);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-full: 999px;

  /* ---- 상태 색상 ---- */
  --color-status-reject: #D9534F;
  --color-status-reject-soft: #FDECEC;
}

/* ==========================================================================
   다크 모드 (제안) — data-theme="dark" 또는 시스템 설정을 따름
   ========================================================================== */
:root[data-theme="dark"] {
  color-scheme: dark;

  --color-primary: #7BAF6A;
  --color-secondary: #B8D671;
  --color-accent: #F4A261;
  --color-bg: #1B1F1A;
  --color-text: #EDEFEA;
  --color-border: #3A4038;

  --color-surface: #242923;
  --color-surface-muted: #2C3227;
  --color-text-muted: #AEB5A8;
  --color-primary-dark: #9CCB8B;

  --color-primary-hover: #9CCB8B;
  --color-secondary-hover: #C6DF8D;
  --color-accent-hover: #F5AF74;

  --color-primary-soft: #29331F;
  --color-secondary-soft: #333B24;
  --color-accent-soft: #4A3728;
  --color-map: #26301F;

  --color-on-primary: #14180F;
  --color-on-secondary: #14180F;
  --color-on-accent: #14180F;
  --color-on-accent-soft: #4A250B;  /* hover 시 7.22:1 */
  --color-on-accent-white: #FFFFFF;
  --color-notify: #FF6369;

  --color-kakao: #FEE500;
  --color-on-kakao: #191919;
  --color-naver: #03C75A;
  --color-on-naver: #FFFFFF;

  --color-backdrop: #16181A;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 8px 22px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55);

  --color-status-reject: #F08080;
  --color-status-reject-soft: #452626;
}

/* 참고: 시스템이 다크 모드여도 이 데모는 항상 라이트(연한 회색) 테마로 보여야 하므로
   prefers-color-scheme 자동전환은 의도적으로 껐습니다.
   다크 모드를 확인하려면 <html data-theme="dark"> 를 수동으로 지정하세요. */