/* works-tokens.css
   apricot post-detail.css（works-detail.css）が参照する apricot 独自トークンを、
   tone-branding のデザイントークンへ橋渡しする。
   → 構造・情報設計は apricot 準拠のまま、色・フォント・余白は tone-branding に揃う。
   works-detail.css より必ず先に読み込む（functions.php で依存指定済み）。 */
:root {
  /* 色 */
  --c-black:   var(--ink);       /* #141414 主役の黒 */
  --c-text:    var(--ink);       /* 本文 */
  --c-sub:     var(--ink-3);     /* キャプション・補助 */
  --c-line:    var(--line);      /* 細罫 */
  --c-bg:      var(--paper);     /* 地色（紙白） */
  --c-bg-soft: var(--paper-2);   /* 薄いセクション地 */
  --c-accent:  var(--accent);    /* 木のブラウン */

  /* フォント（tone-branding：源ノ角＋Outfit＋Playfair） */
  --font-en:       var(--en);    /* ラベル・英字＝Outfit */
  --font-jp:       var(--sans);  /* 本文＝源ノ角 */
  --font-serif-jp: var(--serif); /* 見出し＝源ノ角（サイト全体と統一） */

  /* レイアウト */
  --pad-x:    var(--gut);        /* 左右マージン */
  --container: var(--maxw);      /* 最大幅 */
  --ws-narrow: 980px;            /* 記事内の読み幅 */
}

/* works 詳細/一覧の地色・本文フォントを tone-branding に固定（apricot bodyクラス非依存で効かせる） */
.work-single,
.works-archive {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
}