/**
 * PeaKit 山盒 — Dawn Spectrum 品牌設計 Token
 *
 * 所有頁面的共享設計基底。引入此檔後即可在任何元素上使用這些 CSS 變數。
 * site-header.js 自帶的 :root 變數是 header 專用子集；
 * 這裡是完整品牌系統，覆蓋所有 UI 元件（卡片、按鈕、文字、間距等）。
 *
 * 使用方式：
 *   <link rel="stylesheet" href="/public/css/brand-tokens.css">
 *
 * v1.0 — 2026-04-06 — Phase 0 基礎建設（ui-redesign-v3）
 */

/* ═══════════════════════════════════════════════
   1. Dawn Spectrum 色彩系統
   ═══════════════════════════════════════════════ */
:root {
  /* ── 核心色票 ── */
  --pk-night:     #1E2330;
  --pk-dusk:      #4A5168;
  --pk-sky:       #AEBDD4;
  --pk-blush:     #F5D9D4;
  --pk-glow:      #FCF3DB;
  --pk-mist:      #F4F1EC;
  --pk-amber:     #C4845A;
  --pk-ember:     #A56B45;
  --pk-summit:    #4A8B8D;

  /* ── 功能色 ── */
  --pk-white:     #FFFFFF;
  --pk-amber-soft:#E6B38A;
  --pk-error:     #B43C3C;
  --pk-success:   #4A8B6A;

  /* ── AI 風險等級色(2026-04-15 新增,for AI 天氣分析)── */
  /* 注意:--pk-summit 用於「穩定」、--pk-amber-soft 用於「警戒」outline */
  --pk-dawn:            #E8C878;  /* 注意層級 — 暖黃,介於 glow 與 amber-soft */
  --pk-dawn-soft:       rgba(232, 200, 120, 0.15);
  --pk-risk-severe:     #8B3A2F;  /* 嚴峻層級 — 暗紅褐,不刺眼,嚮導語氣 */
  --pk-risk-severe-soft:rgba(139, 58, 47, 0.12);

  /* ── 透明度變體 ── */
  --pk-night-80:  rgba(30, 35, 48, 0.80);
  --pk-night-95:  rgba(30, 35, 48, 0.95);
  --pk-night-06:  rgba(30, 35, 48, 0.06);
  --pk-night-08:  rgba(30, 35, 48, 0.08);
  --pk-night-12:  rgba(30, 35, 48, 0.12);
  --pk-amber-08:  rgba(196, 132, 90, 0.08);
  --pk-amber-15:  rgba(196, 132, 90, 0.15);

  /* ── 文字色 ── */
  --pk-text-on-dark:      #F5F1E8;
  --pk-text-on-dark-mute: #AEBDD4;
  --pk-text-on-light:     #1E2330;
  --pk-text-on-light-mute:#4A5168;
  --pk-text-on-light-dim: #8A8F9E;

  /* ── 常用漸層 ── */
  --pk-gradient-dawn:   linear-gradient(135deg, #FCF3DB 0%, #F5D9D4 100%);
  --pk-gradient-night:  linear-gradient(180deg, #1E2330 0%, #2A3040 100%);
  --pk-gradient-hero:   linear-gradient(180deg,
    #1E2330 0%,
    #2A3040 20%,
    #3D4560 40%,
    #6B7A9A 60%,
    #AEBDD4 75%,
    #F5D9D4 88%,
    #FCF3DB 100%
  );

  /* ═══════════════════════════════════════════════
     2. 字型系統
     ═══════════════════════════════════════════════ */
  --pk-font-family:     'Inter', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --pk-font-mono:       'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  /* ── 字級（基於 16px） ── */
  --pk-text-xs:   0.75rem;   /* 12px */
  --pk-text-sm:   0.875rem;  /* 14px */
  --pk-text-base: 1rem;      /* 16px */
  --pk-text-md:   1.125rem;  /* 18px */
  --pk-text-lg:   1.25rem;   /* 20px */
  --pk-text-xl:   1.5rem;    /* 24px */
  --pk-text-2xl:  2rem;      /* 32px */
  --pk-text-3xl:  2.5rem;    /* 40px */
  --pk-text-4xl:  3rem;      /* 48px */

  /* ── 字重 ── */
  --pk-weight-normal:   400;
  --pk-weight-medium:   500;
  --pk-weight-semibold: 600;
  --pk-weight-bold:     700;

  /* ── 行高 ── */
  --pk-leading-tight:   1.3;
  --pk-leading-normal:  1.6;
  --pk-leading-relaxed: 1.8;

  /* ── 字距 ── */
  --pk-tracking-tight:  -0.01em;
  --pk-tracking-normal:  0.01em;
  --pk-tracking-wide:    0.05em;
  --pk-tracking-wider:   0.1em;

  /* ═══════════════════════════════════════════════
     3. 間距系統（8px 基底）
     ═══════════════════════════════════════════════ */
  --pk-space-1:   4px;
  --pk-space-2:   8px;
  --pk-space-3:   12px;
  --pk-space-4:   16px;
  --pk-space-5:   20px;
  --pk-space-6:   24px;
  --pk-space-8:   32px;
  --pk-space-10:  40px;
  --pk-space-12:  48px;
  --pk-space-16:  64px;
  --pk-space-20:  80px;
  --pk-space-24:  96px;

  /* ═══════════════════════════════════════════════
     4. 圓角
     ═══════════════════════════════════════════════ */
  --pk-radius-sm:   6px;
  --pk-radius-md:   12px;
  --pk-radius-lg:   16px;
  --pk-radius-xl:   20px;
  --pk-radius-2xl:  28px;
  --pk-radius-full: 999px;

  /* ═══════════════════════════════════════════════
     5. 陰影
     ═══════════════════════════════════════════════ */
  --pk-shadow-xs:  0 1px 2px rgba(30, 35, 48, 0.05);
  --pk-shadow-sm:  0 2px 8px rgba(30, 35, 48, 0.08);
  --pk-shadow-md:  0 6px 24px rgba(30, 35, 48, 0.12);
  --pk-shadow-lg:  0 12px 40px rgba(30, 35, 48, 0.16);
  --pk-shadow-xl:  0 20px 60px rgba(30, 35, 48, 0.20);

  /* ═══════════════════════════════════════════════
     6. 動畫 Easing
     ═══════════════════════════════════════════════ */
  --pk-ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --pk-ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --pk-ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --pk-ease-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ═══════════════════════════════════════════════
     7. 佈局
     ═══════════════════════════════════════════════ */
  --pk-header-h:       64px;
  --pk-max-width:      1200px;
  --pk-max-width-sm:   640px;
  --pk-max-width-md:   860px;
  --pk-max-width-lg:   1080px;

  /* ═══════════════════════════════════════════════
     8. Z-Index 層級
     ═══════════════════════════════════════════════ */
  --pk-z-base:     1;
  --pk-z-sticky:   100;
  --pk-z-header:   9500;
  --pk-z-drawer:   9550;
  --pk-z-modal:    9700;
  --pk-z-toast:    9800;
}

@media (max-width: 768px) {
  :root {
    --pk-header-h: 56px;
    --pk-text-3xl: 2rem;
    --pk-text-4xl: 2.5rem;
  }
}

/* ═══════════════════════════════════════════════
   9. 全域基底樣式（opt-in）
   加上 .pk-page 到 <body> 即啟用
   ═══════════════════════════════════════════════ */
body.pk-page {
  margin: 0;
  padding: 0;
  font-family: var(--pk-font-family);
  font-size: var(--pk-text-base);
  line-height: var(--pk-leading-normal);
  color: var(--pk-text-on-light);
  background: var(--pk-mist);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.pk-page *,
body.pk-page *::before,
body.pk-page *::after {
  box-sizing: border-box;
}

/* ═══════════════════════════════════════════════
   10. 常用元件 Class
   ═══════════════════════════════════════════════ */

/* ── 容器 ── */
.pk-container {
  width: 100%;
  max-width: var(--pk-max-width);
  margin: 0 auto;
  padding: 0 var(--pk-space-8);
}
@media (max-width: 768px) {
  .pk-container { padding: 0 var(--pk-space-4); }
}

/* ── 主要 CTA 按鈕 ── */
.pk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pk-space-2);
  padding: var(--pk-space-3) var(--pk-space-6);
  border: none;
  border-radius: var(--pk-radius-full);
  font-family: var(--pk-font-family);
  font-size: var(--pk-text-sm);
  font-weight: var(--pk-weight-semibold);
  letter-spacing: var(--pk-tracking-normal);
  cursor: pointer;
  transition: transform 0.15s var(--pk-ease-default),
              box-shadow 0.2s var(--pk-ease-default);
  text-decoration: none;
}
.pk-btn:hover { transform: translateY(-1px); }
.pk-btn:active { transform: translateY(0); }
.pk-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; }

