/* ハピックス — ロゴ（墨のカリグラフィ + 水彩の円相）から実測した設計トークン
   水彩は色相222°・明度0.26〜0.98の全レンジ。淡い側ほど彩度を上げて生気を持たせる。 */
:root{
  /* 藍（ai）— ロゴの水彩そのもの */
  --ai-900:#393f4c;  --ai-800:#4e566a;  --ai-700:#616d89;  --ai-600:#7986a4;
  --ai-500:#96a1bb;  --ai-400:#b4bccf;  --ai-300:#d0d5e1;  --ai-200:#e3e6ed;
  --ai-100:#eff1f5;  --ai-050:#f7f8fb;

  /* 紙と墨 */
  --paper:   #fdfdfe;
  --paper-2: var(--ai-050);
  --paper-3: var(--ai-100);
  --sumi:    #14181f;
  --sumi-2:  var(--ai-800);
  --sumi-3:  var(--ai-600);
  --line:    var(--ai-200);
  --line-2:  var(--ai-300);

  /* 朱（しゅ）— 朱印の赤。墨と藍に並べても濁らず、確実に目を引く。
     注意を促す1箇所にだけ使う。多用すると効かなくなる。 */
  --shu-900:#6e1b16;  --shu-700:#9c2a1f;  --shu-600:#b83425;
  --shu-500:#c8402f;  --shu-200:#f0ccc6;  --shu-100:#fbeeec;  --shu-050:#fdf6f4;

  --accent:    var(--ai-800);
  --accent-2:  var(--ai-600);
  --on-accent: #ffffff;
  --focus:     var(--ai-700);

  /* 書体 */
  --font-display:"Shippori Mincho","Zen Old Mincho",serif;
  --font-body:"Zen Kaku Gothic New",system-ui,sans-serif;
  --font-en:"Cormorant Garamond",Georgia,serif;
  --font-en-ui:"Outfit",system-ui,sans-serif;

  /* 階層 */
  --t-hero:clamp(2.2rem,5.6vw,5rem);
  --t-h2:clamp(1.5rem,2.9vw,2.5rem);
  --t-h3:clamp(1rem,1.35vw,1.2rem);
  --t-body:clamp(.94rem,1.02vw,1.02rem);
  --t-sm:.84rem; --t-xs:.72rem;

  /* 余白 — 和の間 */
  --s-xs:.5rem; --s-sm:1rem; --s-md:2rem;
  --s-lg:5rem;  --s-xl:9rem; --s-2xl:14rem;

  /* 動き — ゆっくり、静かに */
  --e-out:cubic-bezier(.19,1,.22,1);
  --e-in:cubic-bezier(.7,0,.84,0);
  --d-1:200ms; --d-2:420ms; --d-3:900ms; --d-4:1500ms;

  --r-sm:2px; --r-pill:999px;
  --shadow:0 1px 2px rgba(57,63,76,.04), 0 12px 48px rgba(57,63,76,.09);
}