/* =========================================================
   .MITAS. v2「満ちる光」— デザイントークン
   色・書体・寸法はここだけで定義する。他のCSSに色リテラルを書かない。
   基本幅は 768 / 1024 / 1440。スマホの幅・高さ・横向き条件は docs/research/2026-10-24-sp-breakpoints.md を参照。
   ========================================================= */
:root {
  /* 紙と面。白↔オフホワイトの交互はやめ、全体を一枚の紙として扱う */
  --mt-paper: #fbf9f4;
  --mt-warm: #f4ecdd;        /* ページが進むほど背面から満ちてくる温色 */
  --mt-white: #ffffff;       /* ギャラリーの帯だけ純白 */
  --mt-foot: #f1e8d8;
  --mt-hover: #f6efe2;
  /* PC hero：文字の直後だけを明るくし、映像全体には重ねない。 */
  --mt-hero-text-ground: rgba(251, 249, 244, 0.94);
  --mt-hero-caption-ground: rgba(251, 249, 244, 0.9);

  /* インク。黒は使わない */
  --mt-ink: #2b2a28;
  --mt-ink-sub: #5a564f;

  /* 金は用途で3つに分ける。混ぜると必ずコントラストを割る
     gold      … 罫・アイコン・描線などの装飾専用（文字に使わない。白地 3.15:1）
     gold-deep … CTAの面（白文字 5.03:1）
     gold-text … 金色の文字（温色の紙 #f4ecdd の上でも 5.3:1）
     gold-num  … 大きな数字だけ */
  --mt-gold: #b08d4a;
  --mt-gold-deep: #8a6a26;
  --mt-gold-deeper: #6f5419; /* CTAホバーの塗り */
  --mt-gold-text: #7a5c1e;
  --mt-gold-num: #a5823c;    /* 24px以上の大きな数字専用（紙 3.40:1／温色の紙 3.07:1。大きな文字の基準 3:1 を満たす） */
  --mt-band: #efe4cf;        /* お得の帯（D16・D17）。金の文字 4.94:1・副文字 5.79:1・インク 11.4:1 */
  --mt-rule: rgba(176, 141, 74, 0.28);
  --mt-rule-strong: rgba(176, 141, 74, 0.55);

  /* 書体 */
  --mt-font-mincho: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;
  --mt-font-gothic: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;
  --mt-font-num: "Cormorant Garamond", "Times New Roman", serif;
  --mt-font-label: "Jost", "Helvetica Neue", Arial, sans-serif;

  /* 文字サイズ。縦書きは画面の高さにも追従させる */
  --fs-tate-xl: clamp(2.5rem, min(7.2svh, 5.6vw), 5.5rem);
  --fs-tate-l: clamp(1.75rem, min(4.2svh, 3vw), 3rem);
  --fs-tate-m: clamp(1.375rem, min(3.4svh, 2.2vw), 2.125rem);
  --fs-key: clamp(3rem, 7vw, 6.5rem);
  --fs-h2-yoko: clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem);
  --fs-num: clamp(3.5rem, 8vw, 7.5rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-label: 0.8125rem;

  /* 寸法 */
  --gutter: clamp(20px, 5vw, 72px);
  --wrap: 1320px;
  --section-y: clamp(88px, 11vw, 160px);
  --header-h: 60px;

  /* 動きは2速だけ。出現＝expo.out 相当／UI＝ハウス標準 */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-ui: cubic-bezier(0.25, 1, 0.5, 1);
  --dur-ui: 0.3s;

  /* ページ進捗（0→1）。js/motion/fill.js が更新する。金のラインと紙の温まりが読む */
  --mt-p: 0;
}

@media (min-width: 1024px) {
  :root { --header-h: 76px; }
}