/* ============================================================
   モデルルーム参考 — Color tokens
   コンセプト: 自然光のモデルルームの静けさ。
   比率の目安 — 漆喰ベージュ60% / 自然光ホワイト15% / 明るい木15%
                / 布グレー5% / 黒金属3〜5% / 植物グリーン1〜2%
   禁止: 高彩度の赤・強いオレンジ・青紫グラデ・純黒の大面積・真っ白の大面積。
   ============================================================ */

:root {
  /* --- 観察元の素材色（canonical） --- */
  --wall-base:    #F1EDE3; /* 主要背景・漆喰壁 (60%) */
  --wall-light:   #FAF8F2; /* 光が当たる白い面 (15%) */
  --wall-shadow:  #D8D1C3; /* 壁の影・面分け */
  --oak:          #C7A77B; /* 木材・棚・床 (15%) */
  --oak-pale:     #E0C9A3; /* 明るい木面 */
  --linen:        #C9C2B6; /* 布・注記背景 (5%) */
  --fabric-gray:  #8F918A; /* グレー布 */
  --metal-black:  #20211E; /* 黒手すり・黒照明・CTA (3〜5%) */
  --stainless:    #A7A49B; /* ステンレス・補助線 */
  --plant:        #6F7A62; /* 植物の小アクセント (1〜2%) */

  /* tonal steps (hover / hairline) */
  --metal-black-soft: #34352F; /* hover時のわずかな濃さ */
  --oak-soft:         #D2B68F;
  --line-soft:        #DCD5C8; /* 漆喰面でも見える淡い罫線 */

  /* --- Semantic aliases --- */
  /* surfaces — セクション背景は原則1色 */
  --surface-page:   var(--wall-light);  /* 既定ページ面 */
  --surface-raised: var(--wall-base);   /* 漆喰壁・余白面 */
  --surface-muted:  var(--wall-shadow); /* 面分け・区切り面 */
  --surface-linen:  var(--linen);       /* 注記・柔らかい背景 */
  --surface-ink:    var(--metal-black); /* CTA / フッター */

  /* text */
  --text-strong:   var(--metal-black);  /* 見出し・本文主役 */
  --text-body:     #2E2E29;             /* 本文 */
  --text-muted:    var(--fabric-gray);  /* 補助・キャプション */
  --text-on-ink:   var(--wall-light);
  --text-accent:   #A9824F;             /* 数字・小強調(oakの可読トーン) */

  /* lines & borders — metal-black か stainless の1px */
  --border-hairline: var(--line-soft);  /* 淡い区切り */
  --border-rule:     var(--stainless);  /* 比較表・フォーム境界 */
  --border-metal:    var(--metal-black);/* 1px 黒金属罫線・CTA・見出し罫線 */

  /* accents — 大面積に使わない */
  --accent-oak:   var(--oak);
  --accent-plant: var(--plant);

  /* interactive */
  --cta-bg:           var(--metal-black);
  --cta-bg-hover:     var(--metal-black-soft);
  --cta-fg:           var(--wall-light);
  --cta-ghost-border: var(--metal-black);
  --cta-ghost-bg:     transparent;       /* 副CTAは透明背景に1px線 */

  /* ---- 後方互換エイリアス（既存コンポーネント用） ---- */
  --color-wall-beige:   var(--wall-base);
  --color-light-white:  var(--wall-light);
  --color-linen-greige: var(--wall-shadow);
  --color-wood:         var(--oak);
  --color-taupe:        var(--fabric-gray);
  --color-ink:          var(--metal-black);
  --color-sage:         var(--plant);
  --color-ink-soft:     var(--metal-black-soft);
  --color-line:         var(--line-soft);
  --color-line-strong:  var(--stainless);
}