/* variables.css
   ─────────────────────────────────────────────────────────
   색상, 폰트, 간격을 변경하려면 이 파일을 수정하세요.
   ───────────────────────────────────────────────────────── */

:root {
  /* ── 컬러 팔레트 ───────────────────────────────────────── */
  --color-bg:          #faf8f5;   /* 전체 배경 (아이보리) */
  --color-surface:     #ffffff;   /* 카드 배경 */
  --color-primary:     #b8956a;   /* 포인트 색상 (골드 브라운) */
  --color-primary-light: #d4b896; /* 포인트 연하게 */
  --color-text:        #3a3028;   /* 본문 텍스트 (다크 브라운) */
  --color-text-soft:   #7a6a5a;   /* 보조 텍스트 */
  --color-text-muted:  #a89880;   /* 흐린 텍스트 */
  --color-divider:     #e8ddd0;   /* 구분선 */
  --color-overlay:     rgba(30, 20, 10, 0.45); /* Hero 어두운 오버레이 */

  /* ── 폰트 ──────────────────────────────────────────────── */
  --font-serif:        'Noto Serif KR', 'Georgia', serif;
  --font-display:      'Cormorant Garamond', 'Times New Roman', serif;

  /* ── 글자 크기 ─────────────────────────────────────────── */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   22px;
  --fs-xl:   28px;
  --fs-2xl:  36px;
  --fs-3xl:  48px;

  /* ── 간격 ──────────────────────────────────────────────── */
  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  40px;
  --space-xl:  64px;

  /* ── 모서리 ────────────────────────────────────────────── */
  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;

  /* ── 그림자 ────────────────────────────────────────────── */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.12);

  /* ── 전환 ──────────────────────────────────────────────── */
  --transition: 0.3s ease;
}