:root {
    --app-form-field-bg: #ffffff;
    --app-form-field-border: var(--bs-border-color);
    --app-form-field-color: var(--app-default-text-color);
    --app-form-field-disabled-bg: var(--app-layer-three);
    --app-form-field-disabled-border: var(--app-layer-four);
    --app-form-field-disabled-color: var(--app-secondary);
    --app-form-field-focus-border: var(--app-primary);

    --bs-alert-bg: var(--app-layer-two);
    --bs-alert-border-color: var(--app-layer-three);
    --bs-alert-color: var(--app-default-text-color);

    --bs-body-bg: var(--app-default-bg-color);
    --bs-body-color: var(--app-default-text-color);

    --bs-border-color: var(--app-layer-three);
    --bs-border-color-translucent: rgba(0, 0, 0, 0.175);

    --bs-breadcrumb-bg: var(--app-layer-two);
    --bs-breadcrumb-item-active-color: var(--app-secondary);

    --bs-card-bg: var(--app-layer-one);
    --bs-card-border-color: var(--app-layer-two);
    --bs-card-color: var(--app-default-text-color);
    --bs-card-subtitle-color: var(--app-secondary);
    --bs-card-title-color: var(--app-default-text-color);

    --bs-danger: var(--app-danger);
    --bs-danger-rgb: 220, 53, 69;
    --bs-dark: var(--app-dark);
    --bs-dark-rgb: 33, 37, 41;

    --bs-emphasis-color: var(--app-default-text-color);

    --bs-info: var(--app-primary);
    --bs-info-rgb: 13, 202, 240;

    --bs-light: var(--app-light);
    --bs-light-rgb: 248, 249, 250;

    --bs-link-color: var(--app-default-link-color);
    --bs-link-hover-color: var(--app-default-link-hover-color);

    --bs-modal-bg: var(--app-layer-one);
    --bs-modal-color: var(--app-default-text-color);
    --bs-modal-footer-border-color: var(--app-layer-two);
    --bs-modal-header-border-color: var(--app-layer-two);

    --bs-offcanvas-bg: var(--app-layer-one);
    --bs-offcanvas-border-color: var(--app-layer-two);
    --bs-offcanvas-color: var(--app-default-text-color);

    --bs-primary: var(--app-primary);
    --bs-primary-rgb: 13, 110, 253;

    --bs-progress-bg: var(--app-layer-two);

    --bs-secondary: var(--app-secondary);
    --bs-secondary-color: var(--app-secondary);
    --bs-secondary-rgb: 108, 117, 125;

    --bs-success: var(--app-success);
    --bs-success-rgb: 25, 135, 84;

    --bs-tertiary-color: var(--app-layer-four);

    --bs-warning: var(--app-warning);
    --bs-warning-rgb: 255, 193, 7;

    --bs-accordion-bg: var(--app-layer-one);
    --bs-accordion-border-color: var(--app-layer-two);
    --bs-accordion-button-active-bg: var(--app-primary-soft);
    --bs-accordion-button-active-color: var(--app-default-text-color);
    --bs-accordion-button-bg: var(--app-layer-two);
    --bs-accordion-button-color: var(--app-default-text-color);
    --bs-accordion-color: var(--app-default-text-color);

    --bs-btn-bg: var(--app-primary);
    --bs-btn-border-color: var(--app-primary);
    --bs-btn-color: var(--app-default-button-text-color);
    --bs-btn-hover-bg: var(--app-primary-dark);
    --bs-btn-hover-border-color: var(--app-primary-dark);
    --bs-btn-hover-color: var(--app-default-button-text-color);

    --bs-dropdown-bg: var(--app-layer-one);
    --bs-dropdown-border-color: var(--app-layer-two);
    --bs-dropdown-color: var(--app-default-text-color);
    --bs-dropdown-link-color: var(--app-default-text-color);
    --bs-dropdown-link-hover-bg: var(--app-primary);
    --bs-dropdown-link-hover-color: var(--app-default-button-text-color);

    --bs-form-control-bg: var(--app-form-field-bg);
    --bs-form-control-border-color: var(--app-form-field-border);
    --bs-form-control-color: var(--app-form-field-color);
    --bs-form-control-disabled-bg: var(--app-form-field-disabled-bg);
    --bs-form-control-focus-border-color: var(--app-form-field-focus-border);
    --bs-form-control-focus-box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.25);

    --bs-form-select-bg: var(--app-form-field-bg);
    --bs-form-select-border-color: var(--app-form-field-border);
    --bs-form-select-color: var(--app-form-field-color);
    --bs-form-select-focus-border-color: var(--app-form-field-focus-border);
    --bs-form-select-focus-box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.25);

    --bs-list-group-action-color: var(--app-default-text-color);
    --bs-list-group-action-hover-color: var(--app-default-text-color);
    --bs-list-group-bg: var(--app-layer-one);
    --bs-list-group-border-color: var(--app-layer-two);
    --bs-list-group-color: var(--app-default-text-color);
    --bs-list-group-hover-bg: var(--app-layer-two);

    --bs-nav-link-color: var(--app-light);
    --bs-nav-link-hover-color: var(--app-primary);

    --bs-navbar-active-color: var(--app-primary);
    --bs-navbar-brand-color: var(--app-light);
    --bs-navbar-brand-hover-color: var(--app-primary);
    --bs-navbar-color: var(--app-light);
    --bs-navbar-hover-color: var(--app-primary);

    --bs-pagination-active-bg: var(--app-primary);
    --bs-pagination-active-border-color: var(--app-primary);
    --bs-pagination-active-color: var(--app-default-button-text-color);
    --bs-pagination-bg: var(--app-layer-one);
    --bs-pagination-border-color: var(--app-layer-two);
    --bs-pagination-color: var(--app-default-text-color);
    --bs-pagination-hover-bg: var(--app-layer-two);
    --bs-pagination-hover-border-color: var(--app-layer-three);
    --bs-pagination-hover-color: var(--app-primary);

    --bs-popover-bg: var(--app-layer-one);
    --bs-popover-border-color: var(--app-layer-two);
    --bs-popover-color: var(--app-default-text-color);
    --bs-popover-header-bg: var(--app-layer-two);
    --bs-popover-header-color: var(--app-default-text-color);

    --bs-table-bg: var(--app-table-row-color);
    --bs-table-border-color: var(--bs-border-color);
    --bs-table-color: var(--app-default-text-color);
    --bs-table-hover-bg: var(--app-table-row-hover-color);
    --bs-table-striped-bg: var(--app-table-row-alt-color);

    --bs-tooltip-bg: var(--app-dark);
    --bs-tooltip-color: var(--app-light);
}

