/* ═══════════════════════════════════════════════════════════
   設計變數 — 全站唯一的真實來源
   要調整整站觀感，只改這個檔案。
   ═══════════════════════════════════════════════════════════ */

:root {
  color-scheme: dark;

  /* ── 底色 ────────────────────────────────────────────── */
  /* Apple 深色頁面的那組中性色：純黑底、#1d1d1f 系的材質、#f5f5f7 的字。
     不用帶藍或帶綠的灰 —— 那是「科技感」，Apple 的灰是完全中性的。 */
  --bg:          #000000;   /* 全站底色 */
  --bg-raised:   #161617;   /* bento 格子、卡片 */
  --bg-lift:     #1d1d1f;   /* 被指到、往前靠的材質 */
  --bg-veil:     #161617b8; /* 半透明浮層（導覽列、膠囊） */
  --hairline:    #ffffff1a; /* 材質的邊：比線稿的灰更輕，只負責分界 */

  /* ── 文字 ────────────────────────────────────────────── */
  --ink:         #f5f5f7;   /* 標題、內文 */
  --ink-muted:   #a1a1a6;   /* 次要說明 */
  --ink-faint:   #6e6e73;   /* 標籤、年份、註記 */

  /* ── 線稿 ────────────────────────────────────────────── */
  --stroke:       #e4e4e7;  /* 主結構線 */
  --stroke-dim:   #71717a;  /* 次要線、輔助線 */
  --stroke-faint: #3f3f46;  /* 底層、參考線、虛線 */

  /* ✏️ 全站唯一的強調色。只出現在每個專案的「結果」那一層。
        想換顏色改這一個值就好，九張線稿會一起跟著變。        */
  --accent:      #ff9f0a;

  /* ── 線寬 ────────────────────────────────────────────── */
  --w-line:      1.4;       /* 主結構 */
  --w-thin:      0.9;       /* 輔助 */
  --w-bold:      2.1;       /* 強調（結果層） */

  /* ── 字體 ────────────────────────────────────────────── */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
               "PingFang TC", "Noto Sans TC", "Microsoft JhengHei",
               system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  /* 字級：大字收緊字距、壓低行高；內文放鬆 —— 字距不是一個值走天下 */
  --t-display:   clamp(2.75rem, 8vw, 6rem);
  --t-h2:        clamp(1.75rem, 4vw, 2.75rem);
  --t-h3:        clamp(1.25rem, 2.2vw, 1.625rem);
  --t-body:      clamp(1rem, 1.15vw, 1.0625rem);
  --t-small:     0.875rem;
  --t-label:     0.75rem;

  /* ── 間距（用 rem，跟著使用者字級一起放大） ─────────────── */
  --sp-1:  0.5rem;
  --sp-2:  1rem;
  --sp-3:  1.5rem;
  --sp-4:  2.5rem;
  --sp-5:  4rem;
  --sp-6:  6rem;
  --sp-7:  9rem;

  --gutter: clamp(1.25rem, 5vw, 5rem);
  --measure: 34rem;          /* 內文最大寬度 */

  /* ── 動態曲線 ─────────────────────────────────────────── */
  /* 依 Apple「阻尼比 + 反應時間」兩參數算出來的彈簧，不是隨手挑的貝茲曲線 */
  --spring: linear(0, 0.1406 3.8%, 0.3993 7.7%, 0.6387 11.5%, 0.8134 15.4%,
            0.9223 19.2%, 0.9809 23.1%, 1.0069 26.9%, 1.0148 30.8%,
            1.0141 34.6%, 1.0105 38.5%, 1.0066 42.3%, 1.0036 46.2%,
            1.0016 50%, 1.0005 53.8%, 1);                    /* 阻尼 0.8 ／ 反應 0.38s：有一點點過衝 */
  --spring-soft: linear(0, 0.1 3.8%, 0.2875 7.7%, 0.4734 11.5%, 0.6272 15.4%,
            0.7437 19.2%, 0.8275 23.1%, 0.8858 26.9%, 0.9253 30.8%,
            0.9517 34.6%, 0.969 38.5%, 0.9802 42.3%, 0.9875 46.2%,
            0.9921 50%, 0.9951 53.8%, 0.9969 57.7%, 1);      /* 阻尼 1.0 ／ 反應 0.4s：完全不過衝 */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* 純煞車：臨界阻尼（阻尼比 1.0），零過衝，而且剛好在時長內走完
     —— 不像上面兩條彈簧會留一條很長的尾巴慢慢爬。
     從畫面外滑進來的東西用這條，是「滑進來然後停住」不是「彈一下」。 */
  --brake: linear(0, 0.0783 5%, 0.2348 10%, 0.4012 15%, 0.549 20%, 0.6691 25%,
           0.762 30%, 0.8314 35%, 0.882 40%, 0.9182 45%, 0.9437 50%, 0.9615 55%,
           0.9739 60%, 0.9823 65%, 0.9881 70%, 0.992 75%, 0.9947 80%, 0.9965 85%,
           0.9976 90%, 0.9984 95%, 1);

  --dur-tap:   0.1s;
  --dur-ui:    0.4s;
  --dur-enter: 0.9s;

  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;             /* Apple 的大磚：圓角要大到讀起來是「一塊材質」 */

  --nav-h: 48px;            /* 頂端導覽列 */
}

/* 降低透明度偏好：浮層改成實心 */
@media (prefers-reduced-transparency: reduce) {
  :root { --bg-veil: #161617; }
}

/* 高對比偏好：線稿全部提亮 */
@media (prefers-contrast: more) {
  :root {
    --stroke-dim: #a1a1aa;
    --stroke-faint: #71717a;
    --ink-faint: #a1a1aa;
  }
}