/*
  業務アプリの受託開発 山田 健 ― デザイントークン
  施工計画書や図面の紙面のように、明るく、きちんと。
  色は紙・墨と、承認印の朱を1色だけ。朱は「見てほしい所」と「今いる場所」の印にだけ使う
*/
:root {
  --paper: #f5f5f1;
  --paper-2: #ecece6;
  --paper-3: #e2e3dc;
  --white: #ffffff;
  --ink: #1c1e20;
  --ink-soft: #2e3236;
  --ink-2: #44494f;
  --ink-3: #575c62;
  --ink-4: #62676c;
  --line: #d6d7d1;
  --line-2: #bfc1ba;
  --grid: rgba(28, 30, 32, 0.045);
  --grid-strong: rgba(28, 30, 32, 0.08);
  --shu: #b3341f;
  --shu-deep: #932815;
  --shu-wash: #f7e7e3;
  --vest: #d7f23b;
  /* 地の色（場面ごと）。現場にある色から。紺＝青焼きの図面、薄青＝青焼きの紙、朱＝承認印、黄緑＝安全ベスト */
  --tone-navy: #15304c;
  --tone-blue: #e3eaf1;
  --tone-shu: #b3341f;
  --tone-salon: #0e1a23;
  --blueprint: rgba(31, 78, 134, 0.1);

  --ja: 'BIZ UDPGothic', 'Yu Gothic Medium', 'Hiragino Sans', 'Meiryo', sans-serif;
  --num: 'Barlow Semi Condensed', 'BIZ UDPGothic', sans-serif;
  --serif: 'Zen Old Mincho', 'Yu Mincho', 'Hiragino Mincho ProN', serif;
  --hand: 'Klee One', 'BIZ UDPGothic', sans-serif;
  --mono: 'IBM Plex Mono', 'BIZ UDPGothic', monospace;

  /* 文字の大きさ（5段階） */
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-md: 16px;
  --fs-lg: clamp(20px, 1.8vw, 24px);
  --fs-xl: clamp(26px, 2.8vw, 40px);

  /* 余白（8の倍数） */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-6: 48px;
  --sp-8: 64px;
  --sp-12: 96px;
  --sp-16: 128px;
  --block: clamp(80px, 10vw, 136px);

  --pad: clamp(18px, 3.2vw, 48px);
  /* 地の色（motion.js が場面に合わせて書き換える）と、墨の場面の地 */
  --page-bg: #f5f5f1;
  --tone-ink: #1c1e20;
  /* 右や左を空けるときの幅 */
  --sheet-off: clamp(20px, 13vw, 240px);
  /* 中身の列から画面の端までの幅（画像を画面の端まで出すとき） */
  --bleed: max(var(--pad), calc((100vw - var(--max)) / 2));
  --max: 1240px;
  --header: 72px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
}