[data-theme="dark"] {
    --app-form-field-bg: var(--app-layer-one);

    --bs-border-color-translucent: rgba(64, 61, 82, 0.175);

    --bs-danger-rgb: 235, 111, 146;
    --bs-dark-rgb: 25, 23, 36;
    --bs-info-rgb: 196, 167, 231;
    --bs-light-rgb: 224, 222, 244;
    --bs-primary-rgb: 196, 167, 231;
    --bs-secondary-rgb: 144, 140, 170;
    --bs-success-rgb: 49, 116, 143;
    --bs-warning-rgb: 246, 193, 119;

    --bs-form-control-focus-box-shadow: 0 0 0 0.25rem var(--app-focus-ring-primary);
    --bs-form-select-focus-box-shadow: 0 0 0 0.25rem var(--app-focus-ring-primary);

    --bs-tooltip-bg: var(--app-layer-two);
    --bs-tooltip-color: var(--app-default-text-color);

    --bs-card-border-width: 1px;
    --bs-list-group-border-width: 1px;
}

[data-theme="light"] {
    --bs-border-color-translucent: rgba(206, 202, 205, 0.175);

    --bs-danger-rgb: 215, 130, 126;
    --bs-dark-rgb: 87, 82, 121;
    --bs-info-rgb: 144, 122, 169;
    --bs-light-rgb: 250, 244, 237;
    --bs-primary-rgb: 144, 122, 169;
    --bs-secondary-rgb: 121, 117, 147;
    --bs-success-rgb: 40, 105, 131;
    --bs-warning-rgb: 234, 157, 52;

    --bs-form-control-focus-box-shadow: 0 0 0 0.25rem var(--app-focus-ring-primary);
    --bs-form-select-focus-box-shadow: 0 0 0 0.25rem var(--app-focus-ring-primary);
}

