h1 {
  color: #007bff;
}
.button {
  background-color: #007bff;
}
a {
  color: #007bff;
}h1 {
  color: #007bff;
}

.button {
  background-color: #007bff;
}

a {
  color: #007bff;
}

:root {
  --primary-color: #007bff;
}
h1 {
  color: var(--primary-color);
}
.button {
  background-color: var(--primary-color);
}
a {
  color:  var(--primary-color);
}

:root {
  --main-color: #333333;
  --accent-color: #007bff;
  --base-font-size: 16px;
}

body {
  color: var(--main-color);
  font-size: var(--base-font-size);
}

.button {
  background-color: var(--accent-color);
}

あなたはプロのCSS設計者です。
これから以下のカラー情報を使ってCSS変数を定義します。
分かりやすく再利用しやすい命名規則のアイデアを3つ提案してください。 

カラー情報：メインカラー #2E8B57, サブカラー #F5F5DC, テキストカラー #333333

CSS変数名の命名規則のアイデア
プロのCSS設計者として、再利用しやすく分かりやすいCSS変数名の命名規則を3つ提案します。
どの命名規則も、将来的なメンテナンス性やチーム開発での可読性を考慮しています。

1. 役割に基づいた命名規則
これは最も一般的で推奨されるアプローチです。
色そのものを示すのではなく、その色がUI上でどのような役割を果たすかに焦点を当てます。

メインカラー: --color-primary

サブカラー: --color-secondary

テキストカラー: --color-text-body または --color-text-default

メリット:
色が変わっても変数名は変更する必要がないため、大規模なリファクタリングが不要です。
コードを読んだだけで、その色がUIのどこに使われるか直感的に理解できます。
セマンティックな意味合いが強く、アクセシビリティの観点からも推奨されます。

2. コンポーネントまたは要素に基づいた命名規則
特定のコンポーネントや要素に紐づく色がある場合に有効です。
これにより、そのコンポーネントのスタイリングがより明確になります。

メインカラー: --button-color-primary または --header-bg-color

サブカラー: --card-bg-color または --input-border-color

テキストカラー: --link-text-color または --footer-text-color

メリット:
特定のコンポーネントのスタイルを管理する際に非常に便利です。
大規模なデザインシステムで、コンポーネントごとのデザインの独立性を高めたい場合に適しています。

デメリット:
色の汎用性が低い場合があり、多くの変数が必要になる可能性があります。

3. スケールに基づいた命名規則 (デザイントークン風)
色の濃淡や明度に応じてスケールを定義し、それを変数名に含める方法です。
デザイントークンの概念に近いアプローチです。

メインカラー: --green-500 (または --brand-green-500)

サブカラー: --beige-100 (または --accent-beige-100)

テキストカラー: --gray-800 (または --text-dark-gray)

メリット:
デザイントークンシステムを導入している場合や、将来的に導入を検討している場合にスムーズに移行できます。
色のバリエーションが増えたときに、一貫した命名規則で管理できます。
デザイナーと開発者間のコミュニケーションを円滑にします。

デメリット:
色の値と変数名のマッピングを覚える必要があり、最初のうちは学習コストがかかる可能性があります。

まとめと推奨
上記3つの提案の中で、最も汎用性が高く、将来的な変更にも強いのは役割に基づいた命名規則です。
まずはこの方法を基本として採用し、必要に応じてコンポーネント固有の色には2番目の方法を
組み合わせるのが良いでしょう。

以下のデザイン情報と命名規則に基づいて、:root内で定義するCSS変数リストを作成してください。

▼デザイン情報
- カラー
- primary: #2E8B57
- secondary: #F5F5DC
- text: #333333
- フォントサイズ
- h1: 40px
- h2: 32px
- body: 16px

▼命名規則
役割ベース（例：--color-primary, --font-size-large）でお願いします。

:root {
  /* カラー */
  --color-primary: #2E8B57; /* メインカラー */
  --color-secondary: #F5F5DC; /* サブカラー、背景などに利用 */
  --color-text-default: #333333; /* デフォルトのテキストカラー */

  /* フォントサイズ */
  --font-size-h1: 40px; /* h1の見出しに適用 */
  --font-size-h2: 32px; /* h2の見出しに適用 */
  --font-size-body: 16px; /* 本文のテキストに適用 */
}

:root {
  /* 余白 */
  --space-sm: 16px;   /* 小さな余白 */
  --space-md: 24px;   /* 中間の余白 */
  --space-lg: 32px;   /* 大きな余白 */
  --space-xl: 40px;   /* 特大の余白 */
}

このカードコンポーネントの内部の余白（padding）と、
各要素間の余白（margin）の値をpx単位で推測してください。

:root {
  /* 余白（スペーシング） */
  --space-xs: 8px;     /* 最小の余白（アイコン間などに使用） */
  --space-sm: 16px;    /* 小さな余白（リスト項目間など） */
  --space-md: 24px;    /* 中間の余白（カード内部paddingなど） */
  --space-lg: 32px;    /* 大きな余白（セクション間など） */
  --space-xl: 40px;    /* 特大の余白（ヒーローヘッダーなど） */
}