/* ==========================================================================
   옥션뷰 — Toss 디자인 토큰
   oh-my-auction content.css 의 토큰을 그대로 가져오고 모바일용 값을 더했습니다.
   ========================================================================== */
:root {
  /* surfaces */
  --bg: #f2f4f6;
  --surface: #ffffff;
  --surface-sub: #f9fafb;
  --fill: #f2f4f6;
  --fill-hover: #e5e8eb;
  --line: #e5e8eb;
  --line-weak: #f2f4f6;

  /* text */
  --text-strong: #191f28;
  --text: #333d4b;
  --text-sub: #4e5968;
  --text-weak: #6b7684;
  --text-faint: #8b95a1;

  /* colors */
  --blue: #3182f6;
  --blue-strong: #1b64da;
  --blue-weak: #e8f3ff;
  --red: #f04452;
  --red-weak: #ffeeee;
  --green: #03b26c;
  --green-weak: #e5f8f0;
  --orange: #f57800;
  --orange-weak: #fff3e0;
  --purple: #8b3dd6;
  --purple-weak: #f4ebfd;
  --teal: #0c8f8f;
  --teal-weak: #e3f6f6;

  /* elevation */
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 16px 40px rgba(0, 0, 0, 0.12);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);

  /* type */
  --font: "Toss Product Sans", "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
    "Malgun Gothic", system-ui, sans-serif;
  --text-display: 26px;
  --text-title: 20px;
  --text-body: 15px;
  --text-label: 14px;
  --text-caption: 13px;
  --text-micro: 12px;

  /* spacing */
  --radius: 20px;
  --radius-sm: 12px;
  --radius-pill: 9999px;
  --page-x: 16px;
  --gap: 12px;
  --card-pad: 20px;

  /* layout */
  --nav-height: 56px;
  --tabbar-height: 58px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* 다크 모드: data-theme=dark 또는 OS 설정 */
:root[data-theme="dark"] {
  --bg: #101013;
  --surface: #1e1e24;
  --surface-sub: #26262d;
  --fill: #2c2c35;
  --fill-hover: #3a3a45;
  --line: #33333d;
  --line-weak: #2a2a32;

  --text-strong: #f9f9fa;
  --text: #e4e4e5;
  --text-sub: #c3c3c6;
  --text-weak: #9e9ea4;
  --text-faint: #7e7e87;

  --blue: #3c8cff;
  --blue-strong: #6aa8ff;
  --blue-weak: rgba(60, 140, 255, 0.18);
  --red: #ff5b68;
  --red-weak: rgba(240, 68, 82, 0.18);
  --green: #1ec381;
  --green-weak: rgba(3, 178, 108, 0.18);
  --orange: #ffa53d;
  --orange-weak: rgba(254, 152, 0, 0.18);
  --purple: #c08af5;
  --purple-weak: rgba(162, 92, 230, 0.2);
  --teal: #3fd0cf;
  --teal-weak: rgba(24, 165, 167, 0.2);

  --shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 16px 40px rgba(0, 0, 0, 0.5);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --bg: #101013;
    --surface: #1e1e24;
    --surface-sub: #26262d;
    --fill: #2c2c35;
    --fill-hover: #3a3a45;
    --line: #33333d;
    --line-weak: #2a2a32;

    --text-strong: #f9f9fa;
    --text: #e4e4e5;
    --text-sub: #c3c3c6;
    --text-weak: #9e9ea4;
    --text-faint: #7e7e87;

    --blue: #3c8cff;
    --blue-strong: #6aa8ff;
    --blue-weak: rgba(60, 140, 255, 0.18);
    --red: #ff5b68;
    --red-weak: rgba(240, 68, 82, 0.18);
    --green: #1ec381;
    --green-weak: rgba(3, 178, 108, 0.18);
    --orange: #ffa53d;
    --orange-weak: rgba(254, 152, 0, 0.18);
    --purple: #c08af5;
    --purple-weak: rgba(162, 92, 230, 0.2);
    --teal: #3fd0cf;
    --teal-weak: rgba(24, 165, 167, 0.2);

    --shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 16px 40px rgba(0, 0, 0, 0.5);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  }
}