.card {
    border-width: 1px;
    border-color: var(--bs-border-color);
}

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

.list-group-flush .list-group-item {
    border-left: 0;
    border-right: 0;
}

.list-group-flush .list-group-item:first-child {
    border-top: 0;
}

.list-group-flush .list-group-item:last-child {
    border-bottom: 0;
}

.form-control {
    background-color: var(--app-form-field-bg) !important;
    border-color: var(--app-form-field-border) !important;
    caret-color: var(--app-form-field-color) !important;
    color: var(--app-form-field-color) !important;
}

.form-control:focus {
    border-color: var(--app-form-field-focus-border) !important;
    box-shadow: none !important;
    outline: none !important;
}

.form-control:disabled,
.form-control[readonly] {
    background-color: var(--app-form-field-disabled-bg) !important;
    border-color: var(--app-form-field-disabled-border) !important;
    color: var(--app-form-field-disabled-color) !important;
    cursor: not-allowed;
}

.form-control:-webkit-autofill,
.form-control:-webkit-autofill:active,
.form-control:-webkit-autofill:focus,
.form-control:-webkit-autofill:hover {
    -webkit-box-shadow: 0 0 0 30px var(--app-form-field-bg) inset !important;
    -webkit-text-fill-color: var(--app-form-field-color) !important;
}

.form-select {
    background-color: var(--app-form-field-bg) !important;
    border-color: var(--app-form-field-border) !important;
    color: var(--app-form-field-color) !important;
}

.form-select:focus {
    border-color: var(--app-form-field-focus-border) !important;
    box-shadow: none !important;
    outline: none !important;
}

.form-select:disabled {
    background-color: var(--app-form-field-disabled-bg) !important;
    border-color: var(--app-form-field-disabled-border) !important;
    color: var(--app-form-field-disabled-color) !important;
    cursor: not-allowed;
}

.progress {
    background-color: var(--app-layer-three);
}

.progress-bar {
    background-color: var(--app-primary);
}

.table > :not(caption) > * > * {
    color: var(--app-default-text-color);
}

.table-striped tbody tr:nth-of-type(4n+1),
.table-striped tbody tr:nth-of-type(4n+2) {
    --bs-table-bg-type: var(--app-table-row-alt-color);
    background-color: var(--app-table-row-alt-color);
    color: var(--app-default-text-color);
}

.table-striped tbody tr:nth-of-type(4n+3),
.table-striped tbody tr:nth-of-type(4n+4) {
    --bs-table-bg-type: color-mix(in srgb, var(--app-secondary) 10%, transparent);
    background-color: color-mix(in srgb, var(--app-secondary) 10%, transparent);
    color: var(--app-default-text-color);
}

.table-hover > tbody > tr:hover > * {
    --bs-table-bg-state: var(--app-table-row-hover-color);
    background-color: var(--app-table-row-hover-color);
    color: var(--app-default-text-color);
}

.ce-block__content [data-placeholder]:empty::before,
.ce-block__content [data-placeholder][data-empty="true"]::before {
    color: var(--app-primary) !important;
    opacity: 0.8;
}

.ce-paragraph[data-placeholder]:empty::before,
.ce-paragraph[data-placeholder-active]::before {
    color: var(--app-primary) !important;
    opacity: 0.8;
}