:root{
    --primary: light-dark(oklch(0.15 0.01 270), oklch(0.05 0.01 270));
    --primary-text: light-dark(white, white);

    --secondary: light-dark(oklch(0.808 0.007 268.535), oklch(0.216 0.003 17.401));
    --secondary-text: light-dark(white, white);

    --accent: light-dark(oklch(0.735 0.168 40.247), oklch(0.535 0.168 40.247));
    --accent-text: light-dark(white, white);

    
    /*alerts or highlight*/
    --success: light-dark(oklch(0.552 0.123 157.012), oklch(0.423 0.140 157.012));
    --success-text: light-dark(oklch(0.1 0 89.876), oklch(1 0 89.876));

    --info: light-dark(oklch(0.775 0.138 218.055), oklch(0.560 0.155 218.055));
    --info-text: light-dark(oklch(0.1 0 0), oklch(1 0 0));

    --warning: light-dark(oklch(0.865 0.177 90.382), oklch(0.612 0.200 90.382));
    --warning-text: light-dark(oklch(0.1 0 0), oklch(1 0 0));

    --danger: light-dark(oklch(0.592 0.202 21.239), oklch(0.445 0.225 21.239));
    --danger-text: light-dark(oklch(0.1 0 89.876), oklch(1 0 89.876));

    --bg: light-dark(oklch(0.982 0.002 247.839), oklch(0.2 0.002 247.839));
    --fc: light-dark(oklch(0.2 0.013 248.212), oklch(0.9 0.013 248.212));

   
    --border-color: light-dark(oklch(0.798 0.006 264.527), oklch(0.372 0.003 286.235));
    
    /*derived colors*/
    --bg-level-1: light-dark(
            color-mix(in oklch, var(--bg), black 5%),    /* slightly darker than bg for light theme */
            color-mix(in oklch, var(--bg), white 5%)     /* slightly lighter than bg for dark theme */
    );

    --bg-level-2: light-dark(
            color-mix(in oklch, var(--bg), black 10%),
            color-mix(in oklch, var(--bg), white 10%)
    );

    --bg-level-3: light-dark(
            color-mix(in oklch, var(--bg), black 15%),
            color-mix(in oklch, var(--bg), white 15%)
    );


}




html.light-theme {
    color-scheme: light;
    .dark-theme-icon{
        display: none;
    }
}
html.dark-theme {
    color-scheme: dark;
    .light-theme-icon{
        display: none;
    }
}

html,body{
    background-color: var(--bg);
    color: var(--fc);
    accent-color: var(--accent);
}

a{
    text-decoration: none;
    color: currentColor;
}

button{
    color: currentColor;
}
.bk-header{
    background-color: var(--primary);
    color: var(--primary-text);
}
.bk-page-title-bar{
    background-color: var(--secondary);
    color: var(--secondary-text);
}
.bk-aside{
    background-color: var(--bg-level-3);
    color: var(--fc);
}

.bk-page-title-bar{
    background-color: var(--bg-level-1);
    color: var(--fc);
    
    .bk-page-back:hover{
        color: var(--accent);
    }
}

/*Grid-View*/
.bk-grid-view-container{
    .bk-grid-view-toolbar{
        border: 1px solid var(--border-color);
    }
    .bk-table{
        thead, tfoot{
            background-color: var(--bg-level-1);
            color: var(--fc);
        }
        th{
            border:1px solid var(--border-color);
            border-top:none;
        }
        td{
            border:1px solid var(--border-color);
        }
        
        .bk-table-row-body:focus-within{
            background-color: var(--bg-level-3);
            color: var(--fc);
        }
        .bk-table-row-body:hover{
            background-color: var(--info);
            color: var(--info-text);
        }
        
        .bk-filter-form{
            background-color: var(--bg-level-1);
            color: var(--fc);
            border-color: var(--border-color);
        }
        .bk-filter-active{
            color: var(--accent);
        }
    }
}

/*Form*/
.bk-form{
    border: 1px solid var(--border-color);
    
    input,
    select,
    textarea{
        background-color: var(--bg);
        color: var(--fc);
        border: 1px solid var(--border-color);
        
        &:focus{
            outline: 1px solid var(--accent);
        }
    }
    
    fieldset{
        border:1px solid var(--border-color);
    }
    
    .valid.modified:not([type=checkbox]) {
        outline: 1px solid var(--success);
    }

    .invalid {
        outline: 1px solid var(--danger);
    }

    .validation-message {
        color: var(--danger);
    }

    .bk-form-commands{
        
        .bk-operation-update{
            background-color: var(--success);
            color: var(--success-text);
        }
        .bk-operation-create{
            background-color: var(--success);
            color: var(--success-text);
        }
        .bk-operation-delete{
            background-color: var(--danger);
            color: var(--danger-text);
        }
        .bk-btn-cancel{
            background-color: var(--warning);
            color: var(--warning-text);
        }
    }
}
.bk-dropdown-list{
    background-color: var(--secondary);
    color: var(--secondary-text);
    
    .bk-dropdown-item{
        background-color: var(--bg);
        color: var(--fc);
        &:hover{
            background-color: var(--accent);
            color: var(--accent-text);
        }
        
        &:focus{
            background-color: var(--accent);
            color: var(--accent-text);
        }
    }
    
    &:has(.bk-dropdown-item){
        border:1px solid var(--border-color);
    }
}

.bk-mtm--editor{
    border: 1px solid var(--border-color);
    .bk-mtm-items-container{
        background-color: var(--bg-level-1);
        color: var(--fc);
    }
    
    .bk-mtm-items{
        .bk-mtm-item{
     
            background-color: var(--bg-level-2);
            color: var(--fc);
            &:hover{
                background-color: var(--accent);
                color: var(--accent-text);
            }
            &.selected{
                background-color: var(--accent);
                color: var(--accent-text);
            }
        }
    }
    
    .bk-mtm-commands{
        background-color: transparent;
        color: var(--success);
       
        
        .btn-clear{
            color: var(--warning);
        }
    }
}

.bk-page-link-menu{
    border: 1px solid var(--border-color);
    
    &:hover{
        background-color: var(--accent);
        color: var(--accent-text);
    }
}

.bk-page-link.active{
    background-color: var(--accent);
    color: var(--accent-text);
}

.bk-footer{
    background-color: var(--secondary);
    color: var(--secondary-text);
}

.bk-header .bk-dropdown-menu-item{
    &:hover{
        background-color: var(--accent);
        color: var(--accent-text);
    }
}
.bk-header .bk-header-menu-item{
    &:hover{
        background-color: var(--accent);
        color: var(--accent-text);
    }
}




    .bk-component-header{
        background-color: var(--bg-level-1);
        color: var(--fc);
    }
    .bk-component-body{
        background-color: color-mix(in oklch,var(--bg),black 10%);
        color: var(--fc);
    }
    .bk-component-footer{
        background-color: var(--bg-level-1);
        color: var(--fc);
    }

    
    .bk-detail-view{
        border:1px solid var(--border-color);
        
        fieldset{
            border:1px groove var(--border-color);
        }
        
        .bk-detail-view-header{
            background-color: var(--bg-level-1);
            color: var(--fc);
        }
        .bk-detail-view-body{
            background-color: var(--bg);
            color: var(--fc);
            
            dt{
                background-color: var(--bg-level-1);
                color: var(--fc);
            }
        }
        .bk-detail-view-footer{
            background-color: var(--bg-level-1);
            color: var(--fc);
        }

        .bk-search-input{
            outline-color: var(--accent);
            border-color: var(--border-color);
            &:focus{
                border-color: var(--accent);
            }
        }
    }