/* ============================================================
   ASpire Journey 設計代幣
   ------------------------------------------------------------
   所有顏色和間距集中在這裡定義，改一處全站跟著變。
   這叫「單一事實來源」——避免同一個顏色散落在幾十處各寫各的，
   之後想調色只要改這個檔案。

   配色概念：「日系繪本」（2026-10 改版）
   - 和紙白底 + 3px 墨灰粗線框 + 大圓角
   - 四個平塗色：珊瑚粉、山吹黃、水色、若竹綠
   - 不用漸層、不用陰影 —— 繪本是平塗的，立體感靠粗線就夠
   - 只做淺色，沒有深色模式（刻意的選擇，繪本就是紙的顏色）
   ============================================================ */
:root {
  /* 底色與線條 */
  --paper:      #FFFCF6;   /* 和紙白：全站底色 */
  --ink:        #3E3A39;   /* 墨灰：線框、主要文字 */
  --ink-soft:   #6E6866;   /* 次要文字：跟墨灰同色相的淺一階 */

  /* 繪本四色 */
  --coral:      #F2A497;   /* 珊瑚粉：主要行動、去程、必去 */
  --yellow:     #F6D27A;   /* 山吹黃：選中狀態、強調 */
  --sky:        #A8D3E6;   /* 水色：天空、回程 */
  --green:      #B9DAA5;   /* 若竹綠：完成、勾選 */

  /* 四色的淡色版，當大面積卡片底色用（平塗，不是漸層） */
  --coral-pale:  #FDEEEA;
  --yellow-pale: #FDF4DC;
  --sky-pale:    #E6F3F8;
  --green-pale:  #EEF6E8;

  /* 語意色：成功、警告。從四色裡挑，不另外加新顏色 */
  --ok:         var(--green);
  --warn:       var(--coral);

  /* 線框與圓角 */
  --line:       3px solid var(--ink);   /* 主要粗線框 */
  --line-thin:  2px solid var(--ink);   /* 小元件（標籤、輸入框）用細一點 */
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 24px;
  --r-pill: 999px;

  /* 字型：Huninn（粉圓體系的圓體），沒載到時退回系統字 */
  --font: 'Huninn', 'PingFang TC', 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;

  /* 間距節奏：4 的倍數，維持整齊 */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.5;
  /* Huninn 只有一種粗細。禁止瀏覽器硬加粗，否則字會糊成一團 */
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
/* 全站不用粗體 —— 字型本身沒有粗體，層次靠字級大小和顏色區分 */
h1, h2, h3, h4, strong, b { font-weight: 400; }

/* 鍵盤操作時看得到焦點在哪，這是無障礙的基本要求 */
:focus-visible { outline: 3px dashed var(--coral); outline-offset: 3px; }

/* ---- 開機畫面 ---- */
.boot {
  min-height: 100vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: var(--s4); padding: var(--s6);
  text-align: center;
}
.boot-brand { font-size: 26px; letter-spacing: 0.02em; color: var(--ink); }
.boot-brand span { color: var(--coral); }
.boot-status { font-size: 15px; color: var(--ink-soft); }
.boot-hint {
  font-size: 13px; color: var(--ink-soft); line-height: 1.7;
  max-width: 420px;
}

/* ---- 按鈕 ----
   繪本風的按鈕：粗線框 + 平塗底色，按下去往下沉 2px，像實體貼紙被壓下去 */
.btn {
  font-family: inherit; color: var(--ink);
  background: var(--coral);
  border: var(--line); border-radius: var(--r-pill);
  padding: var(--s2) var(--s5);
  font-size: 16px; cursor: pointer;
  transition: transform .12s, background-color .15s;
  /* 底下 3px 的墨色「厚度」，按下時消失，看起來像被壓扁 */
  box-shadow: 0 3px 0 var(--ink);
}
.btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 0 var(--ink); }
.btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 0 0 var(--ink); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* 次要按鈕：白底，不搶主要按鈕的風頭 */
.btn-ghost { background: var(--paper); font-size: 15px; }

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