/* BanaPTT 官網設計系統 — Design tokens（唯一取值來源）
 *
 * 規格與決策見 BanaPtt repo `docs/feature/web_presence/DESIGN.md`。
 * 三層：primitive（原色，不直接用）→ semantic（頁面用這層）→ component（在 components.css）。
 *
 * 定案方向（2026-08-29）：A「和紙・明朝」為主幹、借 D「余白・極簡」的克制——
 * 明朝體只給標題與 Bana／PTT、內文走系統黑體；hero 以下少卡片、多髮絲線與余白。
 *
 * 中文排版：內文的全形標點走標準全形寬度（`palt` 只掛標題，理由見 components.css）。
 * **HTML 內文不要在中文字之間換行**——原始碼的換行會折成一個空格，在全形標點後面
 * 變成看得見的空隙（「客戶端，␣由開發者」）。長段落就讓它是長的一行。
 *
 * 色彩策略：形象區（hero）是固定的雙色海報（香蕉黃 × 墨黑），不跟隨系統主題；
 * hero 以外全站走淺色「和紙」底，深色模式只在 legal 頁等純文字頁面跟隨系統。
 */

:root {
  /* ---------- Primitive：香蕉黃（品牌唯一強調色，與 App 的 Primary 同血統） ---------- */
  --banana-100: #fbefc7;
  --banana-200: #f7de9a;
  --banana-300: #f1cb6a;
  --banana-500: #edb944; /* 概念圖定值；hero 暖面、選中態 */
  --banana-600: #d19e2e;
  --banana-700: #a87a1c; /* 淺底上要有對比的黃（≥4.5:1 對 paper） */
  --banana-900: #4a3505;

  /* ---------- Primitive：墨（深色面；沿用 App Neutral 的冷灰血統） ---------- */
  --ink-950: #141416;
  --ink-900: #1e1e1e; /* 概念圖 hero 暗面 */
  --ink-800: #272729; /* 概念圖裝置切換膠囊 */
  --ink-700: #323234;
  --ink-600: #48484a;
  --ink-500: #636366;
  --ink-400: #86868b;
  --ink-300: #a6a6a6; /* 概念圖商店鈕邊框 */
  --ink-200: #c7c7cc;
  --ink-100: #eaeaea; /* 概念圖裝置圖示未選中 */

  /* ---------- Primitive：和紙（淺色底；帶一絲黃調，與香蕉黃同一暖色家族） ---------- */
  --paper-50: #fbf9f3;
  --paper-100: #f6f3ea;
  --paper-200: #ede9dd;
  --paper-300: #ddd8c9;
  --paper-400: #c9c3b1;

  /* ---------- Primitive：墨字（淺底上的文字階） ---------- */
  --sumi-900: #1b1a17;
  --sumi-700: #45423b;
  --sumi-500: #6e6b62;
  --sumi-400: #8d8a80;

  /* ---------- Primitive：朱（印章紅；只給印記與危險動作） ---------- */
  --shu-500: #c4432b;
  --shu-600: #a83722;
  --shu-100: #fbe6e1;

  /* ---------- Primitive：連結藍（與 App textUrl 同色） ---------- */
  --blue-500: #2159c4;
  --blue-300: #7aaaf7;

  /* ---------- Semantic：淺色（預設） ---------- */
  --color-bg: var(--paper-100);
  --color-bg-sunken: var(--paper-200);
  --color-surface: var(--paper-50);
  --color-surface-raised: #ffffff;
  --color-text: var(--sumi-900);
  --color-text-muted: var(--sumi-500);
  --color-text-faint: var(--sumi-400);
  --color-border: var(--paper-300);
  --color-border-strong: var(--paper-400);
  --color-link: var(--blue-500);
  --color-accent: var(--banana-500);
  --color-accent-text: var(--banana-700); /* 淺底上當文字用的黃 */
  --color-on-accent: var(--sumi-900);
  --color-danger: var(--shu-500);
  --color-danger-bg: var(--shu-100);
  --color-focus: var(--banana-600);

  /* 深色互動件（按鈕主色 = 墨） */
  --color-button: var(--sumi-900);
  --color-on-button: var(--paper-50);
  --color-button-hover: var(--sumi-700);

  /* ---------- Semantic：hero 固定雙色（不隨主題變） ---------- */
  --hero-warm: var(--banana-500);
  --hero-dark: var(--ink-900);
  --hero-text: #ffffff;
  --hero-pill: var(--ink-800);
  --hero-icon: var(--ink-100);
  --hero-icon-active: var(--banana-500);
  --hero-badge: #000000;
  --hero-badge-border: var(--ink-300);

  /* ---------- Typography ---------- */
  /* 明朝體（宋體）當標題：自架 Noto Serif TC 子集（scripts/build-fonts.sh 產出）；
     退路是各平台內建宋體。內文走系統黑體，零下載。 */
  /* 退路只列繁中字面：夾日文字型（Hiragino）會讓標點改用日文置中慣例、與其他頁不一致。 */
  --font-display: "Noto Serif TC", "Songti TC", "Noto Serif CJK TC", "PMingLiU", Georgia, serif;
  --font-body: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  /* 流動字級：小螢幕下限 / 視窗比例 / 大螢幕上限 */
  --text-display-xl: clamp(4rem, 8.75vw, 10.5rem); /* hero「Bana」「PTT」：1920 寬時 168px */
  --text-display-l: clamp(2.5rem, 5vw, 4.5rem);
  --text-h1: clamp(2rem, 3.2vw, 3rem);
  --text-h2: clamp(1.5rem, 2.2vw, 2.125rem);
  --text-h3: 1.25rem;
  --text-nav: 1.25rem; /* 概念圖導覽 20px */
  --text-body-l: 1.125rem;
  --text-body: 1rem;
  --text-body-s: 0.875rem;
  --text-caption: 0.75rem;
  --text-overline: 0.625rem; /* 商店鈕「GET IT ON」 */

  --leading-display: 1;
  --leading-heading: 1.25;
  --leading-body: 1.8; /* 中文內文要比英文鬆 */
  --leading-tight: 1.4;

  --tracking-cjk-heading: 0.04em;
  --tracking-overline: 0.12em;
  --tracking-display: -0.01em;

  /* ---------- Spacing（4px 基底） ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --space-section: clamp(5rem, 12vw, 10rem); /* 段落之間的「余白」——借 D 款的留白量 */
  --gutter: clamp(1.25rem, 4vw, 3rem);

  /* ---------- Layout ---------- */
  --container: 75rem; /* 1200px */
  --container-narrow: 42rem; /* legal 頁閱讀寬度 */
  --measure: 38em; /* 中文內文一行上限（約 38 字） */
  /* 斷點（CSS 變數進不了 media query，這裡只當文件）：sm 640 / md 768 / lg 1024 / xl 1280 */

  /* ---------- Radius ---------- */
  --radius-s: 0.5rem; /* 商店鈕 */
  --radius-m: 0.75rem; /* 卡片、按鈕（與 App card/button 同 12dp） */
  --radius-l: 1rem;
  --radius-xl: 2rem; /* 裝置切換膠囊 */
  --radius-pill: 999px;

  /* ---------- Shadow ---------- */
  /* 概念圖的擬物膠囊：外投影＋左上亮、右下暗的內陰影 */
  --shadow-drop: 4px 4px 4px rgba(0, 0, 0, 0.25);
  --shadow-neu-inset: inset -4px -4px 4px rgba(0, 0, 0, 0.25), inset 4px 4px 4px rgba(255, 255, 255, 0.25);
  /* 淺底卡片：低而寬的暖灰影 */
  --shadow-card: 0 1px 2px rgba(27, 26, 23, 0.06), 0 12px 32px -8px rgba(27, 26, 23, 0.12);
  --shadow-device: 0 24px 64px -16px rgba(0, 0, 0, 0.45);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 150ms;
  --dur-base: 300ms;
  --dur-slow: 600ms;
  --dur-stage: 700ms; /* 裝置切換 */
  --autoplay-interval: 10s; /* 裝置預覽自動輪播週期；device-stage.js 讀同名變數 */

  /* ---------- Z-index ---------- */
  --z-stage: 2;
  --z-nav: 100;
  --z-sheet: 200;

  /* ---------- Texture：和紙顆粒（SVG 雜訊，零圖檔） ---------- */
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  --grain-opacity: 0.06;

  color-scheme: light;
}

