:root {
    --bg-color: #ffffff;
    --text-color: #000000;
    --accent-color: #007bff;
    --card-bg-color: #ffffff;
    --breadcrumb-link-color: #007bff;
    --breadcrumb-active-color: #333333;
    --feather-edit-color: #000000;
    --btn-edit-color: #000000;
    --table-border-color: #dee2e6;
    --table-bg-color: #ffffff;
    --table-color: #000000;
    --overview-list-item-h-text-color: #777777;

    --app-modal-bg: #ffffff;

    --section-bg-color: #ffffff;

    /* ボタン */
    --btn-add-color: #ffffff;
    --btn-add-bg-color: #1f1f1f;
    --btn-add-hover-bg-color: #5c5c5c;
    --btn-unfollow-bg-color: var(--bg-color);
    --btn-unfollow-hover-bg-color: #be5c5c;
    --btn-unfollow-hover-border-color: #ffffff;
}

.dark {
    --bs-body-bg: #616161;
    --bs-body-color: #e0e0e0;
    --bs-border-color: #616161;
    --bs-link-color-rgb: 255, 197, 202;

    --bs-secondary-color: #bbbbbb;
    
    --bg-color: #0f0f0f;
    --text-color: #e0e0e0;
    --accent-color: #64b5f6;
    --card-bg-color: #1c1c1c;
    --breadcrumb-link-color: #3ea6ff;
    --breadcrumb-active-color: #f1f1f1;
    --feather-edit-color: #ffffff;
    --btn-edit-color: #ffffff;
    --table-border-color: #616161;
    --table-bg-color: #333333;
    --table-color: #e0e0e0;
    --overview-list-item-h-text-color: #cfcfcf;


    /* モーダル */
    --app-modal-bg: #1c1c1c !important;
    --bs-modal-color: #e0e0e0 !important;
    --bs-modal-header-bg: #1c1c1c !important;
    --bs-modal-header-color: #e0e0e0 !important;
    --bs-modal-body-bg: #1c1c1c !important;
    --bs-modal-body-color: #e0e0e0 !important;
    --bs-modal-footer-bg: #1c1c1c !important;
    --bs-modal-footer-color: #e0e0e0 !important;

    /* フォーム */
    --bs-tertiary-bg: #1c1c1c;

    /* ナビゲーション */
    --bs-emphasis-color: #e0e0e0;

    /* select2 */
    --select2-bg-color: #1c1c1c !important;
    --select2-text-color: #e0e0e0 !important;
    --select2-highlight-bg-color: #e0e0e0 !important;
    --select2-highlight-text-color: #1c1c1c !important;

    /* セクション */
    --section-bg-color: #2d3748;

    /* ボタン */
    --btn-add-bg-color: #ffffff;
    --btn-add-color: #000000;
    --btn-add-border-color: #7e7e7e;
    --btn-add-hover-bg-color: #5c5c5c;
    --btn-add-hover-border-color: #000000;
    --btn-add-hover-color: #000000;
}

.modal {
    --bs-modal-width: 700px !important;
    --bs-modal-bg: var(--app-modal-bg) !important;
}

.select2-results {
    background-color: var(--select2-bg-color) !important;
    color: var(--select2-text-color) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--select2-highlight-bg-color) !important;
    color: var(--select2-highlight-text-color) !important;
}

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

.overview-list-item-h {
    color: var(--overview-list-item-h-text-color) !important;
}

.breadcrumb-item a {
    color: var(--breadcrumb-link-color);
    text-decoration: none;
}

.breadcrumb-item.active {
    color: var(--breadcrumb-active-color);
    font-weight: bold;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
}

.card {
    background-color: var(--card-bg-color);
    color: var(--text-color);
}

.theme-toggle {
    margin: 2px;
    width: 36px;
    height: 20px;
    appearance: none;
    background-color: #ccc;
    border-radius: 50px;
    position: relative;
    outline: none;
    cursor: pointer;
    transition: background-color 0.3s;
}

.theme-toggle::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.3s;
}

.theme-toggle:checked {
    background-color: #64B5F6;
}

.theme-toggle:checked::before {
    transform: translateX(15px);
}