/*
 * 다크 모드 — 표준 웹 앱(public/index.html) 전용 레이어.
 *
 * 앱인토스는 라이트 모드 전용 구현을 요구하므로(공식 consumer-ux-guide, 체크리스트
 * light-mode-only=required) 토스 셸은 이 파일을 불러오지 않는다. apps/toss/src/main.js는
 * design-system.css와 styles.css만 import하며, 이 파일을 추가하는 순간 토스 WebView가
 * 사용자의 다크 설정을 따라가 심사 반려 사유가 된다.
 *
 * 색 계열 토큰만 재선언한다. 레이아웃·간격·타이포·모션·z-index 값은 여기에 두지 않는다.
 * 라이트의 이정표 팔레트를 그대로 뒤집는다: 블루블랙 캔버스 위에 밝은 그린 액센트.
 * 브랜드 계열은 라이트와 반대로 700이 가장 밝다 — 어두운 표면 위 텍스트로 쓰이기 때문이다.
 */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --color-canvas: #101318;
    --color-canvas-deep: #0b0e12;
    --color-surface: #171b21;
    --color-surface-soft: #1e232b;
    --color-surface-pressed: #2a303a;
    --color-text: #edf0f4;
    --color-text-secondary: #a8b1bd;
    --color-text-muted: #8a93a0;
    --color-border-subtle: #262c35;
    --color-border-control: #59636f;
    --color-border-strong: #7b8592;
    --color-brand-50: #12261f;
    --color-brand-100: #163329;
    --color-brand-300: #2c8f68;
    --color-brand-500: #1f9d73;
    --color-brand-600: #2bb385;
    --color-brand-700: #6fd3ae;
    --color-success: #66cf8f;
    --color-success-soft: #14301d;
    --color-warning: #e5b34c;
    --color-warning-soft: #362a10;
    --color-error: #ff8d7e;
    --color-error-soft: #3b1b16;
    --color-info: #82b4f5;
    --color-scrim: rgba(5, 7, 10, 0.68);
    --state-hover-tint: rgba(237, 240, 244, 0.07);
    --state-pressed-tint: rgba(237, 240, 244, 0.13);
    --state-selected-tint: rgba(43, 179, 133, 0.2);
    --surface-atmosphere: var(--color-canvas);
    --shadow-paper:
      0 0 0 1px rgba(0, 0, 0, 0.4),
      0 8px 24px rgba(0, 0, 0, 0.38);
    --shadow-floating:
      0 0 0 1px rgba(0, 0, 0, 0.5),
      0 12px 32px rgba(0, 0, 0, 0.5),
      0 28px 64px rgba(0, 0, 0, 0.36);
    --shadow-hover: 0 8px 20px rgba(0, 0, 0, 0.45);
    --shadow-sunken:
      inset 0 1px 3px rgba(0, 0, 0, 0.5),
      inset 0 0 0 1px rgba(0, 0, 0, 0.35);
  }
}