/* 深色模式只給 hero 以外的純文字頁（legal / 刪除帳號）：跟隨系統，hero 變數不變。 */
@media (prefers-color-scheme: dark) {
  :root:not(.theme-lock-light) {
    --color-bg: var(--ink-950);
    --color-bg-sunken: var(--ink-900);
    --color-surface: var(--ink-900);
    --color-surface-raised: var(--ink-800);
    --color-text: var(--paper-200);
    --color-text-muted: var(--ink-200);
    --color-text-faint: var(--ink-400);
    --color-border: var(--ink-700);
    --color-border-strong: var(--ink-600);
    --color-link: var(--blue-300);
    --color-accent-text: var(--banana-300);
    --color-danger: #ff6961;
    --color-danger-bg: #3a0a0a;
    --color-button: var(--paper-100);
    --color-on-button: var(--ink-950);
    --color-button-hover: var(--paper-300);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px -8px rgba(0, 0, 0, 0.6);
    --grain-opacity: 0.08;
    color-scheme: dark;
  }
}

/* 形象頁（landing）整站鎖淺色：hero 是固定海報，其餘段落在深色系統上也維持和紙底 */
:root.theme-lock-light {
  --color-bg: var(--paper-100);
  --color-bg-sunken: var(--paper-200);
  --color-surface: var(--paper-50);
  --color-surface-raised: #ffffff;
  --color-text: var(--sumi-900);
  --color-text-muted: var(--sumi-500);
  --color-text-faint: var(--sumi-400);
  --color-border: var(--paper-300);
  --color-border-strong: var(--paper-400);
  --color-link: var(--blue-500);
  --color-accent-text: var(--banana-700);
  --color-danger: var(--shu-500);
  --color-danger-bg: var(--shu-100);
  --color-button: var(--sumi-900);
  --color-on-button: var(--paper-50);
  --color-button-hover: var(--sumi-700);
  --shadow-card: 0 1px 2px rgba(27, 26, 23, 0.06), 0 12px 32px -8px rgba(27, 26, 23, 0.12);
  --grain-opacity: 0.06;
  color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
    --dur-stage: 0ms;
  }
}

/* 自架明朝體：子集只含本站用到的字（見 scripts/build-fonts.sh），可變字重 400–700 */
@font-face {
  font-family: "Noto Serif TC";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("/fonts/noto-serif-tc.woff2") format("woff2");
}