/* 휠헌터 디자인 토큰 (PLAN.md 17.1)
 * 색·간격·타이포·반지름·그림자·모션을 여기서만 정의한다. 컴포넌트(app.css)는 토큰만 쓴다.
 * 명암비는 2026-09-08 계산값: 본문 잉크 17.5:1, 보조 잉크 6.9:1, 힌트 잉크 5.0:1, 강조색 위 흰 글자 6.7:1,
 * 상태색 위 흰 글자 5.3~5.8:1, 배지(상태색 글자/연한 바탕) 4.6~4.8:1, 입력 테두리 3.4:1 (WCAG AA 충족).
 * 다크 모드는 토큰 재정의로만 바꾼다.
 */
:root {
  color-scheme: light dark;

  /* 색 — 바탕·표면·잉크·선 */
  --c-bg: #F3F5F8;
  --c-surface: #FFFFFF;
  --c-surface-2: #E9EDF3;
  --c-ink: #141A22;
  --c-ink-2: #4E5B6E;
  --c-ink-3: #61708A;
  --c-line: #D5DCE5;
  --c-line-strong: #7F8CA0;
  --c-overlay: rgba(20, 26, 34, .48);

  /* 색 — 강조 */
  --c-accent: #1A4FD6;
  --c-accent-hover: #153FB0;
  --c-accent-ink: #FFFFFF;
  --c-accent-soft: #E4EBFB;
  --c-focus: #1A4FD6;

  /* 색 — 상태 4종 (색만으로 구분하지 않는다: 배지에 아이콘·문구 병기) */
  --c-registered: #1B7A4B;  --c-registered-soft: #DCF3E6;
  --c-stolen: #C42B2B;      --c-stolen-soft: #FCE3E3;
  --c-recovered: #0E7490;   --c-recovered-soft: #D9F1F7;
  --c-closed: #5C6675;      --c-closed-soft: #E7EAEF;

  /* 색 — 의미 */
  --c-danger: #C42B2B;      --c-danger-soft: #FCE3E3;
  --c-warn: #9A5B00;        --c-warn-soft: #FBEFD6;
  --c-ok: #1B7A4B;          --c-ok-soft: #DCF3E6;
  --c-info: #1A4FD6;        --c-info-soft: #E4EBFB;

  /* 간격 — 4px 배수 */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-6: 24px; --s-8: 32px; --s-12: 48px;

  /* 타이포 스케일 */
  --f-12: 12px; --f-14: 14px; --f-16: 16px; --f-18: 18px; --f-22: 22px; --f-28: 28px; --f-36: 36px;
  --font: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "D2Coding", "Liberation Mono", monospace;
  --lh: 1.6;
  --lh-tight: 1.3;

  /* 반지름 */
  --r-1: 4px; --r-2: 8px; --r-3: 12px;

  /* 그림자 2단 */
  --sh-1: 0 1px 2px rgba(20, 26, 34, .08), 0 1px 3px rgba(20, 26, 34, .06);
  --sh-2: 0 8px 24px -8px rgba(20, 26, 34, .22), 0 2px 6px rgba(20, 26, 34, .08);

  /* 모션 */
  --t-fast: 150ms;
  --t-base: 250ms;
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* 터치 타깃·컨트롤 높이 (HIG 44pt, 머티리얼 48dp) */
  --tap: 44px;
  --btn-h: 48px;
  --input-h: 48px;

  /* 레이아웃 */
  --header-h: 56px;
  --tabbar-h: 60px;
  --list-w: 400px;
  --panel-w: 360px;
  --content-w: 720px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-base: 0ms; }
}

/* 다크 모드 — 시스템 설정 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-bg: #0E1319;
    --c-surface: #161C25;
    --c-surface-2: #1F2733;
    --c-ink: #E8EDF3;
    --c-ink-2: #AAB6C5;
    --c-ink-3: #8B98A9;
    --c-line: #2B3543;
    --c-line-strong: #6B7A90;
    --c-overlay: rgba(0, 0, 0, .6);
    --c-accent: #8DB0FF;
    --c-accent-hover: #A9C3FF;
    --c-accent-ink: #0E1319;
    --c-accent-soft: #1C2C50;
    --c-focus: #8DB0FF;
    --c-registered: #63D39A;  --c-registered-soft: #143324;
    --c-stolen: #FF8080;      --c-stolen-soft: #3E1A1A;
    --c-recovered: #5CCBE6;   --c-recovered-soft: #0F2E38;
    --c-closed: #A6B0BE;      --c-closed-soft: #242C37;
    --c-danger: #FF8080;      --c-danger-soft: #3E1A1A;
    --c-warn: #F0B84A;        --c-warn-soft: #3A2A0E;
    --c-ok: #63D39A;          --c-ok-soft: #143324;
    --c-info: #8DB0FF;        --c-info-soft: #1C2C50;
    --sh-1: 0 1px 2px rgba(0, 0, 0, .5), 0 1px 3px rgba(0, 0, 0, .4);
    --sh-2: 0 8px 24px -8px rgba(0, 0, 0, .7), 0 2px 6px rgba(0, 0, 0, .5);
  }
}

/* 다크 모드 — 명시 선택 */
:root[data-theme="dark"] {
  --c-bg: #0E1319;
  --c-surface: #161C25;
  --c-surface-2: #1F2733;
  --c-ink: #E8EDF3;
  --c-ink-2: #AAB6C5;
  --c-ink-3: #8B98A9;
  --c-line: #2B3543;
  --c-line-strong: #6B7A90;
  --c-overlay: rgba(0, 0, 0, .6);
  --c-accent: #8DB0FF;
  --c-accent-hover: #A9C3FF;
  --c-accent-ink: #0E1319;
  --c-accent-soft: #1C2C50;
  --c-focus: #8DB0FF;
  --c-registered: #63D39A;  --c-registered-soft: #143324;
  --c-stolen: #FF8080;      --c-stolen-soft: #3E1A1A;
  --c-recovered: #5CCBE6;   --c-recovered-soft: #0F2E38;
  --c-closed: #A6B0BE;      --c-closed-soft: #242C37;
  --c-danger: #FF8080;      --c-danger-soft: #3E1A1A;
  --c-warn: #F0B84A;        --c-warn-soft: #3A2A0E;
  --c-ok: #63D39A;          --c-ok-soft: #143324;
  --c-info: #8DB0FF;        --c-info-soft: #1C2C50;
  --sh-1: 0 1px 2px rgba(0, 0, 0, .5), 0 1px 3px rgba(0, 0, 0, .4);
  --sh-2: 0 8px 24px -8px rgba(0, 0, 0, .7), 0 2px 6px rgba(0, 0, 0, .5);
}