/**
 * 馥靈之鑰 2026 多巴胺設計系統 共用 tokens
 * 2026-04-26 建立 · 逸君 Phase 1 拍板（黑金/米色棕金 → 2026 多巴胺）
 *
 * 用法：
 *   1. 各頁 <head> 加 <link rel="stylesheet" href="assets/css/hl-dopamine-2026.css">
 *   2. <body class="dopamine-2026"> 觸發整頁多巴胺
 *   3. 或局部試點時不加 class，只在 inline <style> 用 var(--hl-*) 引用 token
 *
 * 配色出處（2026 官方年度色）：
 *   雲舞白 Cloud Dancer  PANTONE 11-4201 TCX
 *   變革藍綠 Transformative Teal  WGSN × Coloro 092-37-14
 *   律動絢藍 Rhythm of Blues  Dulux 62BB 08/369
 *   暖心粉 Heartfelt Pink  JAFCA 1.2R8.3/3.9
 *   映輝 Silhouette  Benjamin Moore AF-655
 *
 * ⚠️ 不動既有 base CSS（hourlight-global / hl-cosmos / hl-design-tokens）
 *    本檔是 opt-in，配合各頁 class 切換
 *    完整規範見 references/2026-design-system.md
 */

:root {
  /* === 2026 五大色 === */
  --hl-bg-dopamine:    #F0EEE9;
  --hl-bg-dopamine-2:  #F5F3EC;
  --hl-teal:           #007B7F;
  --hl-blue:           #2E5EA6;
  --hl-pink:           #FFCCCC;
  --hl-ink:            #3D3835;

  /* === 律動絢藍家族（Dulux 官方）=== */
  --hl-blue-light:     #A5C3D9;  /* 輕漾霧藍 */
  --hl-blue-deep:      #1D3A5F;  /* 搖曳墨藍 */

  /* === Neo-Brutalism 硬陰影 === */
  --hl-shadow-cta:        6px 6px 0 var(--hl-ink);
  --hl-shadow-cta-hover:  9px 9px 0 var(--hl-ink);
  --hl-shadow-card:       4px 4px 0 var(--hl-ink);
  --hl-shadow-card-hover: 6px 6px 0 var(--hl-ink);
  --hl-shadow-soft:       0 12px 24px rgba(61,56,53,.12);

  /* === 字型 === */
  --hl-sans-display: 'Noto Sans TC', system-ui, -apple-system, sans-serif;
  --hl-sans-body:    'Noto Sans TC', 'Inter', system-ui, sans-serif;

  /* === 動畫 ease === */
  --hl-ease:   cubic-bezier(.4, 0, .2, 1);
  --hl-ease-2: cubic-bezier(.16, 1, .3, 1);
  --hl-ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
}

/* ===========================================================
   Body opt-in（觸發整頁多巴胺）
   未加 class 的頁面不受影響
   =========================================================== */
body.dopamine-2026 {
  background: var(--hl-bg-dopamine) !important;
  background-image: none !important;
  color: var(--hl-ink) !important;
  font-family: var(--hl-sans-body);
}

body.dopamine-2026 .hl-cosmos,
body.dopamine-2026 .hl-stars-layer {
  display: none !important;
}

/* iOS placeholder / select option 必要覆蓋（淺底必須能看到字）*/
body.dopamine-2026 input,
body.dopamine-2026 select,
body.dopamine-2026 textarea {
  color: var(--hl-ink) !important;
  background-color: #fff !important;
}
body.dopamine-2026 ::placeholder {
  color: #B5B0A8 !important;
  opacity: 1 !important;
}
body.dopamine-2026 select option {
  background: #fff !important;
  color: var(--hl-ink) !important;
}

/* ===========================================================
   Neo-Brutalism 通用工具類
   單獨 class 使用 / 也可組合
   =========================================================== */

/* 卡片框 */
.hl-neo-frame {
  border: 3px solid var(--hl-ink);
  box-shadow: var(--hl-shadow-card);
  border-radius: 16px;
  background: var(--hl-bg-dopamine);
  color: var(--hl-ink);
  transition: transform .15s var(--hl-ease), box-shadow .15s var(--hl-ease);
}
.hl-neo-frame:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--hl-shadow-card-hover);
}

