/* ============================================================
   tokens.css  —  デザイントークン & グローバルリセット
   最初に読み込む。デザイン変数（カラー）と box-sizing の
   リセットのみを担当する。他のすべてのレイヤーは、ここで
   定義した CSS 変数に依存する。
   ============================================================ */

/* リセット：全要素のマージン・パディングを除去し、
   box-sizing を border-box に統一する */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* カラートークン：金色・銀色・紫系・テキスト系の配色を一元管理 */
:root {
  /* 旧 green 変数を金色・深紫に転用（使用箇所は変更なし） */
  --green-dark: #2d1b5a;   /* 深紫：ヘッダー・フッター・暗背景 */
  --green-mid: #c9a84c;    /* ゴールド：ラベル・アクセント */
  --green-light: #e8c96a;  /* ライトゴールド：暗背景上のアクセント */
  --green-pale: #f0e6cc;   /* ペールゴールド：ボーダー・薄背景 */
  --green-ultra: #faf8ff;  /* ラベンダーホワイト：セクション薄背景 */

  /* 紫：より鮮やかで清涼感のある色調に調整 */
  --purple-dark: #2d1b5a;
  --purple-mid: #7b5cbf;
  --purple-light: #b39fda;
  --purple-pale: #ede7f6;

  /* テキスト：紫みを帯びたダークトーン */
  --text-dark: #1a1a2e;
  --text-mid: #44425a;
  --text-light: #7a7896;
}