/* Tonsan design tokens — _design/README.md「Design Tokens」の値をそのまま。ここ以外に色・フォントの生の値を書かない */
:root {
  /* colors */
  --ts-bg: #F2F0E9;
  --ts-white: #FFFFFF;
  --ts-ink: #222222;
  --ts-ink-2: #454545;
  --ts-ink-3: #333333;   /* 記事本文 p の色（デザイン HTML の記事詳細・担当 single の実測） */
  --ts-muted: #6C6C6C;   /* 決裁 N-1（2026-09-19）: デザインの #6F6F6F は地色 #F2F0E9 上で 4.41:1 のため 4.60:1 の #6C6C6C に */
  --ts-micro: #8A867A;
  --ts-green: #3E9648;
  --ts-green-deep: #40854A;
  --ts-green-pale: #CFE3D2;
  --ts-green-text: #2B6B33;
  --ts-green-text-2: #1F5C27;
  --ts-yellow: #FFD70D;
  --ts-yellow-pale: #FFE585;
  --ts-yellow-paler: #FFF0B8;
  --ts-yellow-palest: #FFFBE8;
  --ts-on-yellow: #4A3F00;
  --ts-on-yellow-2: #8A7A00;
  --ts-on-yellow-3: #6B5C00;
  --ts-red: #D0402B;
  --ts-red-pale: #F6D9D4;
  --ts-red-text: #8F2A1B;
  --ts-bluegray: #8FBBC3;
  --ts-line: #E0DDD3;
  --ts-line-pale: #EDEAE0;
  --ts-line-dash: #C9C4B4;
  --ts-line-dash-2: #D8D4C8;
  --ts-footer-stripe: repeating-linear-gradient(45deg, #3a3f3b 0 14px, #41473f 14px 28px);
  --ts-footer-stripe-pc: repeating-linear-gradient(45deg, #3a3f3b 0 18px, #41473f 18px 36px);
  --ts-footer-text: #CFD4CD;
  --ts-footer-micro: #9AA199;
  --ts-promo: #424242;
  --ts-yt: #C00000;
  --ts-yt-bright: #FF0000;
  --ts-line-green: #06C755;
  --ts-tap: #EDEAE0;
  --ts-memo-bg: #FFFDF2;
  --ts-memo-rule: #DFE7EC;
  --ts-memo-border: #E6E0C8;
  --ts-memo-red: #E8B4AE;

  /* typography */
  --ts-font-num: 'Fraunces', serif;
  /* 本文は端末に入っているフォント（読み込み 0 本）。Web フォントは見出し・ロゴだけ（運営者判断 2026-09-20 A）。
     Zen Kaku Gothic New を本文にも当てると、分割ファイル 80 本・467KB を読み、記事ページの処理が 2.6 秒ぶん重くなっていた（交互 4 組で実測） */
  --ts-font-ja: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic Medium', 'Yu Gothic', Meiryo, 'Noto Sans JP', sans-serif;
  --ts-font-ja-display: 'Zen Kaku Gothic New', var(--ts-font-ja);
  --ts-font-mono: ui-monospace, Menlo, monospace;
  --ts-marker: linear-gradient(transparent 66%, #FFD70D 66%, #FFD70D 92%, transparent 92%);

  /* spacing / radius / shadow */
  --ts-gutter: 14px;            /* mobile 左右 */
  --ts-gutter-pc: 48px;         /* PC 左右 */
  --ts-content-max: 1200px;     /* PC コンテンツ幅（1160〜1240） */
  --ts-mobile-max: 430px;
  --ts-tabbar-h: 78px;          /* 固定タブバー分の padding-bottom */
  --ts-radius-pill: 9999px;
  --ts-radius-card: 20px;
  --ts-radius-sm: 12px;
  --ts-radius-photo: 5px;
  --ts-shadow-card: 0 8px 20px rgba(0,0,0,0.06);
  --ts-shadow-card-pc: 0 10px 24px rgba(0,0,0,0.06);   /* PC のポラロイド（担当 archive・search404 の実測） */
  --ts-tape-4: #F0C9B8;                                  /* マスキングテープ 4 色目（担当 archive の実測） */
  --ts-shadow-float: 0 6px 16px rgba(0,0,0,0.25);
  --ts-shadow-header: 0 2px 12px rgba(0,0,0,0.06);
  --ts-shadow-tabbar: 0 -4px 16px rgba(0,0,0,0.08);
  --ts-ease: cubic-bezier(.4,0,.2,1);
  --ts-ease-out: cubic-bezier(.22,1,.36,1);
}