:root{
--color-primary: #772ce8;
--color-secondary: #18181b;
--color-accent: #221188;
--color-background: #0e0e10;
--color-surface: #26262c;
--color-text: #efeff1;
--color-muted: #adb5bd;
--navbar-bg: #18181b;
--navbar-text: #efeff1;
--outline-color: #6610f2;
--media-color-intro: #0ea5e9;
--media-color-clip: #6610f2;
--media-color-outro: #f59e0b;
--media-color-transition: #22c55e;
--media-color-compilation: #6610f2;
}
:root{
--bs-primary: var(--color-primary);
--bs-secondary: var(--color-secondary);
--bs-body-bg: var(--color-background);
--bs-body-color: var(--color-text);
--bs-card-bg: var(--color-surface);
--bs-card-color: var(--color-text);
--bs-border-color: #30363d;
--bs-link-color: var(--color-accent);
--bs-link-hover-color: var(--color-primary);
--bs-focus-ring-color: color-mix(in srgb, var(--outline-color), transparent 70%);
--bs-focus-ring-opacity: 1;
--bs-focus-ring-width: 0.25rem;
--bs-progress-bar-bg: var(--color-accent);
}
body{background-color: var(--color-background); color: var(--color-text);}
.card{background-color: var(--color-surface); color: var(--color-text);}
.text-muted{color: var(--color-muted)!important;}
.navbar.bg-dark{background-color: var(--navbar-bg)!important;}
.navbar-dark .navbar-brand, .navbar-dark .navbar-nav .nav-link{color: var(--navbar-text)!important;}
.sidebar{background-color: var(--color-surface); border-right: 1px solid var(--bs-border-color);}
.footer{background-color: var(--color-background); border-top: 1px solid var(--bs-border-color);}
.btn-primary{background-color: var(--bs-primary); border-color: var(--bs-primary);}
.btn-primary:hover{background-color: var(--bs-primary); border-color: var(--bs-primary); filter: brightness(0.9);}
.table{
--bs-table-color: var(--bs-body-color);
--bs-table-bg: var(--bs-card-bg);
--bs-table-border-color: var(--bs-border-color);
--bs-table-striped-bg: color-mix(in srgb, var(--bs-table-bg), #ffffff 6%);
--bs-table-striped-color: var(--bs-body-color);
--bs-table-active-bg: color-mix(in srgb, var(--bs-table-bg), #ffffff 10%);
--bs-table-active-color: var(--bs-body-color);
--bs-table-hover-bg: color-mix(in srgb, var(--bs-table-bg), #ffffff 8%);
--bs-table-hover-color: var(--bs-body-color);
}
.table-light{
--bs-table-color: var(--bs-body-color);
--bs-table-bg: color-mix(in srgb, var(--bs-card-bg), #ffffff 8%);
--bs-table-border-color: var(--bs-border-color);
--bs-table-striped-bg: color-mix(in srgb, var(--bs-table-bg), #ffffff 6%);
--bs-table-striped-color: var(--bs-body-color);
--bs-table-active-bg: color-mix(in srgb, var(--bs-table-bg), #ffffff 10%);
--bs-table-active-color: var(--bs-body-color);
--bs-table-hover-bg: color-mix(in srgb, var(--bs-table-bg), #ffffff 8%);
--bs-table-hover-color: var(--bs-body-color);
}
.table thead th{border-bottom-color: var(--bs-border-color)!important;}
:focus{outline-color: var(--outline-color);}