/* Shared application button skin. Bootstrap retains sizing, groups and state behavior. */
:root {
    --app-button-primary: var(--admin-accent, var(--seller-accent, #d3ad62));
    --app-button-primary-ink: var(--admin-button-ink, var(--seller-button-ink, #211a0e));
    --app-button-outline-primary: var(--admin-accent, var(--seller-accent, #e2bd76));
}
[data-bs-theme="dark"] {
    --app-button-outline-primary: var(--admin-button-outline, var(--seller-button-outline, #e2bd76));
}
.btn {
    --bs-btn-font-weight: 600;
    --bs-btn-border-radius: var(--app-button-radius, .65rem);
    --bs-btn-disabled-opacity: .48;
    --bs-btn-focus-box-shadow: 0 0 0 .22rem color-mix(in srgb, var(--app-button-tone, #a5afbd) 28%, transparent);
    transition: color .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.btn-sm, .btn-group-sm > .btn { --bs-btn-border-radius: .5rem; }
.btn-lg, .btn-group-lg > .btn { --bs-btn-border-radius: .8rem; }
.btn:focus-visible, .btn-check:focus-visible + .btn {
    outline: 2px solid var(--app-button-outline, var(--app-button-tone, #a5afbd));
    outline-offset: 3px;
}

.btn-primary, .btn-outline-primary {
    --app-button-tone: var(--app-button-primary);
    --app-button-ink: var(--app-button-primary-ink);
    --app-button-outline: var(--app-button-outline-primary);
}
[data-bs-theme="dark"] :is(.btn-primary, .btn-outline-primary) { --app-button-outline: var(--app-button-outline-primary); }

.btn-secondary, .btn-outline-secondary {
    --app-button-tone: #536174;
    --app-button-ink: #ffffff;
    --app-button-outline: #536174;
}
[data-bs-theme="dark"] :is(.btn-secondary, .btn-outline-secondary) { --app-button-outline: #b8c5d7; }

.btn-success, .btn-outline-success {
    --app-button-tone: #23735c;
    --app-button-ink: #ffffff;
    --app-button-outline: #23735c;
}
[data-bs-theme="dark"] :is(.btn-success, .btn-outline-success) { --app-button-outline: #82d5b3; }

.btn-danger, .btn-outline-danger {
    --app-button-tone: #b13e51;
    --app-button-ink: #ffffff;
    --app-button-outline: #b13e51;
}
[data-bs-theme="dark"] :is(.btn-danger, .btn-outline-danger) { --app-button-outline: #ffa6b3; }

.btn-warning, .btn-outline-warning {
    --app-button-tone: #ebc578;
    --app-button-ink: #30220c;
    --app-button-outline: #876014;
}
[data-bs-theme="dark"] :is(.btn-warning, .btn-outline-warning) { --app-button-outline: #ebc578; }

.btn-info, .btn-outline-info {
    --app-button-tone: #296f86;
    --app-button-ink: #ffffff;
    --app-button-outline: #296f86;
}
[data-bs-theme="dark"] :is(.btn-info, .btn-outline-info) { --app-button-outline: #8bcee2; }

.btn-light, .btn-outline-light {
    --app-button-tone: #edf0f5;
    --app-button-ink: #303e52;
    --app-button-outline: #58667a;
}
[data-bs-theme="dark"] :is(.btn-light, .btn-outline-light) { --app-button-outline: #d9e1ed; }

.btn-dark, .btn-outline-dark {
    --app-button-tone: #29364a;
    --app-button-ink: #ffffff;
    --app-button-outline: #29364a;
}
[data-bs-theme="dark"] :is(.btn-dark, .btn-outline-dark) { --app-button-outline: #b7c4d8; }
.btn.btn-primary,
.btn.btn-secondary,
.btn.btn-success,
.btn.btn-danger,
.btn.btn-warning,
.btn.btn-info,
.btn.btn-light,
.btn.btn-dark {
    --bs-btn-color: var(--app-button-ink);
    --bs-btn-bg: var(--app-button-tone);
    --bs-btn-border-color: var(--app-button-tone);
    --bs-btn-hover-color: var(--app-button-ink);
    --bs-btn-hover-bg: color-mix(in srgb, var(--app-button-tone) 90%, #000);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--app-button-tone) 90%, #000);
    --bs-btn-active-color: var(--app-button-ink);
    --bs-btn-active-bg: color-mix(in srgb, var(--app-button-tone) 80%, #000);
    --bs-btn-active-border-color: color-mix(in srgb, var(--app-button-tone) 80%, #000);
    --bs-btn-disabled-color: var(--app-button-ink);
    --bs-btn-disabled-bg: var(--app-button-tone);
    --bs-btn-disabled-border-color: var(--app-button-tone);
    box-shadow: inset 0 1px 0 #ffffff16, 0 2px 3px #1118270a;
}
.btn.btn-outline-primary,
.btn.btn-outline-secondary,
.btn.btn-outline-success,
.btn.btn-outline-danger,
.btn.btn-outline-warning,
.btn.btn-outline-info,
.btn.btn-outline-light,
.btn.btn-outline-dark {
    --bs-btn-color: var(--app-button-outline);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: color-mix(in srgb, var(--app-button-outline) 48%, transparent);
    --bs-btn-hover-color: var(--app-button-outline);
    --bs-btn-hover-bg: color-mix(in srgb, var(--app-button-outline) 11%, transparent);
    --bs-btn-hover-border-color: var(--app-button-outline);
    --bs-btn-active-color: var(--app-button-ink);
    --bs-btn-active-bg: var(--app-button-tone);
    --bs-btn-active-border-color: var(--app-button-tone);
    --bs-btn-disabled-color: var(--app-button-outline);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: color-mix(in srgb, var(--app-button-outline) 35%, transparent);
}
.btn.btn-link {
    --bs-btn-color: var(--app-button-outline-primary);
    --bs-btn-hover-color: var(--app-button-outline-primary);
    --bs-btn-active-color: var(--app-button-outline-primary);
    --bs-btn-disabled-color: var(--app-button-outline-primary);
    text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
    text-underline-offset: .2em;
}
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }