:root {
    --ds-ink: #161336;
    --ds-muted: #817d9c;
    --ds-primary: #6b63d8;
    --ds-primary-strong: #584fd0;
    --ds-primary-deep: #2a255f;
    --ds-primary-soft: #e7e5ff;
    --ds-primary-pale: #f4f3ff;
    --ds-line: #dfdeec;
    --ds-surface: #ffffff;
    --ds-success: #00bfa6;
    --ds-warning: #f2a300;
    --ds-error: #ff2a14;
    --ds-radius: 8px;
    --ds-shadow: 0 8px 22px rgba(42, 37, 95, .08);
}

body {
    color: var(--ds-ink);
}

button,
.btn,
.primary,
.secondary,
.danger,
.action-card,
.list-item,
input,
select {
    border-radius: var(--ds-radius) !important;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .12s ease;
}

button,
.btn,
.primary,
button.form-control {
    background: linear-gradient(135deg, #7d75de 0%, var(--ds-primary) 62%, var(--ds-primary-strong) 100%) !important;
    color: #ffffff !important;
    border-color: var(--ds-primary) !important;
}

button:hover,
.btn:hover,
.primary:hover,
button.form-control:hover {
    background: linear-gradient(135deg, #7169da 0%, #625ad2 62%, #5149c8 100%) !important;
}

button:active,
button.is-clicked,
.btn:active,
.btn.is-clicked,
.primary:active,
.primary.is-clicked,
.action-card:active,
.action-card.is-clicked,
.list-item:active,
.list-item.is-clicked {
    background: var(--ds-primary-deep) !important;
    border-color: var(--ds-primary-deep) !important;
    color: #ffffff !important;
    transform: scale(.98);
    box-shadow: 0 4px 12px rgba(42, 37, 95, .18) !important;
}

.secondary {
    background: #ffffff !important;
    color: var(--ds-primary) !important;
    border: 1px solid var(--ds-primary) !important;
}

.secondary:hover {
    background: var(--ds-primary-pale) !important;
}

.secondary:active,
.secondary.is-clicked {
    background: var(--ds-primary-soft) !important;
    color: var(--ds-primary-deep) !important;
    border-color: var(--ds-primary-strong) !important;
    transform: scale(.98);
}

.danger {
    background: #fff1ef !important;
    color: var(--ds-error) !important;
    border: 1px solid #ffc7bf !important;
}

.danger:active,
.danger.is-clicked {
    background: var(--ds-error) !important;
    color: #ffffff !important;
    border-color: var(--ds-error) !important;
}

.action-card,
.list-item,
.panel,
.metric {
    border-color: var(--ds-line) !important;
    box-shadow: var(--ds-shadow) !important;
}

.action-card {
    background: var(--ds-surface) !important;
    color: var(--ds-ink) !important;
}

.action-card:active .symbol,
.action-card.is-clicked .symbol {
    background: #ffffff !important;
    color: var(--ds-primary-deep) !important;
}

.list-item {
    background: var(--ds-surface) !important;
    color: var(--ds-ink) !important;
    -webkit-text-fill-color: var(--ds-ink) !important;
}

.list-item .list-title,
.list-item strong {
    color: var(--ds-ink) !important;
    -webkit-text-fill-color: var(--ds-ink) !important;
}

.list-item .list-note,
.list-item .muted {
    color: var(--ds-primary-deep) !important;
    -webkit-text-fill-color: var(--ds-primary-deep) !important;
    opacity: .72;
}

.list-item:active .list-note,
.list-item.is-clicked .list-note,
.list-item:active .muted,
.list-item.is-clicked .muted {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

.list-item:active .list-title,
.list-item.is-clicked .list-title,
.list-item:active strong,
.list-item.is-clicked strong {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

input:focus,
select:focus {
    outline: 0;
    border-color: var(--ds-primary) !important;
    box-shadow: 0 0 0 3px rgba(107, 99, 216, .18) !important;
}

.is-selected,
[aria-selected="true"] {
    background: var(--ds-primary-soft) !important;
    border-color: var(--ds-primary) !important;
    color: var(--ds-primary-deep) !important;
}