/* ===========================================================
   GRAIN グレイン — design tokens

   基調は暗い。ただし「白髪の色を見せる」のが商品なので、
   証明セクション（施術直後／2ヶ月後）だけは白い面で抜く。
   その落差で、髪1本ごとの筋＝GRAIN を見せる。
   =========================================================== */

:root {
  /* --- surface: 炭を4段に割る。単調な黒を避ける --- */
  --ink:        #0b0a09;
  --ink-1:      #100e0c;
  --ink-2:      #171411;
  --ink-3:      #201c18;
  --ink-veil:   rgba(11, 10, 9, 0.72);

  /* --- 明るい面。白髪の色を出すセクション専用 --- */
  --lite:       #f4f1ec;
  --lite-2:     #e7e2d9;
  --lite-ink:   #1b1815;   /* 明るい面の文字 */
  --lite-ink-2: #5d564e;
  --lite-line:  rgba(27, 24, 21, 0.14);

  /* --- 真鍮。彩度を抑えないと安いゴールドになる --- */
  --brass:      #a8834e;
  --brass-lit:  #dcc196;
  --brass-dim:  #6b5433;
  --brass-glow: rgba(216, 185, 133, 0.18);

  /* --- 文字。純白は使わない。読み手は35〜58歳なので明度を上げる --- */
  --paper:      #f2ede4;   /* 見出し。#0b0a09 に対して 15:1 */
  --paper-2:    #cdc6ba;   /* 本文。同 10.5:1 */
  --paper-dim:  #948c81;   /* 補助。同 5.6:1 */

  --line:       rgba(226, 214, 196, 0.15);
  --line-soft:  rgba(226, 214, 196, 0.07);

  /* --- typography --- */
  --font-mincho: "Zen Old Mincho", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
  --font-gothic: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;
  --font-latin:  "Cormorant Garamond", "Times New Roman", serif;

  /* 級数差は付けるが、最大値は抑える。和文は大きくすると途端に安くなる */
  --t-hero:    clamp(2.1rem, 1.1rem + 3.4vw, 4.2rem);
  --t-display: clamp(1.7rem, 1rem + 2.4vw, 3.2rem);
  --t-lead:    clamp(1.1rem, 1rem + 0.65vw, 1.5rem);
  /* 読み手は35〜58歳。本文は 16.5px を下限にする */
  --t-body:    clamp(1.03rem, 0.98rem + 0.24vw, 1.15rem);
  --t-label:   clamp(0.7rem, 0.66rem + 0.16vw, 0.8rem);

  --lh-tight:  1.06;
  --lh-body:   2.15;   /* 和文は行間を広く取らないと安く見える */
  --ls-label:  0.42em;
  --ls-mincho: 0.14em;

  /* --- rhythm。均等パディングを避けるため2系統持つ --- */
  --gutter:      clamp(1.25rem, 0.6rem + 3vw, 5rem);
  --section:     clamp(6rem, 3rem + 12vw, 16rem);
  --section-sm:  clamp(3.5rem, 2rem + 6vw, 8rem);
  --measure:     34em;

  /* --- motion --- */
  --dur-fast:   240ms;
  --dur:        620ms;
  --dur-slow:   1400ms;
  --ease:       cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.65, 0.02, 0.24, 1);

  --z-grain:  9000;
  --z-nav:    8000;
  --z-veil:   9500;
}

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