.pk-btn-amber {
  background: var(--pk-amber);
  color: var(--pk-white);
  box-shadow: 0 4px 16px rgba(196, 132, 90, 0.25);
}
.pk-btn-amber:hover {
  background: var(--pk-ember);
  box-shadow: 0 6px 24px rgba(196, 132, 90, 0.35);
}

.pk-btn-outline {
  background: transparent;
  color: var(--pk-amber);
  border: 1.5px solid var(--pk-amber);
}
.pk-btn-outline:hover {
  background: var(--pk-amber-08);
}

.pk-btn-white {
  background: var(--pk-white);
  color: var(--pk-text-on-light);
  box-shadow: var(--pk-shadow-sm);
}
.pk-btn-white:hover {
  box-shadow: var(--pk-shadow-md);
}

/* ── 卡片 ── */
.pk-card {
  background: var(--pk-white);
  border-radius: var(--pk-radius-lg);
  box-shadow: var(--pk-shadow-sm);
  overflow: hidden;
  transition: transform 0.2s var(--pk-ease-default),
              box-shadow 0.2s var(--pk-ease-default);
}
.pk-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--pk-shadow-md);
}

/* ── Section 間距 ── */
.pk-section {
  padding: var(--pk-space-20) 0;
}
@media (max-width: 768px) {
  .pk-section { padding: var(--pk-space-12) 0; }
}

