/*
 * CUSTOM CSS OVERRIDES
 *
 * This file is for customizing the appearance of your wiki.
 * Add your CSS rules below to override the default styles.
 *
 * Example - Change primary colors:
 */

/*
:root {
    --primary-color: #ff6600 !important;
    --primary-hover: #ff8833 !important;
}
*/

/* Your custom styles below */

:root[data-theme="dark"] {
    /* Dark theme variables */
    --primary-color: hsl(270, 100%, 70%);
    --primary-hover: hsl(290, 100%, 70%);
    --primary-rgb: 102, 179, 255;
    --text-color: #e0e0e0;
    --text-muted: #999;
    --accent-color: hsl(270, 100%, 70%);
    --accent-hover-color: hsl(290, 100%, 70%);
    --border-color: #404040;
    --hover-bg: #2a2a2a;
    --sidebar-bg: hsl(180, 0%, 8%);
    --breadcrumb-color: #999;
    --bg-color: #22262a;/*#121212;*/
    --blockquote-bg: #2a2a2a;
    --code-bg: #2a2a2a;
    --theme-toggle-bg: #404040;
    --theme-toggle-color: #e0e0e0;
    --danger-color: #ff6b6b;
    --danger-bg: #2c1215;
    --success-color: #4caf50;
    --success-bg: #1b2e1f;
    --warning-color: #ffb74d;
    --warning-bg: #2e2416;
    --shadow: 0 4px 8px rgba(0, 0, 0, 0.7);
}

/* cyrillic-ext */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wdth,wght@80,100..700&display=swap');

body {
    font-family: 'IBM Plex Sans';
    font-weight: 300;
    font-size: 18px;
    font-variation-settings: "wdth" 80;
}

.dialog-button, .page-actions-button, .toolbar-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid var(--border-color);
    border-radius: 30px;
    corner-shape: squircle;
    background: var(--bg-color);
    color: var(--text-muted);
    font-family: 'IBM Plex Sans' !important;
    font-size: 14px;
    font-weight: 300 !important;
    cursor: pointer;
    transition: all .2s ease;
    width: auto;
}

.edit-toolbar, .view-toolbar {
    gap: 14px;
}

.search-box {
    width: 100%;
    padding: 8px 10px;
    font-family: 'IBM Plex Sans' !important;
    font-size: 16px;
    font-weight: 300 !important;
    border: 1px solid var(--border-color);
    border-radius: 30px;
    corner-shape: squircle;
    background: var(--bg-color);
    color: var(--text-color);
    transition: all .2s ease;
    box-sizing: border-box;
}

.custom-toolbar button {
    border-radius: 30px !important;
    corner-shape: squircle;
    color: var(--text-color) !important;
    border: 0 solid var(--border-color) !important;
    margin: 5px 5px !important;
    height: 38px;
    width: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: 0 0;
    cursor: pointer;
    font-size: 14px;
}

.custom-toolbar i.separator {
    height: 48px;
}

code[class*=language-], pre[class*=language-] {
    font-family: ZedMono Nerd Font Mono;
    font-weight: 300;
}