/* ============================================================
   dtm-affiliate — Design Tokens
   確定日: 2026-08-24
   方向: 工業グレー × ティール（Cベース構造 / D型特集）
   ここを変えればサイト全体の配色が動く。個別CSSに色を直書きしない。
   ============================================================ */

:root {
  /* --- 地の色（ウォームグレー。緑にわずかに寄せた無彩色） --- */
  --ground:        #E9EAE8;  /* ページ地 */
  --ground-sunk:   #DFE1DD;  /* ヒーロー・写真ウェル・表ヘッダー */
  --panel:         #F4F5F3;  /* カード・本文ボックス */
  --panel-edge:    #C9CBC7;  /* 通常の罫線 */
  --panel-edge-hi: #B9BCB7;  /* カード外周 */
  --rule-strong:   #9A9D98;  /* 表ヘッダー下の強い罫線 */

  /* --- 黒い面（文字とデータ専用。商品画像は絶対に載せない） --- */
  --ink:           #232523;  /* 本文・見出し */
  --ink-deep:      #161917;  /* ヒーロー下バー・特集面 */
  --ink-mid:       #55584F;  /* 補助テキスト */
  --ink-soft:      #6E736F;  /* キャプション */
  --ink-faint:     #8B8F8A;  /* 注記・PR表記 */
  --on-dark:       #F4F5F3;  /* 黒面上の文字 */
  --on-dark-soft:  #A9AEA9;  /* 黒面上の補助 */
  --on-dark-faint: #7C827D;  /* 黒面上のラベル */
  --dark-rule:     #2C312D;  /* 黒面内の仕切り */

  /* --- ティール（主色。使うのは最安バッジ・リンク・ランキング1位・
         グラフ線・ラベルの4〜5箇所のみ。増やさない） --- */
  --teal:          #0F766E;
  --teal-deep:     #0C5A54;  /* hover */
  --teal-tint:     #E2EFEC;  /* 最安行の背景 */
  --teal-on-dark:  #5FD0B4;  /* 黒面上のティール */

  /* --- 価格（EC慣習として赤系を維持。純赤ではなく赤茶で工業グレーに馴染ませる） --- */
  --price:         #C2402A;
  --price-on-dark: #F09A86;

  /* --- 特集（D型記事） --- */
  /* 2026-08-25 ユーザー指摘「Dだけ色が違うのが気になる」により専用朱色を廃止。
     特集も全画面共通トークンを使い、差別化は明朝見出し(--font-serif)のみ。
     特集ラベル等のアクセントは --price（赤茶）を流用する */
  --feature:       var(--price);

  /* --- タイポグラフィ --- */
  --font-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;   /* 型番・JAN・価格・数値 */
  --font-serif: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif; /* 特集見出しのみ */

  /* --- 数値表示の基本（型番・価格・スペックは必ずこれ） --- */
  /* font-family: var(--font-mono); font-variant-numeric: tabular-nums; */
}

/* ============================================================
   絶対に守る原則
   ------------------------------------------------------------
   1. 白背景の商品画像は明るい面（--panel / --ground-sunk）にのみ置く。
      黒い面（--ink-deep）は文字とデータ専用。
      → 画像には mix-blend-mode: multiply を付け、切り抜きの白フチを消す。

   2. ティールは4〜5箇所まで。増やすと工業グレーの緊張感が緩む。

   3. 楽天のアフィリエイトリンクHTMLは一切改変しない
      （リンク先URL・タグ属性・画像サイズの変更が規約で禁止）。
      商品画像はAPIの imageUrl を使い、リンクHTMLとは別扱いにする。

   4. 絵文字・dingbatをアイコンに使わない。インラインSVGのみ。

   5. モダン＝余白ではない。日本の高密度を基準にする。
      本文13px前後、セル余白は詰める、罫線で構造を見せる。
   ============================================================ */