:root {
  /* 🎨 メインテーマカラー（Waisさん指定） */
  --main-light: #c7fff6;   /* 明るい背景やホバー */
  --main-mid: #bad9d4;     /* 基本背景・ボタンなど */
  --main-dark: #436064;    /* テキスト・見出し・強調 */
  --magenta: #da4f88;      /* アクセント・アクション色 */

  /* 🌤 背景・レイヤー系 */
  --bg: #f9fdfc;           /* ページ全体の背景（白に近い） */
  --bg-alt: #eafaf7;       /* セクション背景・カードなど */
  --bg-hover: #dff7f2;     /* ホバー時の背景 */

  /* 🧱 テキスト・枠線系 */
  --text: #2c3e3f;         /* 基本テキスト（main-darkより少し濃い） */
  --text-light: #5f7c7f;   /* サブテキスト・補足情報 */
  --border: #b0d0cc;       /* 枠線・区切り線（main-midに馴染む） */
  --heading-color: var(--main-dark);     /* 見出しの基本色 */
  --subheading-color: var(--text-light); /* サブ見出しや補足 */

  /* 🌑 影・奥行き */
  --shadow: rgba(67, 96, 100, 0.1);  /* main-darkベースの柔らかい影 */

  /* 🎯 アクション・強調 */
  --accent: var(--magenta);         /* ボタン・リンクなどの強調色 */
  --accent-hover: #c03c74;          /* ホバー時のマゼンダ濃色 */

  /* 🌿 成功・安心系 */
  --success: #4CAF50;
  --success-hover: #388e3c;
  --success-soft: #66bb6a; /* ← 少し明るめの緑で柔らかく */

  /* ⚠️ 警告・エラー系（必要に応じて） */
  --warn: #f57c00;
  --error: #e53935;
}