/* ============================================================
   Blessing Project — Design Tokens
   品牌意象：先知以利亞（火、烏鴉餵養、微小的聲音）× Living Room In Heaven（家的溫暖燭光）

   色彩集中管理說明：
   全站僅使用四個品牌色 — Silk White／Warm Brown／Warm Gray／Gold Accent。
   下方沿用原本的語意變數名稱（--ink、--wine、--sage 等）以避免更動
   components.css／pages.css 內數百處既有引用，但其數值已全部改為
   對應到這四個品牌色，不再包含深藍色。若要調整品牌色，只需修改本檔案。
   ============================================================ */

:root {
  /* 文字節奏（行距）：數字越小，行與行越靠近。改這裡，全站一起變。 */
  --lh-text: 1.55;      /* 一般文字（原本 1.6～1.7） */
  --lh-relaxed: 1.6;    /* 長段落、故事內文（原本 1.8～1.9） */
  --eyebrow-tracking: .04em; /* 英文小標的字距（原本 .08em） */
  /* --- 品牌色 Brand Palette（唯一色源） --- */
  --color-silk: #F7F4EE;        /* 祝福暖白 */
  --color-silk-card: #EEEAE2;   /* 卡片米白 */
  --color-brown: #4B4741;       /* Warm Brown */
  --color-brown-soft: #777169;  /* Warm Brown（次要文字，較淺） */
  --color-gray: #9D9992;        /* Warm Gray */

  /* --- Gold Accent System（集中管理，全站按鈕與強調色唯一來源） ---
     改為淺香檳／淺玫瑰金，作為「點綴用」強調色（小標文字、圖示、細邊框），
     不再作為大面積按鈕填色，也避免看起來像深銅色。
     --color-gold          香檳金（小標文字、圖示、連結強調 — 需維持可讀性）
     --color-gold-hover    互動 hover／active 狀態，略深一階
     --color-gold-highlight 最淺的香檳金，僅用於按鈕細邊框等極淡的點綴 */
  --color-gold: #C49A52;
  --color-gold-hover: #A87932;
  --color-gold-highlight: #F0D9A5;

  /* --- 淺色按鈕系統（取代大面積深棕填色按鈕） ---
     主要／金色 CTA 按鈕一律使用暖象牙白／淺暖灰底＋暖棕邊框＋暖棕文字，
     維持在 Silk White 背景上輕盈、安靜的觀感，不使用漸層或厚重陰影。 */
  --color-btn-light: #FFF0D9;
  --color-btn-light-hover: #FFE3BA;

  --footer-bg: #E2DED5;         /* Footer 暖灰米色 */
  --footer-bottom-bg: #D3CEC4;  /* Footer 下半部更深一階 */
  --footer-text: #4B4741;
  --footer-heading: #403C36;
  --footer-muted: #6F6961;

  /* --- 色彩 Color（語意變數，全部對應到上方品牌色） --- */
  --paper: var(--color-silk);        /* 底色 */
  --paper-card: var(--color-silk-card); /* 卡片米白 */
  --paper-card-deep: #ECE8DF; /* 小卡底色（比卡片米白再深一點點） */
  --ink: var(--color-brown);         /* 正文／結構（原深藍已移除） */
  --ink-soft: var(--color-brown-soft); /* 次要文字 */
  --gold: var(--color-gold);         /* 強調色（僅供點綴，不作大面積按鈕填色） */
  --gold-hover: var(--color-gold-hover);
  --gold-bright: var(--color-gold-highlight); /* 深色背景上的金色文字強調 */
  --btn-light: var(--color-btn-light);
  --btn-light-hover: var(--color-btn-light-hover);
  --color-brown-hover: #51483E;      /* 深棕文字／邊框 hover（修正過去殘留的深藍色 #333c56） */
  --color-coffee-soft: #81786E;      /* 柔和暖咖啡灰 */
  --wine: #756B61;                   /* 強調／標籤色－暖棕色調 */
  --sage: var(--color-gray);         /* 次要強調－暖灰（原橄欖綠已移除） */
  --line: rgba(63, 57, 50, 0.14);
  --line-strong: rgba(63, 57, 50, 0.28);
  --shadow: 0 10px 28px rgba(63, 57, 50, 0.10);
  --shadow-lift: 0 18px 44px rgba(63, 57, 50, 0.16);
  --shadow-soft: 0 3px 10px rgba(63, 57, 50, 0.08);

  /* --- 字體 Type --- */
  --font-display: 'Fraunces', 'Noto Serif TC', serif;
  --font-body: 'Noto Sans TC', 'Inter', -apple-system, sans-serif;
  --font-mono: 'Space Mono', 'Noto Sans TC', monospace;

  /* --- 版型 Layout --- */
  --max-width: 1180px;
  --radius-s: 4px;
  --radius-m: 10px;
  --radius-l: 20px;
  --gutter: clamp(32px, 5.2vw, 76px);
}

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: var(--lh-text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  background-image:
    radial-gradient(circle at 20% 10%, rgba(176,141,62,0.05), transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(140,133,121,0.05), transparent 45%);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.25;
  margin: 0 0 0.5em;
}

a { color: inherit; text-decoration: none; }

img { max-width: 100%; display: block; }

button { font-family: var(--font-body); cursor: pointer; }

.eyebrow {
  line-height: 1.35;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;

  text-transform: uppercase;

}

.container {

  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* 燙金焦點樣式（可及性） */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- 燭火簽名圖標 Flame Signature --- */
.flame-mark {
  display: inline-block;

  vertical-align: -0.12em;
}

/* 版面留白：寬螢幕不貼邊，手機固定 20px。 */
@media (min-width: 1500px) {
  :root { --gutter: clamp(64px, 5.2vw, 88px); --max-width: 1240px; }
}
@media (max-width: 720px) {
  :root { --gutter: 20px; }
}