:root {
    /* ========================================
       カラーバリアブル定義（Bootstrap風）
       ======================================== */
    /* オレンジ系（accent） */
    --accent: #ff7f23;
    --accent-dark: #e46d1d;
    --accent-text-on: #ffffff;
    /* 緑系（active） */
    --active: #047a61;
    --active-dark: #03614e;
    --active-text-on: #ffffff;
}


/* ========================================
   1. accent（オレンジ）ユーティリティ群
   ======================================== */

/* 1-1. ボタン */
.btn-accent {
    background-color: var(--accent);
    color: var(--accent-text-on);
    border: 1px solid var(--accent);
}

    .btn-accent:hover {
        background-color: var(--accent-dark);
        border-color: var(--accent-dark);
        color: var(--accent-text-on);
    }

.btn-outline-accent {
    background-color: transparent;
    color: var(--accent);
    border: 1px solid var(--accent);
}

    .btn-outline-accent:hover {
        background-color: var(--accent);
        color: var(--accent-text-on);
    }

/* 1-2. ユーティリティカラー */
.bg-accent {
    background-color: var(--accent) !important;
    color: var(--accent-text-on) !important;
}

.text-accent {
    color: var(--accent) !important;
}

.border-accent {
    border-color: var(--accent) !important;
}

/* 1-3. バッジ */
.badge.bg-accent {
    background-color: var(--accent);
    color: var(--accent-text-on);
}


/* ========================================
   2. active（緑）ユーティリティ群
   ======================================== */

/* 2-1. ボタン */
.btn-active {
    background-color: var(--active);
    color: var(--active-text-on);
    border: 1px solid var(--active);
}

    .btn-active:hover {
        background-color: var(--active-dark);
        border-color: var(--active-dark);
        color: var(--active-text-on);
    }

.btn-outline-active {
    background-color: transparent;
    color: var(--active);
    border: 1px solid var(--active);
}

    .btn-outline-active:hover {
        background-color: var(--active);
        color: var(--active-text-on);
    }

/* 2-2. ユーティリティカラー */
.bg-active {
    background-color: var(--active) !important;
    color: var(--active-text-on) !important;
}

.bg-active-light {
    background-color: rgba(4, 122, 97, 0.1) !important;
}

.text-active {
    color: var(--active) !important;
}

.border-active {
    border-color: var(--active) !important;
}

/* 2-3. バッジ */
.badge.bg-active {
    background-color: var(--active);
    color: var(--active-text-on);
}