/* デザイントークン（色・書体・大きさ・余白・動き）
 * 案件ごとに書き換えるのはこのファイルだけ。値は DNA.md の実測値とシートのキーカラーから決める
 * 色はここだけに書く（base.css・案件のCSSは変数だけを使う）
 * エドワード：シートのキーカラー #fdfdfd（地）／#6A5ACD（紫：枠・線・スピード線・濃い面）／#DFFC38（ライム：稲妻・強調の面）
 *   地の色は責任者の選択（2026-10-29「白地が主」）。参考の黒の役割は、濃い紫の面と墨の文字に置き換えた
 */
:root {
  /* color */
  --color-ink: #17132b;          /* 本文・見出し（紫に寄せた墨） */
  --color-main: #6a5acd;         /* 紫：枠・線・英字ラベル・札 */
  --color-main-2: #5a4bbb;       /* 紫の小さな文字（白地で 5:1 以上） */
  --color-deep: #2a2163;         /* 濃い紫の面（参考の黒の面の役割） */
  --color-accent: #dffc38;       /* ライム：稲妻・強調の面 */
  --color-accent-2: #c9e81f;     /* ライムの影・ふち */
  --color-base: #fdfdfd;         /* 地 */
  --color-pale: #f1effb;         /* 淡い紫の面・PCの左右の地 */
  --color-line: #c9c3ea;         /* 入力欄・表の線 */
  --color-speed: rgb(106 90 205 / 0.55);   /* スピード線 */
  --color-giant: rgb(106 90 205 / 0.38);   /* 背景の巨大な英字 */
  --color-speed-dark: rgb(223 252 56 / 0.4);   /* 濃い面のスピード線（ライム） */
  --color-giant-dark: rgb(253 253 253 / 0.16);  /* 濃い面の巨大な英字 */
  --color-on-dark: #fdfdfd;      /* 濃い面の文字 */
  --color-on-dark-line: rgb(253 253 253 / 0.72);
  --color-error: #c8312b;        /* フォームの必須表示 */
  --color-shadow: rgb(23 19 43 / 0.18);

  /* 面 */
  --bg-dark: var(--color-deep);
  --bg-accent: var(--color-main);

  /* type */
  --font-body: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", system-ui, sans-serif;
  --font-head: "Dela Gothic One", "Zen Kaku Gothic New", sans-serif;
  --font-en: "Orbitron", "Zen Kaku Gothic New", sans-serif;
  --fs-min: 13px;
  --fs-base: clamp(var(--fs-min), min(2.2dvh, 3.75vw), 15px);
  --fs-ui: max(var(--fs-min), 13px);
  --fs-input: 16px;
  --fs-head: 1.85em;             /* 見出し（全ページ共通） */
  --fs-hero-head: 2.6em;         /* p1 の大見出し（意図した特大の一言） */
  --fw-body: 500;
  --ls-body: 0.04em;
  --lh-body: 1.8;
  --lh-head: 1.22;
  --ls-head: 0.02em;

  /* layout */
  --col: 480px;
  --header-h: 56px;
  --gutter: 22px;
  --sp-1: 0.5em;
  --sp-p: 0.7em;
  --sp-g: 1.15em;
  --pad-y: 1.2em;
  --next-h: 0px;
  --radius-pill: 999px;
  --radius-s: 0px;               /* 参考：枠・ボタンは角丸なし */
  --frame-w: 1.5px;              /* 細い荒れた線の枠 */
  --shadow-soft: 4px 4px 0 0 var(--color-ink);   /* 参考：ずらした影 */
  --shadow-column: 0 0 24px 0 var(--color-shadow);
  --fig-h: 120px;                /* p3 の作図の高さ */
  --tool-w: 116px;                /* 手描きの道具の幅 */
  --stairs-w: 104px;              /* p6 の階段の図 */
  --meter-w: 96px;               /* p7 のメーター */
  --works-gap: 0.75em;           /* p4 の工事の項目の行の間（2026-10-30 先方「ゆったり」） */
  --works-space: var(--sp-p);    /* p4 の工事の項目と前後の文の間（.txt の間隔に足す） */

  /* motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --rise: 28px;
  --dur-in: 480ms;
  --dur-hover: 250ms;
  --bolt-dur: 520ms;             /* 稲妻が走る長さ */
}
@media (min-height: 760px) { :root { --works-space: var(--sp-g); } }   /* 縦に余裕のある画面（PC・大きいスマホ）は p4 の項目の前後をさらに空ける（先方の参考画像） */
@media (max-height: 600px) { :root { --pad-y: 0.7em; --fig-h: 88px; --tool-w: 88px; --stairs-w: 72px; --meter-w: 80px; --works-gap: 0.45em; --works-space: 0.2em; } }