/* 色を管理しやすくするために、変数として定義します */
:root {
  --bg-color: #ffffff; /* 背景色 (白) */
  --text-color: #222222; /* 文字色 (黒) */
  --link-color: #007bff; /* リンク色 (青) */
  --header-bg: #f8f9fa; /* ヘッダー背景色 */
  --border-color: #dddddd; /* 境界線の色 */

  /* ★★★ フォーム用の色変数を追加 ★★★ */
  --input-bg: #ffffff;
  --button-bg: #007bff;
  --button-text: #ffffff;
}

/* ダークモード時の配色 */
html.dark body {
  --bg-color: #1a1a1a;
  --text-color: #e0e0e0;
  --link-color: #64b5f6;
  --header-bg: #2a2a2a;
  --border-color: #444444;

  /* ★★★ ダークモード時のフォーム用の色変数を追加 ★★★ */
  --input-bg: #2b2b2b;
  --button-bg: #64b5f6;
  --button-text: #1a1a1a;
}

/* サイト全体に基本スタイルを適用 */
body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s; /* 色の切り替えを滑らかにする */
  font-family: sans-serif;
  margin: 0;
  padding: 2em;
}

a {
  color: var(--link-color);
}

hr {
    border: none;
    border-top: 1px solid var(--border-color);
}


/* ダークモード時に、太陽アイコンを表示し、月アイコンを隠す */
#theme-toggle-light-icon {
    display: none;
}
html.dark #theme-toggle-dark-icon {
    display: none;
}
html.dark #theme-toggle-light-icon {
    display: block;
}


/* ★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★ フォーム要素用のスタイルをここに追加 ★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★ */
input[type="text"],
input[type="password"],
textarea {
    width: 100%;
    max-width: 500px; /* 横幅が広がりすぎないように */
    padding: 10px;
    margin-bottom: 1em; /* 下に余白 */
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background-color: var(--input-bg);
    color: var(--text-color);
    font-size: 1em;
}

button[type="submit"] {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    background-color: var(--button-bg);
    color: var(--button-text);
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;
    transition: opacity 0.2s;
}

button[type="submit"]:hover {
    opacity: 0.8;
}