/* ==========================================================================
   이수으뜸한의원 — 디자인 토큰
   레퍼런스(백록담 / 동춘당 / 금맥) 톤: 밝은 크림 배경 + 딥그린·골드 포인트
   ========================================================================== */

:root {
  /* ---- Surface: 따뜻한 크림 계열 (레퍼런스 공통) ---- */
  --bg-page: #fdfbf7;
  --bg-soft: #faf6ed;
  --bg-tint: #f5efe3;
  --surface-0: #ffffff;
  --surface-1: #fefaf5;

  --line: #e8e2d5;
  --line-strong: #d8d0c0;

  /* ---- Ink: 부드러운 먹색 (순검정 아님) ---- */
  --ink-900: #1f2e1c; /* 딥그린 먹 — 제목 */
  --ink-800: #2c2c2c;
  --ink-700: #4a4a4a;
  --ink-600: #6b5b4b; /* 웜 그레이 — 본문 보조 */
  --ink-500: #7d7368;
  --ink-400: #9a9186;

  /* ---- Primary: 딥그린 (동춘당) ---- */
  --green-900: #1f2e1c;
  --green-700: #2f4a2c;
  --green-600: #3e5c3a;
  --green-100: #e7ece4;
  --green-050: #f2f5f0;

  /* ---- Accent: 골드·브라운 (금맥/동춘당 공통) ---- */
  --gold-700: #6b5436;
  --gold-600: #8b6f47;
  --gold-500: #b8956a;
  --gold-400: #c49b5f;
  --gold-100: #efe6d2;
  --gold-050: #f7f1e4;

  /* ---- 보조 강조 ---- */
  --point: #c44536; /* 붉은 포인트 — 아주 드물게 */

  /* ---- Typography ---- */
  --font-kr: "Pretendard Variable", Pretendard, "Noto Sans KR",
    -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic",
    sans-serif;
  --font-serif: "Noto Serif KR", serif;

  --fs-display: clamp(1.95rem, 4.2vw, 3.15rem);
  --fs-h1: clamp(1.7rem, 3.2vw, 2.5rem);
  --fs-h2: clamp(1.38rem, 2.3vw, 1.95rem);
  --fs-h3: clamp(1.1rem, 1.3vw, 1.26rem);
  --fs-lg: clamp(1rem, 1.05vw, 1.1rem);
  --fs-base: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.75rem;

  /* ---- Spacing ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;

  --section-y: clamp(56px, 7vw, 104px);

  /* ---- Container ---- */
  --container: 1180px;
  --container-text: 760px;
  --gutter: clamp(18px, 4vw, 36px);

  /* ---- Radius: 레퍼런스는 14px 전후의 부드러운 카드 ---- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* ---- Shadow: 아주 옅게 ---- */
  --shadow-sm: 0 2px 10px rgba(31, 46, 28, 0.06);
  --shadow-md: 0 10px 30px rgba(31, 46, 28, 0.08);
  --shadow-lg: 0 18px 46px rgba(31, 46, 28, 0.1);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --dur-fast: 150ms;
  --dur: 250ms;

  /* ---- Layout ---- */
  --header-h: 64px;
  --z-header: 100;
  --z-drawer: 200;
  --z-cta: 150;
}

@media (min-width: 900px) {
  :root {
    --header-h: 78px;
  }
}