/* CTA 按鈕（暖心粉預設）*/
.hl-neo-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 32px;
  background: var(--hl-pink);
  color: var(--hl-ink);
  border: 2.5px solid var(--hl-ink);
  border-radius: 999px;
  box-shadow: var(--hl-shadow-cta);
  font-family: var(--hl-sans-display);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: .04em;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s var(--hl-ease), box-shadow .15s var(--hl-ease);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  min-height: 48px;
}
.hl-neo-cta:hover {
  transform: translate(-3px, -3px);
  box-shadow: var(--hl-shadow-cta-hover);
}
.hl-neo-cta:active {
  transform: translate(3px, 3px);
  box-shadow: 1px 1px 0 var(--hl-ink);
}
.hl-neo-cta--teal { background: var(--hl-teal); color: var(--hl-bg-dopamine); }
.hl-neo-cta--blue { background: var(--hl-blue); color: var(--hl-bg-dopamine); }
.hl-neo-cta--ghost {
  background: transparent;
  color: var(--hl-ink);
  border-color: var(--hl-ink);
  box-shadow: 4px 4px 0 var(--hl-ink);
}
.hl-neo-cta--ghost:hover { box-shadow: 6px 6px 0 var(--hl-ink); }

/* ===========================================================
   Hero Display 大字（900 weight + 緊湊字距 + 三色彩字 accent）
   =========================================================== */
.hl-hero-display {
  font-family: var(--hl-sans-display);
  font-weight: 900;
  font-size: clamp(2.6rem, 9vw, 5.4rem);
  letter-spacing: -.045em;
  line-height: .96;
  color: var(--hl-ink);
}
.hl-hero-accent-pink { color: var(--hl-pink); }
.hl-hero-accent-teal { color: var(--hl-teal); }
.hl-hero-accent-blue { color: var(--hl-blue); }

/* 暖心粉螢光筆底線（適合 Hero 重點字）*/
.hl-hero-highlight {
  background: linear-gradient(180deg, transparent 60%, var(--hl-pink) 60%);
  padding: 0 .12em;
}

/* ===========================================================
   Blob 動態裝飾（3 顆暖色 blob 浮動）
   父容器需 position:relative + overflow:hidden
   =========================================================== */
.hl-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .55;
  pointer-events: none;
  animation: hlBlobFloat 24s ease-in-out infinite;
  z-index: 0;
}
.hl-blob--teal { background: var(--hl-teal); }
.hl-blob--blue { background: var(--hl-blue); }
.hl-blob--pink { background: var(--hl-pink); }
.hl-blob--small  { width: 200px; height: 200px; }
.hl-blob--medium { width: 320px; height: 320px; filter: blur(90px); }
.hl-blob--large  { width: 480px; height: 480px; filter: blur(120px); }

@keyframes hlBlobFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(30px, -20px) scale(1.05); }
  66%      { transform: translate(-20px, 30px) scale(.95); }
}

/* ===========================================================
   Fade-up 進場動畫（IntersectionObserver 配合）
   =========================================================== */
.hl-fade-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s var(--hl-ease-2), transform .8s var(--hl-ease-2);
}
.hl-fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===========================================================
   Pulse 脈衝（badge / 提示用）
   =========================================================== */
.hl-pulse {
  animation: hlPulse 2.5s ease-in-out infinite;
}
@keyframes hlPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}

/* ===========================================================
   iOS 安全區 + 觸控感
   =========================================================== */
body.dopamine-2026 {
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: contain;
}
body.dopamine-2026 button,
body.dopamine-2026 a,
body.dopamine-2026 select,
body.dopamine-2026 input[type=submit],
body.dopamine-2026 input[type=button] {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
body.dopamine-2026 select,
body.dopamine-2026 input[type=text],
body.dopamine-2026 input[type=number],
body.dopamine-2026 input[type=date],
body.dopamine-2026 input[type=email],
body.dopamine-2026 textarea {
  font-size: 16px !important; /* 防 iOS Safari 自動 zoom */
}
@media (max-width: 600px) {
  body.dopamine-2026 button,
  body.dopamine-2026 input[type=submit],
  body.dopamine-2026 input[type=button] {
    min-height: 48px;
  }
}

/* ===========================================================
   滾動行為
   =========================================================== */
html { scroll-behavior: smooth; }
body.dopamine-2026 { overflow-x: hidden; }

/* ===========================================================
   AAA 對比度組合速查（給工程師參考用，註解形式）
   ✅ 雲舞白 #F0EEE9 + 映輝 #3D3835 字 → 16:1
   ✅ 暖心粉 #FFCCCC + 映輝 #3D3835 字 → 10:1
   ✅ 變革藍綠 #007B7F + 雲舞白字 → 5.8:1 (AA)
   ✅ 律動絢藍 #2E5EA6 + 雲舞白字 → 7.1:1 (AAA)
   ✅ 映輝 #3D3835 + 雲舞白字 → 11:1
   ❌ 永久禁忌：白字 on 淺粉/淺藍/雲舞白
   ❌ 永久禁忌：暖心粉底配白字（1.4:1 看不到）
   =========================================================== */
