/* ============================================================
   tokens.css — ★このサイトの見た目の本体（採用デザイン）

   sumaisetsubi.com 採用案:「鉄紺 × 安全オレンジ」
   ── 現場・工具・設備マニュアルの語彙から引いた実用路線。
      低彩度の鉄紺をベースに、CTA/最重要の強調だけ安全色オレンジで立てる。
      角丸は小さく罫線をきかせ、堅実で信頼できる手触りにする。

   規律（CLAUDE.md / site_template_design_spec.md より）:
   - 色・サイズ・余白は必ずこのトークン経由。マジックナンバー禁止。
   - --color-accent は CTA と最重要の強調のみ。本文リンク・装飾に使わない。
   - 本文は18px下限（中高年・高齢層が中心のため。交渉不可）。
   - 5サイトを同じ配色・フォントにしない。
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap');

:root {
  /* --- 色 --------------------------------------------------- */
  --color-bg: #ffffff;
  --color-surface: #eaeef1;      /* わずかに冷たいグレー */
  --color-text: #14212b;         /* 鉄紺寄りの黒。白背景に約14:1 */
  --color-text-muted: #4f6069;
  --color-brand: #1e3d52;        /* 鉄紺。サイトの性格を決める主色 */
  --color-accent: #c24700;       /* 安全色オレンジ。CTA/最重要強調のみ */
  --color-accent-hover: #9c3900;
  --color-border: #c6d0d6;
  --color-warning: #b3300c;      /* 危険作業の警告 */
  --color-warning-bg: #fbf1ed;

  /* --- タイポグラフィ（Noto Sans JP。日本語グリフを明示的に読み込む） --- */
  --font-display: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-body: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-ui: "Noto Sans JP", system-ui, -apple-system, sans-serif;

  --text-xs: 0.875rem;   /* 14px 注記。これ未満を使わない */
  --text-sm: 0.9375rem;  /* 15px 補助 */
  --text-base: 1.125rem; /* 18px 本文。中高年・高齢層が中心のため下限を上げる */
  --text-lg: 1.3125rem;
  --text-xl: 1.5rem;
  --text-2xl: 1.875rem;
  --text-3xl: 2.25rem;
  --text-4xl: 2.75rem;

  --leading-tight: 1.35;
  --leading-body: 1.9;   /* 日本語は欧文より広めが読みやすい */
  --tracking-tight: -0.01em;
  --tracking-wide: 0.1em;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-bold: 700;

  /* --- 余白（基準値の倍数で構成） -------------------------- */
  --space-1: 0.25rem;  --space-2: 0.5rem;  --space-3: 0.75rem;
  --space-4: 1rem;     --space-6: 1.5rem;  --space-8: 2rem;
  --space-12: 3rem;    --space-16: 4rem;   --space-24: 6rem;

  /* --- 形状（角丸小・罫線しっかり＝設備マニュアルの手触り） - */
  --radius: 3px;
  --radius-lg: 5px;
  --border-width: 1px;
  --shadow: none;

  /* --- レイアウト ------------------------------------------- */
  --measure: 42rem;      /* 本文の最大行長（全角40〜45文字相当） */
  --container: 68rem;
  --header-height: 3.75rem;

  /* --- モーション ------------------------------------------- */
  --transition: 160ms ease;
}

/* タップ領域の下限。特に電話CTA。48px は交渉不可 */
:root { --tap-min: 48px; }

@media (prefers-reduced-motion: reduce) { :root { --transition: 0ms; } }