/*
 * 디자인 토큰 — 색·글자·간격·모양의 단일 기준.
 * Figma "중개사무소 사이트 서비스 — 운영자 관리 웹"의 변수에서 가져왔고, 설명은 docs/design-system.md 에 있다.
 * 화면 CSS에서는 색이나 px 값을 직접 쓰지 말고 이 변수만 쓴다.
 */
:root {
  /* 바탕과 면 */
  --bg: #f4f6fa;
  --surface: #ffffff;
  --line: #e3e7ee;
  --gray-soft: #eef1f5;

  /* 글자 */
  --ink: #17212b;      /* 본문·제목 */
  --ink-2: #4a5562;    /* 보조 본문. 회색 바탕 위의 설명은 이 색 */
  --muted: #6b7480;    /* 흰 바탕 위의 캡션·힌트만. bg·gray-soft 위에서는 대비 4.5:1 미만 */

  /* 강조 */
  --primary: #1d4fd7;
  --primary-strong: color-mix(in srgb, var(--primary) 85%, #000);
  --primary-soft: #eaf0fd;

  /* 상태. *-ink 는 연한 배경(*-soft) 위 글자용으로 대비를 맞춘 색 (Figma 변수에는 없는 보정) */
  --ok: #15803d;
  --ok-ink: #146c33;
  --ok-soft: #e3f6e9;
  --warn: #9a6700;
  --warn-ink: #8a5b00;
  --warn-soft: #fff4d6;
  --danger: #c62828;
  --danger-soft: #fdecee;

  /* 글꼴 */
  --font: "Pretendard", "Pretendard Variable", "Noto Sans KR", -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --fs-caption: 12px;
  --fs-small: 13px;
  --fs-body: 14px;
  --fs-title-sm: 15px;
  --fs-title: 18px;
  --fs-page: 22px;
  --fs-stat: 28px;
  --lh-body: 1.5;
  --lh-tight: 1.3;

  /* 간격: 4px 단위 */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;

  /* 모양 */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-pill: 999px;

  /* 조작 요소 높이 */
  --control-h: 44px;
  --control-h-sm: 36px;

  --shadow-modal: 0 20px 60px rgba(23, 33, 43, 0.25);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--primary) 35%, transparent);

  /* 주 단추 위 글자. 클래식(금색 단추)만 어두운 글자라 변수로 둔다 */
  --on-primary: #fff;
  /* 큰 제목 글꼴. 클래식만 명조 */
  --font-display: var(--font);

  /* 사이트 꾸미기의 디자인 견본 색(각 디자인의 대표 색) */
  --swatch-modern: #0f766e;
  --swatch-classic: #0f1b2d;
  --swatch-magazine: #111111;
}

/*
 * 손님 사이트 디자인(요금제별). 피그마 «사이트 디자인» 변수 모드 5개의 값 그대로.
 * body 의 data-design 이 바탕 변수를 덮어써서, 부품(단추·칩·카드·입력)이 따로 고치지 않아도 디자인을 따른다.
 * 스탠다드는 기본값(:root)과 같다.
 */
[data-design="basic"] {
  --bg: #ffffff;
  --surface: #ffffff;
  --line: #e3e7ee;
  --gray-soft: #eef1f5;
  --ink: #17212b;
  --ink-2: #6b7480;
  --primary: #4a5562;
  --primary-soft: #eef1f5;
}
[data-design="modern"] {
  --bg: #ffffff;
  --surface: #ffffff;
  --line: #e5e7eb;
  --gray-soft: #d9e6e4;
  --ink: #0b1215;
  --ink-2: #4b5563;
  --muted: #4b5563;
  --primary: #0f766e;
  --primary-soft: #e6f4f2;
}
[data-design="classic"] {
  --bg: #0f1b2d;
  --surface: #16253b;
  --line: #2a3a52;
  --gray-soft: #22324a;
  --ink: #f5f1e8;
  --ink-2: #b9c0cc;
  --muted: #b9c0cc;
  --primary: #b08d57;
  --primary-soft: #2a3a52;
  --on-primary: #0f1b2d;
  --font-display: "Noto Serif KR", "Nanum Myeongjo", "AppleMyungjo", serif;
}
[data-design="magazine"] {
  --bg: #ffffff;
  --surface: #ffffff;
  --line: #e5e5e5;
  --gray-soft: #e6e6e6;
  --ink: #111111;
  --ink-2: #6b6b6b;
  --muted: #6b6b6b;
  --primary: #111111;
  --primary-soft: #f2f2f2;
}