/* =========================================================
   tokens.css — 디자인 토큰

   - 값/이름은 Figma 변수와 동일하게 유지. 
   - 직접 수정 금지 — 디자인 변경 시 재export.
   ========================================================= */

:root {
  /* ── Color · GrayScale ─────────────────────────────── */
  --black: #000000;
  --white: #ffffff;

  --gray-50: #f7f7f7;
  --gray-100: #f4f4f4;
  --gray-200: #e5e5e5;
  --gray-300: #d4d4d4;
  --gray-400: #a3a3a3;
  --gray-500: #707070;
  --gray-600: #525252;
  --gray-700: #404040;
  --gray-800: #262626;
  --gray-900: #171717;

  /* white/black 투명도 (overlay·backdrop) */
  --whitebg-90: rgba(255, 255, 255, 0.9);
  --whitebg-80: rgba(255, 255, 255, 0.8);
  --whitebg-50: rgba(255, 255, 255, 0.5);
  --whitebg-30: rgba(255, 255, 255, 0.3);
  --whitebg-10: rgba(255, 255, 255, 0.1);
  --blackbg-90: rgba(0, 0, 0, 0.9);
  --blackbg-80: rgba(0, 0, 0, 0.8);
  --blackbg-50: rgba(0, 0, 0, 0.5);
  --blackbg-30: rgba(0, 0, 0, 0.3);
  --blackbg-10: rgba(0, 0, 0, 0.1);

  /* ── Color · Brand/primary ─────────────────────────── */
  --primary-50: #eff5fa;
  --primary-100: #d2dde7;
  --primary-200: #9cb3ca;
  --primary-500: #48719b;
  --primary-700: #183c60;
  /* 700_Primary (대표색) */
  --primary-800: #0c2d4d;
  --primary-900: #0b243d;

  /* ── Color · Brand/sub ─────────────────────────────── */
  --sub-500: #2e959c;
  /* 500_sub (포인트/그라데이션) */
  --sub-900: #0e3336;

  /* ── Color · Point ─────────────────────────────────── */
  --red: #e2233c;

  /* ── Spacing (GAP) ─────────────────────────────────── */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-s: 16px;
  --space-ms: 20px;
  --space-m: 24px;
  --space-ml: 32px;
  --space-lm: 40px;
  --space-l: 48px;
  --space-xl: 56px;
  --space-2xl: 64px;
  --space-3xl: 80px;
  --space-4xl: 96px;
  --space-5xl: 120px;
  --space-6xl: 140px;

  /* ── Spacing · layout/padding (좌우 여백 스케일) ────── */
  --pad-sm: 16px;
  --pad-md: 24px;
  --pad-lg: 32px;
  --pad-xl: 40px;
  --pad-2xl: 48px;
  --pad-3xl: 64px;
  --pad-4xl: 80px;

  /* ── Radius ────────────────────────────────────────── */
  --radius-none: 0;
  --radius-2xs: 4px;
  --radius-xs: 8px;
  --radius-s: 16px;
  --radius-ms: 20px;
  --radius-m: 24px;
  --radius-l: 40px;
  --radius-xl: 48px;
  --radius-2xl: 64px;
  --radius-3xl: 80px;
  --radius-full: 9999px;

  /* ── Stroke width ──────────────────────────────────── */
  --stroke-1: 1px;
  --stroke-2: 2px;
  --stroke-4: 4px;

  /* ── Container (브레이크포인트/최대폭) ──────────────── */
  --container-sm: 375px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1440px;
  --container-3xl: 1600px;
  --container-4xl: 1760px;
  --container-full: 1920px;

  /* ── Typography · PC/body (Geist, 텍스트 스타일) ─────
     변수가 아닌 텍스트 스타일에서 가져옴. letterSpacing -1% 공통. */
  --fs-body-3: 16px;
  /* body3 / body3-m */
  --fs-body-4: 14px;
  /* body4 / body4-m */
  --tracking: -0.01em;
}