/* ── 標題層級 ── */
.pk-heading-xl {
  font-size: var(--pk-text-3xl);
  font-weight: var(--pk-weight-bold);
  line-height: var(--pk-leading-tight);
  letter-spacing: var(--pk-tracking-tight);
  color: var(--pk-text-on-light);
}
.pk-heading-lg {
  font-size: var(--pk-text-2xl);
  font-weight: var(--pk-weight-bold);
  line-height: var(--pk-leading-tight);
  color: var(--pk-text-on-light);
}
.pk-heading-md {
  font-size: var(--pk-text-xl);
  font-weight: var(--pk-weight-semibold);
  line-height: var(--pk-leading-tight);
  color: var(--pk-text-on-light);
}

/* ── 輔助文字 ── */
.pk-text-mute {
  color: var(--pk-text-on-light-mute);
}
.pk-text-dim {
  color: var(--pk-text-on-light-dim);
}

/* ── Dawn 漸層背景區塊 ── */
.pk-bg-dawn {
  background: var(--pk-gradient-dawn);
}
.pk-bg-night {
  background: var(--pk-gradient-night);
  color: var(--pk-text-on-dark);
}
.pk-bg-hero {
  background: var(--pk-gradient-hero);
  color: var(--pk-text-on-dark);
}
.pk-bg-mist {
  background: var(--pk-mist);
}

/* ── 淡入動畫 ── */
.pk-fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--pk-ease-out),
              transform 0.6s var(--pk-ease-out);
}
.pk-fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}