/* ==================================================================
   common.css
   サイト全体で共有するデザイントークン（色・フォント）とベースリセット。
   ここを変えると index.html / calculators.html 両方の配色が変わります。
   ページ固有のレイアウトは index.css / calculators.css 側に書いてください。
   ================================================================== */

:root {
  /* ベースカラー */
  --ink: #10151c;
  --paper: #f2f3ef;
  --card: #ffffff;
  --line: #dadfe3;
  --line-soft: #e7eaec;

  /* ブランドアクセント：ネイビー×ゴールドの2色構成 */
  --blue: #191970;
  --blue-deep: #000080;
  --blue-line: #7fa3d1;
  --copper: #b8922f;

  /* 本文色 */
  --text: #1b2430;
  --text-muted: #5c6570;

  /* 状態色 */
  --danger: #a83232;

  /* フォント */
  --font-display: 'Space Grotesk', 'Noto Sans JP', sans-serif;
  --font-body: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

* {
  box-sizing: border-box;
}

body {
  font-family: var(--font-body);
  margin: 0;
  padding: 0;
  color: var(--text);
  background-color: var(--paper);
  line-height: 1.75;
  scroll-behavior: smooth;
}

a {
  color: inherit;
}