/*
 * SafePark design tokens
 * 720px 디자인 캔버스 / 10px = 1rem 기준
 *
 * 기존 CSS 호환을 위해 의미 기반 변수명(--primary, --fs-title 등)은
 * 유지하고, 정확한 디자인 수치는 원시 토큰(--fz-*, --radius-*)으로 관리한다.
 */

:root {
  /* ---------- Color ---------- */
  --primary: #3182f6;
  --primary-deep: #1b64da;
  --primary-soft: #e9f1fd;
  --text: #191f28;
  --text-strong: #191f28;
  --text-sub: #4e5968;
  --text-mute: #8b95a1;
  --text-placeholder: #d7d7d7;
  --text-on-primary: #fff;
  --text-black: #000;
  --surface: #fff;
  --surface-gray: #f2f4f6;
  --surface-disabled: #ededed;
  --surface-selected: #e8f3ff;
  --surface-blue: #e9f1fd;
  --surface-red: #fcefed;
  --bg: #f2f4f6;
  --line: #ededed;
  --line-strong: #d7d7d7;
  --divider: #f2f4f6;
  --success: #01ba5a;
  --success-soft: #e8f8ef;
  --danger: #d93528;
  --danger-soft: #fcefed;
  --info: var(--primary);
  --info-soft: var(--primary-soft);

  /* 이전 스타일 참조 호환용 별칭 */
  --success-2: var(--success);
  --success-2-soft: var(--success-soft);
  --accent: var(--primary);
  --accent-soft: var(--primary-soft);

  /* ---------- Typography ---------- */
  --font-sans: "Pretendard", "SUIT", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --line-height-base: 1.4;
  --fz-50: clamp(3rem, 6.944vw, 5rem);
  --fz-44: clamp(2.8rem, 6.111vw, 4.4rem);
  --fz-35: clamp(2.6rem, 4.861vw, 3.5rem);
  --fz-33: clamp(2.4rem, 4.583vw, 3.3rem);
  --fz-32: clamp(2rem, 4.444vw, 3.2rem);
  --fz-30: clamp(1.8rem, 4.167vw, 3rem);
  --fz-28: clamp(1.7rem, 3.889vw, 2.8rem);
  --fz-27: clamp(1.7rem, 3.75vw, 2.7rem);
  --fz-25: clamp(1.6rem, 3.472vw, 2.5rem);
  --fz-24: clamp(1.6rem, 3.333vw, 2.4rem);
  --fz-23: clamp(1.5rem, 3.194vw, 2.3rem);
  --fz-22: clamp(1.5rem, 3.056vw, 2.2rem);
  --fz-21: clamp(1.5rem, 2.917vw, 2.1rem);
  --fz-20: clamp(1.4rem, 2.778vw, 2rem);
  --fz-18: clamp(1.4rem, 2.5vw, 1.8rem);
  --fz-17: clamp(1.3rem, 2.361vw, 1.7rem);
  --fz-15: clamp(1.2rem, 2.083vw, 1.5rem);

  /* 기존 의미 기반 타이포 토큰 */
  --fs-display: var(--fz-44);
  --fs-h1: var(--fz-30);
  --fs-h2: var(--fz-25);
  --fs-title: var(--fz-23);
  --fs-body-lg: var(--fz-20);
  --fs-body: var(--fz-17);
  --fs-sm: clamp(1.2rem, 1.944vw, 1.4rem);
  --fs-xs: clamp(1.1rem, 1.667vw, 1.2rem);
  --fw-extrabold: 800;
  --fw-bold: 700;
  --fw-semibold: 600;
  --fw-medium: 500;
  --fw-regular: 400;

  /* ---------- Layout ---------- */
  --canvas-width: 72rem;
  --app-max-width: var(--canvas-width);
  --inner-padding-x: clamp(1.6rem, 2.778vw, 2rem);
  --header-height: 5.4rem;
  --bottomnav-height: 7.8rem;

  /* ---------- Spacing ---------- */
  --space-1: 0.4rem;
  --space-2: 0.8rem;
  --space-3: 1.2rem;
  --space-4: 1.6rem;
  --space-5: 2rem;
  --space-6: 2.4rem;
  --space-8: 3.2rem;

  /* ---------- Radius / Border ---------- */
  --radius-10: clamp(0.8rem, 1.389vw, 1rem);
  --radius-15: clamp(1.2rem, 2.083vw, 1.5rem);
  --radius-32: clamp(1.2rem, 2.444vw, 2.2rem);
  --radius-pill: 10rem;
  --radius-sm: var(--radius-10);
  --radius: clamp(1rem, 1.667vw, 1.2rem);
  --radius-lg: clamp(1.2rem, 2.222vw, 1.6rem);
  --border-1: 0.1rem;
  --border-2: clamp(0.1rem, 0.278vw, 0.2rem);

  /* ---------- Box / Shadow ---------- */
  --box-radius: var(--radius-32);
  --box-padding: clamp(1.2rem, 2.222vw, 1.6rem);
  --box-padding-lg: clamp(1.8rem, 3.333vw, 2.4rem);
  --box-dashed-border: var(--border-2);
  --shadow-card-y: clamp(0.4rem, 1.111vw, 0.8rem);
  --shadow-card-blur: clamp(1.6rem, 3.389vw, 2.44rem);
  --shadow-card-spread: clamp(0.1rem, 0.278vw, 0.2rem);
  --shadow-card: 0 var(--shadow-card-y) var(--shadow-card-blur) var(--shadow-card-spread) rgb(0 0 0 / 4%);
  --shadow-card-slate: 0 var(--shadow-card-y) var(--shadow-card-blur) var(--shadow-card-spread) rgb(15 23 42 / 4%);

  /* 기존 box 구성 토큰 호환용 별칭 */
  --box-shadow-y: var(--shadow-card-y);
  --box-shadow-blur: var(--shadow-card-blur);
  --box-shadow-spread: var(--shadow-card-spread);
  --shadow-nav: 0 -0.2rem 0.4rem rgb(0 0 0 / 4%);
  --shadow-bottom: 0 -0.2rem 0.4rem rgb(0 0 0 / 25%);
}