/* /gate/tokens.css — 全站設計 tokens 單一真相源。
   值收斂自 archive parchment 主題與 search 前端(既有驗證過的羊皮紙色系),不發明新色。
   規範見 docs/design-language.md。
   ⚠ 改本檔必須同步 bump 所有載入點的 ?v=(nginx.conf sub_filter 與 gate 三頁 <link>;
   Cloudflare 會把 css 快取 4 小時,不換版號改動不生效)。 */
:root {
  --ys-bg: #efe7d6;          /* 頁面底 */
  --ys-surface: #fbf7ec;     /* 卡片/面板 */
  --ys-surface2: #f0e9d8;    /* 內凹/hover 面 */
  --ys-border: #ddd0b6;
  --ys-text: #2e281d;
  --ys-muted: #6b5f47;       /* 次要文字 */
  --ys-faint: #9a8e74;       /* 弱化文字/footer */
  --ys-accent: #8a6d3b;      /* 唯一品牌棕 */
  --ys-accent-dark: #74592d; /* hover/active */
  --ys-hero-grad: linear-gradient(135deg, #3b342a 0%, #4a3f2d 55%, #2a251d 100%);
  --ys-hero-text: #f1e7d2;
  --ys-font: -apple-system, 'PingFang TC', 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
  --ys-radius: 14px;
  --ys-radius-sm: 9px;
  --ys-shadow: 0 2px 10px rgba(80, 60, 30, .08);
  --ys-shadow-hover: 0 12px 30px rgba(80, 60, 30, .2);
}

/* 深色主題(沉浸式媒體頁專用;值 = retrospective 現值 = archive scroll 主題) */
[data-ys-theme="dark"] {
  --ys-bg: #0b0b0c;
  --ys-surface: #16161a;
  --ys-surface2: #1f1f25;
  --ys-border: #2a2a2e;
  --ys-text: #e8e6e1;
  --ys-muted: #8b857a;
  --ys-faint: #6e6a64;
  --ys-accent: #c9b988;
  --ys-accent-dark: #e8c97a;
  --ys-hero-grad: linear-gradient(180deg, #1a1f2e 0%, #0b0b0c 100%);
  --ys-hero-text: #e8e6e1;
  --ys-shadow: 0 2px 14px rgba(0, 0, 0, .5);
  --ys-shadow-hover: 0 10px 30px rgba(0, 0, 0, .6);
}

/* ── Opt-in 共用元件:未掛 class 的頁面完全不受影響 ── */
.ys-btn {
  display: inline-block; background: var(--ys-accent); color: #fff; border: 0;
  border-radius: var(--ys-radius-sm); padding: 10px 20px; font: inherit;
  letter-spacing: 1px; cursor: pointer; text-decoration: none;
  transition: background .15s, opacity .15s;
}
.ys-btn:hover { background: var(--ys-accent-dark); }
.ys-btn:disabled { opacity: .5; cursor: default; }
.ys-btn-sec {
  display: inline-block; background: var(--ys-surface); color: var(--ys-muted);
  border: 1px solid var(--ys-border); border-radius: var(--ys-radius-sm);
  padding: 10px 20px; font: inherit; cursor: pointer; text-decoration: none;
}
.ys-btn-sec:hover { background: var(--ys-surface2); }
.ys-card {
  background: var(--ys-surface); border: 1px solid var(--ys-border);
  border-radius: var(--ys-radius); box-shadow: var(--ys-shadow);
}
.ys-back { display: inline-block; font-size: 13px; color: var(--ys-accent); text-decoration: none; }
.ys-back:hover { text-decoration: underline; }