:root {
    --light-color: #cad3f5;
    --dark-color: #4c4f69;
    --background-color: light-dark(#eff1f5, #24273a);
    --foreground-color: light-dark(#dce0e8, #181926);
    --border-color: light-dark(#ccd0da, #363a4f);
    --font-color: light-dark(var(--dark-color), var(--light-color));
    --success-color: light-dark(#40a02b, #a6da95);
    --notice-color: light-dark(#7287fd, #b7bdf8);
    --warning-color: light-dark(#df8e1d, #eed49f);
    --danger-color: light-dark(#d20f39, #ed8796);
    --link: light-dark(#1e66f5, #8aadf4);
    --accent-primary-color: light-dark(#fe640b, #f5a97f);
    --accent-secondary-color: light-dark(#df8e1d, #e5c890);
    --accent-color: linear-gradient(to right, var(--accent-primary-color), var(--accent-secondary-color));
    --shadow-color: #1e2030;
    --highlight-color: light-dark(rgb(124, 127, 147, 0.2), rgb(147, 154, 183, 0.2));
  --hover-color: light-dark(rgb(254, 100, 11, 0.3), rgb(245, 169, 127, 0.3));
    --btn-radius: 8px;
    --bg-transparent: rgba(36, 39, 58, 0.9);

    --widget-panel-width: 30%;
    --post-btn-padding: 1.6rem 2rem;
    --bottom-bar-margin: 8px;
    --bottom-bar-width: 95%;
}

.compose .post-btn {
    color: var(--dark-color);
}

.mfm a.mention {
    background-color: rgb(245, 169, 127, 0.2);
    color: var(--accent-primary-color);
}

.btn {
    color: var(--accent-primary-color);
}

.theme-dark .note-wrapper .note-footer .btn:hover {
    border-color: var(--accent-color);
}

.theme-dark .nav a.active .sidebar-btn,
.theme-dark .bottom-nav a.active .bottom-bar-btn {
    background: var(--accent-secondary-color);
    color: var(--dark-color);
}

.theme-dark .widget-panel {
    width: var(--widget-panel-width);
}

.theme-dark .sidebar-btn.post-btn {
    padding: var(--post-btn-padding);
}

.theme-dark .sidebar-btn.post-btn:hover {
    background: var(--accent-primary-color);
}

.theme-dark .bottom-bar {
    margin: 0 var(--bottom-bar-margin) var(--bottom-bar-margin);
    position: fixed;
    align-self: center;
    width: var(--bottom-bar-width);
    border-radius: var(--btn-radius);
    background: var(--bg-transparent);
}

#sidebar {
    background-color: var(--bg-transparent);
}