/*
 * 配色の定義はこのファイルだけに書く。他のファイルに色を直書きしない。
 * 変数名は役割で付ける。配色を変えるときはここの値だけを差し替える。
 */
:root {
  --color-main: #1F3A5F;        /* 見出し・ヘッダー・帯・電話ボタン */
  --color-main-dark: #152A46;   /* フッター・ホバー */
  --color-cta: #D2691E;         /* 見積・予約ボタン専用 */
  --color-cta-hover: #B95A16;
  --color-accent: #E2802F;      /* 装飾専用。文字は載せない */
  --color-bg: #FFFFFF;
  --color-tint: #EAF0F5;        /* 帯・パック背景 */
  --color-soft: #F5F7F9;        /* セクション背景 */
  --color-border: #DCE3EA;
  --color-text: #333333;
  --color-text-sub: #666666;
  --color-on-main: #FFFFFF;
  --color-on-cta: #FFFFFF;
  --color-gold: #C9A23A;        /* 表彰バッジ風エンブレム */
  --color-line: #06C755;        /* LINEボタン（固定） */

  /* 実装で追加した役割 */
  --color-line-hover: #05A847;  /* LINEボタンのホバー */
  --color-status-upcoming: #4F7F26; /* イベント「開催前」バッジ */
  --color-status-live: #B3263A;     /* イベント「開催中」バッジ */
  --color-status-ended: #6B7280;    /* イベント「終了」バッジ */
  --color-error: #B3261E;       /* フォームのエラー */
  --color-overlay: rgba(255, 255, 255, .78); /* 写真に重ねる文字の下地 */
  --color-shadow: rgba(0, 0, 0, .16);        /* 影 */
}