/* ==========================================================================
   AONEWOOD Web UI Color System
   - 모든 공통 UI 컬러는 이 변수로 사용합니다.  예) color: var(--color-primary);
   - 투명도가 필요하면 -rgb 변수 사용          예) background: rgb(var(--color-primary-rgb) / 0.8);
   ========================================================================== */
:root {
  /* --------------------------------------------------------------
     1. 기본 팔레트
     -------------------------------------------------------------- */
  /* Primary — 메인 타이틀, 버튼, GNB, Footer */
  --color-primary: #3b2416; /* Deep Wood Brown */
  --color-primary-dark: #2b2420; /* Espresso Brown — 다크 섹션, Hover, Footer */

  /* Secondary — 브랜드 포인트, 숫자, 라인 */
  --color-secondary: #a9784d; /* Natural Wood */
  --color-secondary-light: #c49a70; /* Oak Brown — 서브 포인트, 배경 그래픽 */

  /* Accent — 친환경·자연·포인트 UI */
  --color-accent: #7d8248; /* Olive Green */
  --color-accent-dark: #5e673b; /* Forest Olive — Green Hover, 강조 */

  /* Background */
  --color-bg: #fcfaf7; /* Warm White — 사이트 기본 배경 */
  --color-bg-02: #f6f1e9; /* Warm Ivory — 섹션 구분 배경 */
  --color-bg-03: #ede4d8; /* Sand Beige — 카드·제품 영역 */
  --color-bg-04: #9b7b57;
  --color-bg-05: #746b61;
  --color-bg-06: #342f2a;

  /* Text */
  --color-text: #29231f; /* Charcoal Brown — 본문/제목 #342f2a */
  --color-text-secondary: #746b64; /* Warm Gray — 설명문 */
  --color-text-muted: #a69d96; /* Light Warm Gray — 캡션/보조정보 */

  /* Border · White */
  --color-border: #d6cec2; /* Beige Gray — 테두리/Divider */
  --color-border-dark: #bfb1a1; /* Beige Gray — 테두리/Divider */
  --color-white: #ffffff; /* 다크 배경 텍스트 */

  /* --------------------------------------------------------------
     2. RGB 채널 (투명도 조절용)
     -------------------------------------------------------------- */
  --color-primary-rgb: 59 36 22;
  --color-primary-dark-rgb: 40 23 14;
  --color-secondary-rgb: 169 120 77;
  --color-secondary-light-rgb: 196 154 112;
  --color-accent-rgb: 125 130 72;
  --color-accent-dark-rgb: 94 103 59;
  --color-bg-rgb: 252 250 247;
  --color-bg-02-rgb: 246 241 233;
  --color-bg-03-rgb: 237 228 216;
  --color-text-rgb: 41 35 31;
  --color-text-secondary-rgb: 116 107 100;
  --color-text-muted-rgb: 166 157 150;
  --color-border-rgb: 191 177 161;
  --color-white-rgb: 255 255 255;

  /* --------------------------------------------------------------
     3. 용도별 변수 (컴포넌트에서는 가능하면 이쪽을 사용)
     -------------------------------------------------------------- */
  /* 제목 · 본문 */
  --color-title: var(--color-primary);
  --color-body: var(--color-text);
  --color-desc: var(--color-text-secondary);
  --color-caption: var(--color-text-muted);
  --color-point: var(--color-secondary); /* 숫자·강조 텍스트 */
  --color-point-on-dark: color-mix(in srgb, var(--color-secondary-light), var(--color-white) 45%); /* 다크·사진 배경 위 강조 텍스트 (Oak Brown 을 밝게) */
  --color-link: var(--color-primary);
  --color-link-hover: var(--color-secondary);

  /* 배경 */
  --color-page-bg: var(--color-bg);
  --color-section-bg: var(--color-bg-02);
  --color-card-bg: var(--color-bg-03);
  --color-dark-bg: var(--color-primary-dark);
  --color-on-dark: var(--color-white); /* 다크 배경 위 텍스트 */
  --color-on-dark-muted: rgb(var(--color-white-rgb) / 0.7);

  /* 라인 */
  --color-line: var(--color-border);
  --color-line-point: var(--color-secondary);

  /* 버튼 — 기본 */
  --color-btn-bg: var(--color-primary);
  --color-btn-text: var(--color-white);
  --color-btn-hover-bg: var(--color-primary-dark);
  /* 버튼 — 라인형 */
  --color-btn-line: var(--color-primary);
  --color-btn-line-hover-bg: var(--color-primary);
  --color-btn-line-hover-text: var(--color-white);
  /* 버튼 — 그린(친환경 포인트) */
  --color-btn-accent-bg: var(--color-accent);
  --color-btn-accent-hover-bg: var(--color-accent-dark);

  /* GNB · Footer */
  --color-gnb-bg: var(--color-primary);
  --color-gnb-text: var(--color-white);
  --color-gnb-hover: var(--color-secondary-light);
  --color-footer-bg: var(--color-primary-dark);
  --color-footer-text: rgb(var(--color-white-rgb) / 0.7);
  --color-footer-title: var(--color-white);
  --color-footer-point: var(--color-secondary-light);
  --color-footer-line: rgb(var(--color-white-rgb) / 0.15);

  /* 상태 · 접근성 */
  --color-focus: var(--color-secondary);
  --color-selection-bg: var(--color-secondary-light);
  --color-selection-text: var(--color-primary-dark);
}

/* ==========================================================================
   기존 화면 변수 (구 base.css 에서 이동)
   - 받아 온 화면 CSS(site.css, main.css 등)가 사용 중이므로 이름 유지
   - 새로 작성하는 CSS 에서는 위의 --color-* 변수를 사용하세요.
   ========================================================================== */
:root {
  color-scheme: light;

  /* 컬러 */
  --cream: var(--color-bg-02); /* body 배경 */
  --paper: var(--color-bg);
  --ink: var(--color-text); /* body 글자 */
  --brown: #342f2a;
  --brown-rgb: 52 47 42; /* 투명도 조절용: rgb(var(--brown-rgb) / 0.6) */
  --muted: var(--color-text-secondary);
  --gold: var(--color-secondary); /* 포커스 테두리, .eyebrow */
  --line: var(--color-border);

  /* 폰트 */
  --serif: "Noto Serif KR", Georgia, serif;
  --latin: Marcellus, Georgia, serif;

  /* 간격 */
  --space: clamp(64px, 8vw, 144px);
}