/*
 * 가게보고 디자인 토큰
 * 사이트 CSS 맨 앞에 넣고, 모든 색은 이 변수로만 쓴다. (hex 직접 쓰기 금지)
 * 글자색 대비는 WCAG AA(4.5:1) 이상으로 검증함 — brand/README.md 참고
 */

:root {
  /* 글꼴: 웹에서는 CDN으로 불러온다 (brand/README.md "글꼴") */
  --font-sans: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
    "Noto Sans KR", "Malgun Gothic", sans-serif;

  /* 바탕 */
  --bg: #FFFBF3;          /* 페이지 바탕 — 따뜻한 크림 */
  --surface: #FFFFFF;     /* 카드, 표 */
  --surface-alt: #FFF6E5; /* 강조 영역 — 프로필 사진의 크림색 */
  --border: #E7DFCF;

  /* 글자 */
  --ink: #1C2622;         /* 본문 */
  --ink-2: #4A5751;       /* 보조 설명 */
  --ink-muted: #5F6C66;   /* 캡션, 기준일, 출처 */

  /* 브랜드 */
  --brand: #1E5B4A;        /* 가게보고 초록 — 링크, 버튼, 헤더 */
  --brand-strong: #164034; /* 호버, 차양 윗단 */
  --brand-tint: #E4EFEA;   /* 옅은 초록 배경 (배지, 선택 상태) */
  --on-brand: #FFF6E5;     /* 초록 위 글자 */

  --accent: #F2B544;       /* 겨자색 — 장식·점·밑줄 전용. 밝은 바탕 위 글자로 쓰지 않는다 */
  --accent-ink: #8A5A00;   /* 겨자 계열이 꼭 글자로 필요할 때 */

  /* 모양 */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow: 0 1px 2px rgba(28, 38, 34, 0.06), 0 4px 14px rgba(28, 38, 34, 0.06);

  /* 간격 (4px 단위) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
}

/* 다크 모드: 같은 브랜드를 어두운 바탕용 단계로 다시 고른 값 (자동 반전이 아님) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #111814;
    --surface: #18221D;
    --surface-alt: #1F2B25;
    --border: #2C3A33;
    --ink: #EEF2EE;
    --ink-2: #C3CDC7;
    --ink-muted: #93A19A;
    --brand: #6CC3A6;
    --brand-strong: #8FD6BD;
    --brand-tint: #1E3A30;
    --on-brand: #0F1A15;
    --accent: #F2B544;
    --accent-ink: #F2B544;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 14px rgba(0, 0, 0, 0.25);
  }
}
:root[data-theme="dark"] {
  --bg: #111814;
  --surface: #18221D;
  --surface-alt: #1F2B25;
  --border: #2C3A33;
  --ink: #EEF2EE;
  --ink-2: #C3CDC7;
  --ink-muted: #93A19A;
  --brand: #6CC3A6;
  --brand-strong: #8FD6BD;
  --brand-tint: #1E3A30;
  --on-brand: #0F1A15;
  --accent: #F2B544;
  --accent-ink: #F2B544;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 14px rgba(0, 0, 0, 0.25);
}

/* 큰 숫자(동네 통계의 대표 숫자)는 비례 숫자, 표 안 숫자만 고정폭 */
.figure { font-variant-numeric: proportional-nums; font-weight: 700; }
table .num { font-variant-numeric: tabular-nums; text-align: right; }