:root {
    --yokai-bg: #1e2124;
    --yokai-surface: #2a2e30;
    --yokai-surface-alt: #333a3c;
    --yokai-border: #3f4749;
    --yokai-cyan: #18bed6;
    --yokai-cyan-dark: #0f96aa;
    --yokai-cyan-light: #5ccad3;
    --yokai-text: #c7c7c7;
    --yokai-muted: #8b9799;
}

html {
    background-color: var(--yokai-bg);
    font-family: 'Roboto', sans-serif;
    color: var(--yokai-text);
    padding: 0px;
}

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

h1, h3 {
    color: #eaf6f8;
    font-weight: 300;
    letter-spacing: 1px;
}

h1 {
    border-bottom: 2px solid var(--yokai-cyan);
    display: inline-block;
    padding-bottom: 6px;
    margin-bottom: 20px;
}

a {
    color: var(--yokai-cyan);
}

a:hover {
    color: var(--yokai-cyan-light);
}

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

.form-control, .form-select {
    background-color: var(--yokai-surface) !important;
    border: 1px solid var(--yokai-border) !important;
    color: var(--yokai-text) !important;
    border-radius: 4px;
}

.form-control:focus, .form-select:focus {
    background-color: var(--yokai-surface-alt) !important;
    border-color: var(--yokai-cyan) !important;
    box-shadow: 0 0 0 0.2rem rgba(24, 190, 214, 0.25) !important;
    color: var(--yokai-text) !important;
}

.form-control::placeholder {
    color: var(--yokai-muted) !important;
}

select.form-control option {
    background-color: var(--yokai-surface);
    color: var(--yokai-text);
}

select.form-control option:checked {
    background-color: var(--yokai-cyan-dark);
    color: #ffffff;
}

label {
    color: var(--yokai-muted);
    text-transform: uppercase;
    font-size: 0.78rem;
    letter-spacing: 0.6px;
    margin-bottom: 4px;
}

table {
    width: 100%;
    table-layout: fixed;
}

.table {
    border: 1px solid var(--yokai-border);
    border-radius: 6px;
    overflow: hidden;
}

.table-dark {
    --bs-table-bg: var(--yokai-surface);
    --bs-table-striped-bg: #23282a;
    --bs-table-striped-color: var(--yokai-text);
    --bs-table-color: var(--yokai-text);
    --bs-table-border-color: var(--yokai-border);
    --bs-table-hover-bg: #35403f;
}

.table thead th {
    background-color: #16191b;
    color: var(--yokai-cyan);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.8px;
    font-weight: 500;
    border-bottom: 2px solid var(--yokai-cyan) !important;
}

.btn {
    border-radius: 4px;
    font-weight: 500;
    letter-spacing: 0.4px;
    border-width: 1px;
}

.btn-primary {
    background-color: var(--yokai-cyan);
    border-color: var(--yokai-cyan);
    color: #10262a !important;
}

.btn-primary:hover, .btn-primary:focus {
    background-color: var(--yokai-cyan-light);
    border-color: var(--yokai-cyan-light);
    color: #10262a !important;
}

.btn-success {
    background-color: transparent;
    border-color: var(--yokai-cyan);
    color: var(--yokai-cyan) !important;
}

.btn-success:hover, .btn-success:focus {
    background-color: var(--yokai-cyan);
    border-color: var(--yokai-cyan);
    color: #10262a !important;
}

.btn-warning {
    background-color: transparent;
    border-color: var(--yokai-muted);
    color: var(--yokai-text) !important;
}

.btn-warning:hover, .btn-warning:focus {
    background-color: var(--yokai-surface-alt);
    border-color: var(--yokai-cyan);
    color: var(--yokai-cyan) !important;
}

.btn-danger {
    background-color: transparent;
    border-color: #b4453c;
    color: #e0736a !important;
}

.btn-danger:hover, .btn-danger:focus {
    background-color: #b4453c;
    border-color: #b4453c;
    color: #ffffff !important;
}

.container, .row {
    color: var(--yokai-text);
}

code {
    color: var(--yokai-cyan-light);
    background-color: #16191b;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.88em;
}

.ability-help {
    background-color: var(--yokai-surface);
    border: 1px solid var(--yokai-border);
    border-left: 3px solid var(--yokai-cyan);
    border-radius: 6px;
    line-height: 1.8;
}

.table tbody th[colspan] {
    background-color: #16191b !important;
    color: var(--yokai-cyan);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.8px;
    font-weight: 500;
    border-top: 1px solid var(--yokai-cyan);
}

form.text-light {
    background-color: var(--yokai-surface);
    border: 1px solid var(--yokai-border);
    border-radius: 6px;
    padding: 20px;
}