/* ============================================
   萊豐格空間藝術 — 日式古典主題 theme.css
   全站共用設計語言，覆蓋 Bootstrap 預設值
   ============================================ */

/* 字體引入 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@400;500;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400&display=swap');

/* ── 設計 Token ── */
:root {
  --c-bg:           #FFFFFF;
  --c-surface:      #F7F2EA;
  --c-surface-alt:  #EDE5D8;
  --c-primary:      #1C1A17;
  --c-secondary:    #5C5248;
  --c-muted:        #9C8F83;
  --c-accent:       #C49A2E;
  --c-accent-soft:  rgba(196, 154, 46, 0.13);
  --c-accent-hover: #B38828;
  --c-red:          #8C2020;
  --c-red-soft:     rgba(140, 32, 32, 0.09);
  --c-border:       rgba(90, 70, 50, 0.13);
  --c-shadow:       0 6px 20px rgba(28, 26, 23, 0.07);
  --c-shadow-hover: 0 10px 28px rgba(196, 154, 46, 0.15);

  /* 向後相容舊變數名稱 */
  --color-dark:    #1C1A17;
  --color-accent:  #C49A2E;
  --color-muted:   #9C8F83;
  --color-surface: #F7F2EA;
  --color-red:     #8C2020;

  /* 字體堆疊 */
  --font-serif: 'Noto Serif TC', 'Georgia', '新細明體', serif;
  --font-sans:  'Noto Sans TC', system-ui, -apple-system, 'Microsoft JhengHei', sans-serif;
  --font-deco:  'Cormorant Garamond', 'Georgia', serif;
}

/* ── 全域基底 ── */
body {
  font-family: var(--font-sans);
  background: var(--c-bg);
  color: var(--c-primary);
  line-height: 1.78;
}

/* ── 導覽列 ── */
.navbar {
  background: var(--c-surface) !important;
  border-bottom: 1px solid var(--c-border) !important;
  box-shadow: none !important;
}

.navbar-brand .brand-text {
  font-family: var(--font-serif);
  color: var(--c-accent) !important;
  font-weight: 700;
  letter-spacing: 1px;
}

.nav-link {
  color: var(--c-secondary) !important;
  letter-spacing: 0.4px;
  font-size: 0.9rem;
}

.nav-link:hover,
.nav-link.active {
  color: var(--c-primary) !important;
}

/* ── 按鈕 ── */
.btn-accent {
  background: var(--c-accent) !important;
  border: none !important;
  color: #ffffff !important;
  font-weight: 700;
  border-radius: 6px !important;
  letter-spacing: 0.5px;
}

.btn-accent:hover,
.btn-accent:focus {
  background: var(--c-accent-hover) !important;
  color: #fff !important;
}

.btn-outline-accent {
  border: 1.5px solid var(--c-accent) !important;
  color: var(--c-primary) !important;
  background: transparent !important;
  border-radius: 6px !important;
  font-weight: 600;
}

.btn-outline-accent:hover {
  background: var(--c-accent-soft) !important;
  border-color: var(--c-accent) !important;
  color: var(--c-primary) !important;
}

.btn-outline-secondary {
  border-color: var(--c-border) !important;
  color: var(--c-secondary) !important;
  background: transparent !important;
  border-radius: 6px !important;
}

.btn-outline-secondary:hover {
  background: var(--c-accent-soft) !important;
  border-color: var(--c-accent) !important;
  color: var(--c-primary) !important;
}

/* ── 區塊標題 ── */
.section-title,
.page-title,
.subsidy-title {
  font-family: var(--font-serif) !important;
  color: var(--c-primary) !important;
  letter-spacing: 1px;
}

/* ── 分隔線 ── */
.divider {
  background: var(--c-accent) !important;
}

/* ── 米白底色區塊 ── */
.muted-bg {
  background: var(--c-surface) !important;
}

/* ── 卡片 ── */
.card {
  border: 1px solid var(--c-border) !important;
  border-radius: 8px !important;
  box-shadow: var(--c-shadow) !important;
  transition: box-shadow 0.2s ease, transform 0.2s ease !important;
}

.card:hover {
  box-shadow: var(--c-shadow-hover) !important;
}

/* 服務卡片：hover 時左側暖黃邊線 */
.section-cards .card {
  border-left: 3px solid transparent !important;
}

.section-cards .card:hover {
  border-left-color: var(--c-accent) !important;
  transform: translateY(-2px);
}

/* ── 步驟圓圈與圖示 ── */
.about-feature-icon {
  background: var(--c-red-soft) !important;
  color: var(--c-red) !important;
}

.about-step-num {
  background: var(--c-accent-soft) !important;
  color: #7A5E10 !important;
}

.about-step:hover {
  border-color: rgba(196, 154, 46, 0.55) !important;
  box-shadow: var(--c-shadow-hover) !important;
}

/* ── 頁尾 ── */
footer.bg-dark,
footer[class*="bg-dark"] {
  background: #1C1A17 !important;
}

/* ── Bootstrap 文字色覆蓋 ── */
.text-muted {
  color: var(--c-muted) !important;
}

/* ── Accordion ── */
.accordion-button:not(.collapsed) {
  background: var(--c-surface) !important;
  color: var(--c-primary) !important;
  box-shadow: none !important;
}

.accordion-button:focus {
  box-shadow: 0 0 0 0.2rem var(--c-accent-soft) !important;
  border-color: var(--c-accent) !important;
}

.accordion-item {
  border-color: var(--c-border) !important;
}

/* ── 工作卡片（portfolio 頁） ── */
.work-card {
  border: 1px solid var(--c-border) !important;
  border-radius: 10px !important;
  box-shadow: var(--c-shadow) !important;
}

.work-card:hover {
  box-shadow: var(--c-shadow-hover) !important;
}

.work-card:focus-visible {
  outline-color: var(--c-accent) !important;
}

.badge-accent {
  background: var(--c-accent-soft) !important;
  color: #7A5E10 !important;
  border-color: rgba(196, 154, 46, 0.4) !important;
}

/* ── Info 卡片（portfolio 頁） ── */
.info-card {
  border-color: rgba(196, 154, 46, 0.25) !important;
  background: var(--c-surface) !important;
}

.info-callout {
  border-left-color: var(--c-accent) !important;
  box-shadow: inset 0 0 0 1px rgba(196, 154, 46, 0.16) !important;
}

/* ── Before-after 頁面專屬 ── */
.chapter-chip {
  border-color: var(--c-border) !important;
  color: var(--c-primary) !important;
  background: #fff !important;
}

.chapter-chip:hover {
  background: var(--c-accent-soft) !important;
}

.chapter-chip:focus-visible {
  outline-color: rgba(140, 32, 32, 0.35) !important;
}

.case-card {
  border-color: var(--c-border) !important;
}

/* ── 表單 ── */
.form-control:focus,
.form-select:focus {
  border-color: var(--c-accent) !important;
  box-shadow: 0 0 0 0.2rem var(--c-accent-soft) !important;
}

/* ── Modal ── */
.modal-content {
  border-radius: 10px !important;
  border-color: var(--c-border) !important;
}