/* ═══════════════════════════════════════════════════════════════
   We space Coffee ── デザイントークン v2（方向性「一日を巡る空」／2026-10-05。v1「一つの面、大きな写真」から切り替え）
   v2 では面の役割（--bg / --surface / --dark）と --fw-heading 700・--fs-* の目標値は使っていない（見本 B の実測値は docs/DESIGN.md §4）。
   正は docs/DESIGN.md。ここは CSS 変数だけ。色は実物由来の 5 色＋白磁の影から増やさない。
   小さい文字用の派生色は「明度のみ」を動かしたもの（HSL の L）。コントラスト比は白磁 #F8F7F2 の上の値。
   ═══════════════════════════════════════════════════════════════ */
:root {
  /* ── 色: 基本（実物由来） ── */
  --c-hakuji:   #F8F7F2;   /* 白磁 ── 背景 */
  --c-kage:     #EDEBE3;   /* 白磁の影 ── 2 段目の面（交互のセクション・一覧の地） */
  --c-chutetsu: #211E1A;   /* 鋳鉄 ── 文字・主ボタン・唯一の暗い面 */
  --c-baisen:   #57351F;   /* 焙煎 ── hover・焙煎度の帯 */
  --c-kimame:   #767B6A;   /* 生豆 ── 24px 以上のラベルにだけ（白磁の上 4.1:1） */
  --c-kohaku:   #A97B3F;   /* 琥珀 ── 18px 以上の価格・下線にだけ（白磁の上 3.5:1） */

  /* ── 色: 小さい文字（11〜17px）用の派生。明度のみ下げた ── */
  --c-text:          var(--c-chutetsu);  /* 本文・見出し 15.5:1 */
  --c-text-2:        #46433D;            /* 補助文字 9.2:1（v2: 昼の空の上端でも 4.5:1 以上。v1 は #4E4943） */
  --c-kohaku-text:   #574021;            /* 琥珀の小さい文字 9.1:1 */
  --c-kimame-text:   #41443B;            /* 生豆の小さい文字 9.3:1 */
  --c-rule:          #D9D5CA;            /* 罫線（1px）。白磁の上 */
  --c-rule-sky:      rgba(33, 30, 26, 0.24);  /* 昼の空の上の罫線（空との比 1.58〜1.63。#D9D5CA は 1.01〜1.14 で消える） */
  --c-night:         #0A0E1A;            /* 夜空の代用色（JS が無い時・Claude Design の案）。空の実体は assets/sky.js */

  /* ── 色: 暗い面（鋳鉄の上） ── */
  --c-on-dark:       var(--c-hakuji);    /* 15.5:1 */
  --c-on-dark-2:     #BCBAB6;            /* 補助 8.6:1（白磁 72%） */
  --c-on-dark-rule:  rgba(248, 247, 242, 0.18);
  --c-kohaku-light:  #C9975B;            /* 鋳鉄の上の琥珀 6.4:1（線・24px 以上） */
  --c-kimame-light:  #838976;            /* 鋳鉄の上の生豆 4.6:1 */

  /* ── 役割 ── */
  --bg:        var(--c-hakuji);
  --surface:   var(--c-kage);
  --dark:      var(--c-chutetsu);
  --accent:    var(--c-kohaku);

  /* ── 書体（Google Fonts。使うウェイトは配信を確認済み） ── */
  --f-serif: "Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif;        /* 和文見出し 700 */
  --f-sans:  "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; /* 和文本文 400・強調 500 */
  --f-latin: "Libre Caslon Text", Georgia, serif;                                   /* 欧文: ワードマーク・商品名 400 */
  --f-mono:  "IBM Plex Mono", Consolas, monospace;                                  /* 数値だけ 400（和文ラベルには使わない） */

  /* ── 文字サイズ（1440 基準。390 は下の @media） ── */
  --fs-display: 56px;   /* ブランドの一文。DOM の都合で 1 行 14 字が入らない場所は 44px まで下げてよい */
  --fs-h2:      40px;   /* 章見出し（本文の 2.7 倍）。44px まで可 */
  --fs-h3:      22px;
  --fs-body:    15px;
  --fs-small:   13px;
  --fs-num:     13px;   /* 等幅の数値 */
  --lh-body:    1.9;
  --lh-heading: 1.4;
  --ls-heading: 0.02em;
  --fw-heading: 600;   /* v2: 見本 B の 600 */
  --fw-body:    400;

  /* ── 余白（8 基準） ── */
  --space-1:  8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-6: 48px;
  --space-8: 64px;
  --space-12: 96px;
  --space-16: 128px;
  --section-y: var(--space-16);   /* セクションの上下 */
  --block-gap: var(--space-6);    /* ブロック間 */
  --inline-gap: var(--space-2);   /* 行内 */
  --measure: 36em;                /* 本文の最大幅（約 36 字） */

  /* ── 形・動き ── */
  --radius: 0;
  --shadow: none;
  --motion-fast: 160ms;   /* hover・開閉だけ。スクロール出現には使わない */
  --motion-ease: cubic-bezier(.2, .6, .2, 1);
}

@media (max-width: 640px) {
  :root {
    --fs-display: 36px;   /* 本文 14.5px の 2.5 倍。22 字の信条は <wbr> 無しだと 24px が上限 */
    --fs-h2:      32px;
    --fs-h3:      20px;
    --fs-body:    14.5px;
    --fs-small:   12.5px;
    --section-y:  88px;
    --block-gap:  var(--space-4);
    --inline-gap: var(--space-1);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --motion-fast: 0ms; }
}