/* ============================================
   THEMES — data-theme selector 기반 팔레트
   Load order: reset.css → variables.css → themes.css → main.css

   핵심 설계 원칙:
     --color-bg-brand      → 배경 전용 브랜드 색 (테마 변경 O)
     --color-bg-brand-dark → 배경 전용 어두운 변형 (호버·그라디언트)
     --color-green         → 텍스트·아이콘 전용 (모든 테마에서 #32905E 고정)
   ============================================ */

/* ── Default / Fallback ─────────────────────── */

:root,
[data-theme="default"] {
  --color-primary:        #32905E;
  --color-secondary:      #FFE500;
  --color-accent:         #4aab78;
  --color-bg-warm:        #F5F5F5;

  /* 페이지 전체 배경 — 기본은 흰색, 테마별로 오버라이드 */
  --color-page-bg:        #FFFFFF;

  /* 섹션 배경 — 테마별로 자동 변경 */
  --color-bg-section:     #F5F5F5;       /* .section--gray, .services, .cta-section */
  --color-bg-soft:        #dff0e8;       /* .section--light-green */
  --color-bg-dark:        #111714;       /* .hero, .stats, .section--dark, .page-hero, .footer */

  /* 배경 전용 브랜드 변수 — primary 를 상속받으므로 각 테마에서 primary 만 바꿔도 자동 적용 */
  --color-bg-brand:       var(--color-primary);
  --color-bg-brand-dark:  #206040;

  /* 텍스트·아이콘용 (항상 녹색 고정 — 모든 테마 공통) */
  --color-green:          #32905E;
  --color-green-dark:     #206040;
  --color-green-light:    #4aab78;
  --color-green-dim:      rgba(50, 144, 94, 0.08);
  --color-yellow:         #FFE500;
  --color-yellow-dark:    #e6ce00;
  --shadow-green:         0 8px 32px rgba(50, 144, 94, 0.25);
  --color-green-glow-12:  rgba(50, 144, 94, 0.12);
  --color-green-glow-15:  rgba(50, 144, 94, 0.15);
  --color-green-glow-20:  rgba(50, 144, 94, 0.20);
  --color-green-glow-30:  rgba(50, 144, 94, 0.30);
  --color-green-soft:     #7ec9a5;
  --color-dark-deep:      #0a1510;
  --color-dark-tinted:    #0f1f17;
}

/* ── Peach ──────────────────────────────────── */

[data-theme="peach"] {
  --color-primary:        #FF9A86;
  --color-secondary:      #FFB399;
  --color-accent:         #FFD6A6;
  --color-bg-warm:        #FFF0BE;

  /* 페이지 전체 배경 */
  --color-page-bg:        #FFF0BE;
  --color-bg-section:     #FFF6D8;
  --color-bg-soft:        #FFE5C2;
  --color-bg-dark:        #2A1410;       /* .hero, .stats, .section--dark, .page-hero, .footer */

  /* 배경 전용 (텍스트에는 적용 안 됨) */
  --color-bg-brand:       #FF9A86;
  --color-bg-brand-dark:  #e07060;

  /* 그로우·딤·쉐도우 — 배경 장식 요소에 적용 */
  --color-green-dim:      rgba(255, 154, 134, 0.08);
  --color-green-light:    #FFB399;
  --color-green-soft:     #ffbfae;
  --shadow-green:         0 8px 32px rgba(255, 154, 134, 0.25);
  --color-green-glow-12:  rgba(255, 154, 134, 0.12);
  --color-green-glow-15:  rgba(255, 154, 134, 0.15);
  --color-green-glow-20:  rgba(255, 154, 134, 0.20);
  --color-green-glow-30:  rgba(255, 154, 134, 0.30);

  /* 히어로 배경 그라디언트 다크 틴트 */
  --color-dark-deep:      #2a1010;
  --color-dark-tinted:    #1f1010;
}

/* ── Orange ─────────────────────────────────── */

[data-theme="orange"] {
  --color-primary:        #FF9644;
  --color-secondary:      #FFCE99;
  --color-accent:         #562F00;
  --color-bg-warm:        #FFFDF1;

  --color-page-bg:        #FFFDF1;
  --color-bg-section:     #FFF8E8;
  --color-bg-soft:        #FFE8C8;
  --color-bg-dark:        #1F1308;       /* .hero, .stats, .section--dark, .page-hero, .footer */

  --color-bg-brand:       #FF9644;
  --color-bg-brand-dark:  #e07020;

  --color-green-dim:      rgba(255, 150, 68, 0.08);
  --color-green-light:    #FFCE99;
  --color-green-soft:     #ffb470;
  --shadow-green:         0 8px 32px rgba(255, 150, 68, 0.25);
  --color-green-glow-12:  rgba(255, 150, 68, 0.12);
  --color-green-glow-15:  rgba(255, 150, 68, 0.15);
  --color-green-glow-20:  rgba(255, 150, 68, 0.20);
  --color-green-glow-30:  rgba(255, 150, 68, 0.30);

  --color-dark-deep:      #1a0e00;
  --color-dark-tinted:    #140a00;
}

/* ── Amber ──────────────────────────────────── */

