/* ============================================================
   더파크사이드 스위트 — 디자인 토큰
   자료 표준: design.md v3 · theme.md v3 · 부동산_표준_레이아웃.md v1.4 기준
   표준 대비 변경분(델타)은 theme2.md / design2.md 참고
   ⚠️ 색·폰트·여백은 여기서만 정의한다. index.html·styles.css에 하드코딩 금지.

   명도 베이스 = 흰색 단색(#FFFFFF). 배경 패턴·격자 없음.
   어두운 면(히어로 영상 · 푸터 · 모바일 상담바)은 .on-dark 스코프가 토큰을 통째로 뒤집는다.
   ============================================================ */

:root{

  /* 1. 브랜드 시스템 (역할 토큰 이름은 표준 유지 · 값만 교체) */
  --green-brand: #17130E;   /* 제목·헤드라인 (가독성 위해 거의 검정) */
  --green-cta:   #8A6A2F;   /* 버튼·CTA (흰 바탕 대비 확보용 딥 브론즈) */
  --green-deep:  #17130E;   /* 다크 밴드·푸터 */
  --green-mid:   #A98544;   /* 호버·데코 */
  --green-light: #6B5326;   /* 보조 강조(수치·소제목) */

  /* 2. 포인트 (브론즈 골드) */
  --accent: #A98544;

  /* 3. 캔버스 & 서피스 — 흰색 단색 */
  --canvas:    #FFFFFF;   /* 페이지 기본 */
  --canvas-2:  #F6F5F2;   /* 섹션 구분(리듬용 아주 옅은 톤) */
  --surface:   #FFFFFF;   /* 카드 */
  --surface-2: #F6F5F2;   /* 카드 중첩·입력창 */
  --white:     #FFFFFF;

  /* 4. 텍스트 */
  --fg-rgb:     23,19,14;   /* rgba(var(--fg-rgb), α) 로 알파 텍스트·보더 생성 */
  --ink:        rgba(23,19,14,0.88);
  --muted:      rgba(23,19,14,0.56);
  --line:       rgba(23,19,14,0.13);
  --white-soft: rgba(255,255,255,0.72);
  --on-cta:     #FFFFFF;    /* 브론즈 버튼 위 글자색 */

  /* 4b. 스크림 채널 — rgba(var(--scrim-rgb), α) 형태로 오버레이에 사용 */
  --scrim-rgb:      17,14,10;   /* 히어로 영상 위 어둡게 */
  --scrim-deep-rgb: 12,10,7;    /* 모달·완료 오버레이 */
  --dot-idle:       #D9D5CC;    /* 도트 네비 비활성 */

  /* 5. 그림자 (위스퍼-소프트 · 2~3겹 저알파) */
  --shadow-card: 0 0 0.5px rgba(23,19,14,0.13), 0 1px 1px rgba(23,19,14,0.18);
  --shadow-nav:  0 1px 3px rgba(23,19,14,0.09), 0 2px 2px rgba(23,19,14,0.05), 0 0 2px rgba(23,19,14,0.06);
  --shadow:      0 4px 18px rgba(23,19,14,0.11), 0 1px 4px rgba(23,19,14,0.07);
  --shadow-sm:   0 0 0.5px rgba(23,19,14,0.13), 0 1px 1px rgba(23,19,14,0.18);
  --shadow-lift: 0 14px 34px rgba(23,19,14,0.15), 0 3px 10px rgba(23,19,14,0.09);

  /* 6. 모서리 — 직각 (표준값 유지) */
  --radius:     0px;
  --radius-btn: 0px;

  /* 7. 레이아웃 */
  --maxw:    1220px;   /* 부동산 표준 허용 1180~1240 */
  --gutter:  24px;
  --sec-pad: 110px;    /* 일반 스크롤 섹션 상하 여백 */
  --nav-h:   74px;

  /* 8. 폰트 */
  --body:    "Pretendard", "Apple SD Gothic Neo", "Helvetica Neue", Arial, sans-serif;
  --head:    "Pretendard", "Apple SD Gothic Neo", "Helvetica Neue", Arial, sans-serif;
  --display: "EB Garamond", "Nanum Myeongjo", "Noto Serif KR", Georgia, serif;

  /* 9. 모션 */
  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --anim-step: .12s;   /* 패널 진입 스태거 간격 */
}

/* ------------------------------------------------------------
   어두운 면 스코프 — 히어로(영상 위) · 푸터 · 모바일 상담바처럼
   흰 바탕이 아닌 곳에 붙이면 토큰이 통째로 뒤집힌다.
   (컴포넌트 CSS는 그대로 두고 값만 교체 → 하드코딩 방지)
   ------------------------------------------------------------ */
.on-dark{
  --green-brand: #FFFFFF;
  --green-light: #E4D6B4;
  --green-cta:   #A98544;
  --fg-rgb:      255,255,255;
  --ink:         rgba(255,255,255,0.92);
  --muted:       rgba(255,255,255,0.58);
  --line:        rgba(255,255,255,0.15);
  --surface:     #1F1A14;
  --surface-2:   #2A241B;
  --on-cta:      #17130E;
  --dot-idle:    #3A342A;
  --shadow-card: 0 1px 2px rgba(0,0,0,0.40);
  --shadow-lift: 0 20px 46px rgba(0,0,0,0.50), 0 4px 12px rgba(0,0,0,0.32);
}