/* K-hisroad — 디자인 토큰
   기준: Stitch "Korean Heritage Trails" DESIGN.md
   - 브랜드 색은 본문(Colors 절)의 값: Hanji White, Songjuk Pine, Dancheong Terracotta, Heritage Brass, Meok Charcoal
   - 작은 글자에 쓰는 테라코타는 대비 4.5:1을 위해 YAML의 secondary(#9e4225)를 사용
   - 다크 테마는 YAML의 inverse / fixed-dim 톤에서 가져옴 */
:root {
  --surface: #f9f8f5;            /* Hanji White — 기본 바탕 */
  --surface-low: #f4f1ea;        /* Aged Oatmeal — 카드 바탕, 입력창 */
  --surface-raised: #ffffff;     /* 떠 있는 패널, 시트 */
  --surface-deep: #1b3b2b;       /* Songjuk Pine — 진녹색 띠 */
  --on-deep: #f9f8f5;
  --on-deep-muted: #c7ebd4;      /* primary-fixed */
  --ink: #1e2322;                /* Meok Charcoal */
  --ink-muted: #424843;          /* on-surface-variant */
  --outline: #c1c8c2;            /* outline-variant */
  --hairline: rgba(30, 35, 34, 0.08); /* Doldam line */

  --brand: #1b3b2b;              /* Songjuk Pine — 주요 버튼, 내비 */
  --on-brand: #f9f8f5;
  --brand-tint: #e8efea;         /* 쉬움 배지 */

  --accent: #9e4225;             /* 테라코타 글자·CTA (secondary) */
  --on-accent: #ffffff;
  --accent-bright: #c15c3d;      /* Dancheong Terracotta — 경로선, 마커, 테두리 */
  --accent-tint: #f9eae5;        /* 어려움 배지 */

  --gold: #c49b45;               /* Heritage Brass — 인장, 배지 */
  --gold-text: #8f6f25;          /* 보통 배지 글자 */
  --gold-tint: #f6eedb;          /* 보통 배지 */
  --gold-on-deep: #edc066;       /* tertiary-fixed-dim — 진녹색 위 강조 */

  --locate: #1a6fd1;             /* 현재 위치 점 (지도 관례색) */
  --glass: rgba(249, 248, 245, 0.92);

  --font-serif: "Noto Serif KR", "Noto Serif", serif;
  --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --gutter: 24px;
  --margin: 48px;

  --radius-sm: 4px;
  --radius: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  --shadow-ambient: 0 4px 20px -2px rgba(30, 35, 34, 0.05);
  --shadow-float: 0 12px 36px -4px rgba(30, 35, 34, 0.12);

  --tabbar-h: 64px;
  color-scheme: light;
}

@media (max-width: 767px) {
  :root { --gutter: 16px; --margin: 20px; }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface: #181d1c;
    --surface-low: #1f2523;
    --surface-raised: #2c3130;
    --surface-deep: #0f2a1d;
    --on-deep: #edf2f0;
    --on-deep-muted: #abcfb8;
    --ink: #edf2f0;
    --ink-muted: #c1c8c2;
    --outline: #424843;
    --hairline: rgba(237, 242, 240, 0.1);
    --brand: #abcfb8;
    --on-brand: #002113;
    --brand-tint: #2d4d3c;
    --accent: #ffb59f;
    --on-accent: #3a0a00;
    --accent-bright: #ffb59f;
    --accent-tint: #4a2216;
    --gold: #edc066;
    --gold-text: #edc066;
    --gold-tint: #3d3011;
    --gold-on-deep: #edc066;
    --locate: #6aa8ff;
    --glass: rgba(24, 29, 28, 0.9);
    --shadow-ambient: 0 4px 20px -2px rgba(0, 0, 0, 0.35);
    --shadow-float: 0 12px 36px -4px rgba(0, 0, 0, 0.5);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --surface: #181d1c;
  --surface-low: #1f2523;
  --surface-raised: #2c3130;
  --surface-deep: #0f2a1d;
  --on-deep: #edf2f0;
  --on-deep-muted: #abcfb8;
  --ink: #edf2f0;
  --ink-muted: #c1c8c2;
  --outline: #424843;
  --hairline: rgba(237, 242, 240, 0.1);
  --brand: #abcfb8;
  --on-brand: #002113;
  --brand-tint: #2d4d3c;
  --accent: #ffb59f;
  --on-accent: #3a0a00;
  --accent-bright: #ffb59f;
  --accent-tint: #4a2216;
  --gold: #edc066;
  --gold-text: #edc066;
  --gold-tint: #3d3011;
  --gold-on-deep: #edc066;
  --locate: #6aa8ff;
  --glass: rgba(24, 29, 28, 0.9);
  --shadow-ambient: 0 4px 20px -2px rgba(0, 0, 0, 0.35);
  --shadow-float: 0 12px 36px -4px rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}