[data-theme="amber"] {
  --color-primary:        #E9A319;
  --color-secondary:      #FAD59A;
  --color-accent:         #A86523;
  --color-bg-warm:        #FCEFCB;

  --color-page-bg:        #FCEFCB;
  --color-bg-section:     #FCEFCB;
  --color-bg-soft:        #F8E0A8;
  --color-bg-dark:        #1F1604;       /* .hero, .stats, .section--dark, .page-hero, .footer */

  --color-bg-brand:       #E9A319;
  --color-bg-brand-dark:  #c07800;

  --color-green-dim:      rgba(233, 163, 25, 0.08);
  --color-green-light:    #FAD59A;
  --color-green-soft:     #f5c060;
  --shadow-green:         0 8px 32px rgba(233, 163, 25, 0.25);
  --color-green-glow-12:  rgba(233, 163, 25, 0.12);
  --color-green-glow-15:  rgba(233, 163, 25, 0.15);
  --color-green-glow-20:  rgba(233, 163, 25, 0.20);
  --color-green-glow-30:  rgba(233, 163, 25, 0.30);

  --color-dark-deep:      #1a1000;
  --color-dark-tinted:    #140c00;
}

/* ── Caramel ─────────────────────────────────── */

[data-theme="caramel"] {
  --color-primary:        #FEBA17;
  --color-secondary:      #74512D;
  --color-accent:         #4E1F00;
  --color-bg-warm:        #F8F4E1;

  --color-page-bg:        #F8F4E1;
  --color-bg-section:     #F8F4E1;
  --color-bg-soft:        #F0E8C8;
  --color-bg-dark:        #1A1308;       /* .hero, .stats, .section--dark, .page-hero, .footer */

  --color-bg-brand:       #FEBA17;
  --color-bg-brand-dark:  #d09000;

  --color-green-dim:      rgba(254, 186, 23, 0.08);
  --color-green-light:    #ffd060;
  --color-green-soft:     #ffc840;
  --shadow-green:         0 8px 32px rgba(254, 186, 23, 0.25);
  --color-green-glow-12:  rgba(254, 186, 23, 0.12);
  --color-green-glow-15:  rgba(254, 186, 23, 0.15);
  --color-green-glow-20:  rgba(254, 186, 23, 0.20);
  --color-green-glow-30:  rgba(254, 186, 23, 0.30);

  --color-dark-deep:      #1a1000;
  --color-dark-tinted:    #110a00;
}

/* ── Sunset ──────────────────────────────────── */

[data-theme="sunset"] {
  --color-primary:        #FA812F;
  --color-secondary:      #FAB12F;
  --color-accent:         #FA4032;
  --color-bg-warm:        #FEF3E2;

  --color-page-bg:        #FEF3E2;
  --color-bg-section:     #FEF3E2;
  --color-bg-soft:        #FCE4C0;
  --color-bg-dark:        #1F0E04;       /* .hero, .stats, .section--dark, .page-hero, .footer */

  --color-bg-brand:       #FA812F;
  --color-bg-brand-dark:  #d05000;

  --color-green-dim:      rgba(250, 129, 47, 0.08);
  --color-green-light:    #FAB12F;
  --color-green-soft:     #fb9f60;
  --shadow-green:         0 8px 32px rgba(250, 129, 47, 0.25);
  --color-green-glow-12:  rgba(250, 129, 47, 0.12);
  --color-green-glow-15:  rgba(250, 129, 47, 0.15);
  --color-green-glow-20:  rgba(250, 129, 47, 0.20);
  --color-green-glow-30:  rgba(250, 129, 47, 0.30);

  --color-dark-deep:      #1a0800;
  --color-dark-tinted:    #130500;
}

/* ── Theme Switcher UI ───────────────────────── */

.theme-switcher {
  display: flex;
  gap: 8px;
  align-items: center;
}

.theme-chip {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.2s, transform 0.2s;
  padding: 0;
  outline: none;
}

.theme-chip.is-active {
  border-color: #ffffff;
  transform: scale(1.15);
  box-shadow: 0 0 0 2px rgba(0,0,0,0.2);
}

.theme-chip:hover {
  transform: scale(1.1);
}

/* GNB solid 상태에서 border 색상 조정 */
.gnb--solid .theme-chip.is-active {
  border-color: #333;
}

/* ── Theme Edit Button (+ 버튼) ──────────────── */
.theme-edit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-left: 4px;
  border-radius: 50%;
  border: 1.5px solid var(--color-white-alpha-55, rgba(255,255,255,.55));
  background: transparent;
  color: var(--color-white, #fff);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: border-color .2s, color .2s, background .2s, transform .2s;
}
.theme-edit-btn:hover {
  transform: scale(1.1);
  background: var(--color-white-alpha-12, rgba(255,255,255,.12));
  border-color: var(--color-white, #fff);
}
.gnb--solid .theme-edit-btn {
  border-color: #6b7c73;
  color: #3f4f47;
}
.gnb--solid .theme-edit-btn:hover {
  background: rgba(0,0,0,.06);
  border-color: #1e2b23;
  color: #111714;
}

/* ── 테마 스위처 숨김 ──────────────────────── */
.theme-switcher,
.theme-edit-btn {
  display: none !important;
}