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

   명도 베이스 = 웜 아이보리(#FBFAF6). 배포자료의 종이 질감 톤을 단색으로 옮긴 값.
   어두운 면(히어로 · 푸터 · 모바일 상담바)은 .on-dark 스코프가 토큰을 통째로 뒤집는다.
   ============================================================ */

:root{

  /* 1. 브랜드 시스템 (역할 토큰 이름은 표준 유지 · 값만 교체)
        배포자료 팔레트 = 딥 포레스트(#28352C) · 세이지(#8E937E) · 올리브(#656849) · 브론즈 */
  --green-brand: #1E2A21;   /* 제목·헤드라인 (딥 포레스트) */
  --green-cta:   #38492F;   /* 버튼·CTA (딥 올리브 그린 · 흰 글자 대비 9.7:1) */
  --green-deep:  #212C23;   /* 다크 밴드·푸터 */
  --green-mid:   #55684A;   /* 호버·데코 */
  --green-light: #5B6B4C;   /* 보조 강조(수치·소제목) */

  /* 2. 포인트 (브론즈 골드 — LE|EL UPPERHOUSE 워드마크 색) */
  --accent: #8A6C45;

  /* 3. 캔버스 & 서피스 — 웜 아이보리 */
  --canvas:    #FBFAF6;   /* 페이지 기본 */
  --canvas-2:  #F1F0E8;   /* 섹션 구분 */
  --surface:   #FFFFFF;   /* 카드 */
  --surface-2: #F1F0E8;   /* 카드 중첩·입력창 */
  --white:     #FFFFFF;

  /* 4. 텍스트 */
  --fg-rgb:     30,42,33;   /* rgba(var(--fg-rgb), α) 로 알파 텍스트·보더 생성 */
  --ink:        rgba(30,42,33,0.88);
  --muted:      rgba(30,42,33,0.58);
  --line:       rgba(30,42,33,0.14);
  --white-soft: rgba(255,255,255,0.74);
  --on-cta:     #FFFFFF;    /* 그린 버튼 위 글자색 */

  /* 4b. 스크림 채널 — rgba(var(--scrim-rgb), α) 형태로 오버레이에 사용 */
  --scrim-rgb:      20,28,22;   /* 히어로 이미지 위 어둡게 */
  --scrim-deep-rgb: 13,19,14;   /* 모달·완료 오버레이 */
  --dot-idle:       #CFD2C6;    /* 도트 네비 비활성 */

  /* 5. 그림자 (위스퍼-소프트 · 2~3겹 저알파) */
  --shadow-card: 0 0 0.5px rgba(30,42,33,0.13), 0 1px 1px rgba(30,42,33,0.18);
  --shadow-nav:  0 1px 3px rgba(30,42,33,0.09), 0 2px 2px rgba(30,42,33,0.05), 0 0 2px rgba(30,42,33,0.06);
  --shadow:      0 4px 18px rgba(30,42,33,0.11), 0 1px 4px rgba(30,42,33,0.07);
  --shadow-sm:   0 0 0.5px rgba(30,42,33,0.13), 0 1px 1px rgba(30,42,33,0.18);
  --shadow-lift: 0 14px 34px rgba(30,42,33,0.15), 0 3px 10px rgba(30,42,33,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: #CFD8BE;
  --green-cta:   #9A7B52;   /* 다크 위에서는 브론즈 버튼 */
  --accent:      #C4A47A;   /* 딥그린 위 eyebrow 대비 확보(6.6:1) — theme2.md §3 */
  --fg-rgb:      255,255,255;
  --ink:         rgba(255,255,255,0.92);
  --muted:       rgba(255,255,255,0.60);
  --line:        rgba(255,255,255,0.15);
  --surface:     #232E25;
  --surface-2:   #2C3A2E;
  --on-cta:      #16201A;
  --dot-idle:    #3B4A3D;
  --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);
}