/* ==========================================================================
   ルミナ デザイントークン
   色は3色（墨藍・生成り・真鍮）のみ。派生値はすべてこの3色の濃淡で作る。
   ========================================================================== */
:root {
  /* --- 色（基本3色） -------------------------------------------------- */
  --ink: #16212b;   /* 墨藍：文字・線の基準色 */
  --paper: #fbfaf7;   /* 生成り：地の色 */
  --paper-tint: #f2efe8;   /* 生成りを同色相のまま沈めた面。セクションの転調に使う */
  --brass: #8a5f1e;   /* 真鍮：唯一のアクセント（「ルミナ＝光」に由来） */

  /* --- 派生（同一色相の濃淡のみ。新しい色は足さない） ----------------- */
  --ink-deep: #0f1922;   /* 反転面の地 */
  --ink-72: rgba(22, 33, 43, 0.72);
  --ink-16: rgba(22, 33, 43, 0.16);
  --ink-06: rgba(22, 33, 43, 0.06);
  --paper-88: rgba(251, 250, 247, 0.88);
  --paper-72: rgba(251, 250, 247, 0.72);
  --paper-52: rgba(251, 250, 247, 0.52);
  --paper-16: rgba(251, 250, 247, 0.16);
  --paper-10: rgba(251, 250, 247, 0.10);
  --brass-light: #c69a4e;   /* 反転面でのアクセント（暗地でのコントラスト確保） */
  --rule: rgba(22, 33, 43, 0.22);   /* 罫線（遠目でも消えない濃度） */
  --rule-faint: rgba(22, 33, 43, 0.14);
  --rule-control: rgba(22, 33, 43, 0.55);   /* 操作部品の境界とリンクの下線。生成り地3.7:1／tint地3.6:1 */
  --rule-invert: var(--paper-16);
  --rule-control-invert: rgba(251, 250, 247, 0.42);   /* 反転面の操作部品の境界: 4.0:1 */

  /* --- 書体 ------------------------------------------------------------
     見出し＝明朝、本文＝ゴシック。日本語の紙面設計に倣った二層構成。
     Webフォントは読み込まない（表示速度と初回描画を優先）。 */
  --font-serif: "Hiragino Mincho ProN", "HiraMinProN-W3", "Yu Mincho", "YuMincho",
    "Noto Serif JP", "Songti SC", "SimSun", serif;
  --font-sans: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium",
    "YuGothic", "Yu Gothic", "Noto Sans JP", "Meiryo", system-ui, sans-serif;

  /* --- 文字サイズ（流体） ---------------------------------------------- */
  --fs-display: clamp(2.125rem, 1.30rem + 3.50vw, 4.25rem);   /* 34 → 68 */
  --fs-h2:      clamp(1.625rem, 1.24rem + 1.63vw, 2.625rem);   /* 26 → 42 */
  --fs-h3:      clamp(1.1875rem, 1.05rem + 0.59vw, 1.5rem);   /* 19 → 24 */
  --fs-h4:      clamp(1.0625rem, 1.00rem + 0.27vw, 1.25rem);   /* 17 → 20 */
  --fs-lead:    clamp(1.0rem, 0.94rem + 0.27vw, 1.1875rem);   /* 16 → 19 */
  --fs-body:    clamp(0.9375rem, 0.90rem + 0.16vw, 1.0625rem);   /* 15 → 17 */
  --fs-sm:      0.875rem;   /* 14 */
  --fs-xs:      0.8125rem;   /* 13 */
  --fs-label:   0.75rem;   /* 12 ラベル・連番 */

  /* --- 行送り・字送り --------------------------------------------------- */
  --lh-display: 1.34;
  --lh-heading: 1.44;
  --lh-body: 1.95;   /* 日本語本文はゆったり */
  --ls-display: 0.01em;
  --ls-label: 0.16em;   /* ラベルは大きめのトラッキング */

  /* --- 余白（8pxリズム） ------------------------------------------------ */
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --section-y: clamp(72px, 9vw, 152px);   /* セクション上下の余白 */
  --gutter: clamp(20px, 5vw, 56px);   /* 画面左右の余白 */

  /* --- 寸法 ------------------------------------------------------------- */
  --wrap: 1160px;   /* コンテンツ最大幅 */
  --measure: 34em;   /* 日本語本文の理想的な1行字数 */
  --header-h: 60px;
  --radius: 2px;   /* 角丸はほぼ使わない */

  /* --- 動き ------------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 0.4s;
}
@media (min-width: 768px) {
  :root { --header-h: 68px; }
}