/* Custom css */

/* Color scheme */
:root {
    /* Background colors */
    /* --bg-primary: #fbf8ff; */
    /* --bg-secondary: #f3f0f9; */
    /* --bg-input: #fbf8ff; */

    /* Text colors */
    /* --text-constant: #1b1b21; */
    /* --text-primary: #1b1b21; */
    /* --text-muted: #757575; */

    /* Border colors */
    /* --border-color: #c7c5d0; */
    /* --border-alt: #e1e0f9; */
    /* --border-alt-text: #444559; */

    /* Scroll bar colors */
    /* --scroll-bar-color: #ddd; */

    /* Button colors */
    /* --btn-primary: #565992; */
    /* --btn-primary-text: #fff; */
    /* --btn-delete: #f26767; */
    /* --btn-edit: #f6e052; */

    /* Prompt colors */
    /* --prompt-success: #4CAF50; */
    /* --prompt-error: #f44336; */

    /* Shadow colors */
    /* --shadow-light: rgba(0, 0, 0, 0.2); */
    /* --shadow-medium: rgba(0, 0, 0, 0.5); */
}

/* Device dark mode color scheme */
@media (prefers-color-scheme: dark) {
    :root {
        /* Background colors */
        /* --bg-primary: #131318; */
        /* --bg-secondary: #1c1c24; */
        /* --bg-input: #2c2c30; */

        /* Text colors */
        /* --text-constant: #e4e1e9; */
        /* --text-primary: #e4e1e9; */
        /* --text-muted: #C2C2C2; */

        /* Border colors */
        /* --border-color: #46464f; */
        /* --border-alt: #444559; */
        /* --border-alt-text: #e1e0f9; */

        /* Button colors */
        /* --btn-primary: #bfc2ff; */
        /* --btn-primary-text: #272b60; */

        /* Scroll bar colors */
        /* --scroll-bar-color: #666; */
    }
}

/* Enable following if you're using custom backgound */
/* Choose blur color depends on your custom background color */
:root {
    /* Choose one based on you background color theme */
    /* Dark background color scheme */
    /*
        --text-primary: #fff;
        --text-muted: #C2C2C2;
        --scroll-bar-color: #666;
     */

    /* Light background color scheme */
    /* 
        --text-primary: #000;
        --text-muted: #757575;
        --scroll-bar-color: #ddd;
     */
}

.footer-btn-icon.focus,
.translucent {
    /*
        color: var(--text-primary) !important;
        background-color: rgba(0, 0, 0, 0) !important;
        border: 1px solid var(--border-color);
     */

    /* Blur intensity (optional) */
    /* backdrop-filter: blur(3px); */
}

.blur-box {
    /* color: var(--text-primary); */

    /* Dark background effect */
    /* background-color: rgba(0, 0, 0, 0.1); */

    /* Light background effect */
    /* background-color: rgba(255, 255, 255, 0.4); */
}

.header,
.footer,
#copy-link {
    /* Prevent conflict with translucent background */
    /* background-color: transparent; */
}
