/* ============================================================
   Cozy Village — 디자인 토큰 (단일 기준 파일)
   모든 화면은 이 변수를 사용한다. 하드코딩 색/폰트/간격 금지.
   ============================================================ */

/* 픽셀 폰트 (제목/인게임용) */
@font-face{ font-family:'Galmuri'; src:url('https://cdn.jsdelivr.net/npm/galmuri/dist/Galmuri11.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face{ font-family:'Galmuri'; src:url('https://cdn.jsdelivr.net/npm/galmuri/dist/Galmuri11-Bold.woff2') format('woff2'); font-weight:700; font-display:swap; }

:root{
  /* ---- 색: 표면/텍스트 ---- */
  --c-bg:#f4f1ea;          /* 앱 배경(크림) */
  --c-surface:#fffdf8;     /* 카드/패널 흰면 */
  --c-surface-2:#faf6ee;   /* 보조 표면 */
  --c-ink:#3a352e;         /* 기본 텍스트 */
  --c-muted:#8a8378;       /* 보조 텍스트 */
  --c-border:#e4ddcf;      /* 테두리 */

  /* ---- 색: 브랜드/의미 ---- */
  --c-accent:#6bbf8a;      /* 주요 액션(초록) */
  --c-accent-ink:#2f7d5f;  /* 액센트 위 텍스트/아웃라인 */
  --c-accent-soft:#eafaf0; /* 액센트 옅은 배경 */
  --c-danger:#d9534f;      /* 삭제/경고 */

  /* ---- 색: 레어도(별점 등급) ---- */
  --c-r1:#8a8378;  --c-r2:#3f9968;  --c-r3:#2f7fc4;  --c-r4:#c99418;  --c-r5:#a24fd0;
  --c-star:#ffc22e;

  /* ============================================================
     아래 위(↑)는 3개 테마 공통 UI 색. 앱 UI는 어느 마을이든 동일.
     아래(↓)는 테마별 "환경색"(바닥/앰비언트) — data-theme 로 교체.
     기본값은 🌳 숲. rough/sea는 하단 오버라이드 참조.
     ============================================================ */
  --c-ground:#6ea150;      /* 마을 바닥 베이스색 */
  --c-ambient:#eef6e6;     /* 테마 앰비언트(옅은 오버레이/헤더 틴트) */

  /* ---- 타이포 ---- */
  --font-title:'Galmuri', -apple-system, BlinkMacSystemFont, sans-serif; /* 제목/인게임(픽셀) */
  --font-ui:-apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; /* 본문/버튼 */
  --fs-xl:20px; --fs-lg:16px; --fs-md:14px; --fs-sm:12.5px; --fs-xs:11px;
  --fw-normal:400; --fw-bold:800;

  /* ---- 간격 ---- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;

  /* ---- 모서리 ---- */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-pill:999px;

  /* ---- 그림자 ---- */
  --shadow-sm:0 3px 10px rgba(90,80,60,.14);
  --shadow-md:0 10px 26px rgba(90,80,60,.18);

  /* ---- 모션 ---- */
  --ease-pop:cubic-bezier(.2,1.4,.35,1);
}

/* ---- 테마별 환경색 오버라이드 (UI 색은 공통, 환경색만 교체) ---- */
:root[data-theme="rough"]{ --c-ground:#b09468; --c-ambient:#efe6d4; } /* 🗡️ 거친: 마른 흙/바위 */
:root[data-theme="sea"]{   --c-ground:#e7d6a6; --c-ambient:#e3f2f5; } /* 🌊 바다: 해변 모래 */
:root[data-theme="snow"]{  --c-ground:#dfe7ee; --c-ambient:#eef4f8; } /* ❄️ 눈: 설원(옅은 청백) */

/* 픽셀 아트 렌더링 유틸 (스프라이트/타일에 적용) */
.pixelated{ image-rendering:pixelated; image-rendering:crisp-edges; }