@import "./var.less";

:root {
    --kc-base-color: #fff;
    --kc-base-color-dimmed: #aaa;
    --kc-key-color: #000;
    --kc-key-color-dimmed: #666;
    /*
    --kc-base-color: rgb(255, 231, 200);
    --kc-base-color-dimmed: rgb(136, 117, 94);
    --kc-key-color: rgb(39, 24, 170);
    --kc-key-color-dimmed: rgb(42, 45, 73);
    */

    --kc-error-color: #b71c1c;
    //--kc-warning-color: transparent; // for future use
    //--kc-info-color: transparent; // for future use
    --kc-placeholder-color: #aaa;
    //--kc-backdrop-color: rgba(0, 0, 100, .5);
    //--kc-backdrop-background: rgba(0, 0, 100, .5);
    --kc-backdrop-background: rgba(0, 0, 0, .5);

    //--kc-overlay-background-color: rgba(0, 0, 0, .5);
    //--kc-overlay-color: #fff;

    --kc-blocker-background: linear-gradient(180deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0) 100%);
    --kc-blocker-color: #fff;

    --kc-overlay-z-index: 9999;
    --kc-line-height: 1.5;
    --kc-border-width: 2px;
    --kc-border-style: solid;
    --kc-border-color: var(--kc-key-color);
    --kc-font-family: sans-serif;
    --kc-font-size: 16px;
    //--kc-font-size: 20px;


    --kc-font-weight: bold;
    --kc-font-style: normal;
    --kc-animation-duration: 200ms;
    //--kc-animation-duration: 1s;
    --kc-animation-easing: cubic-bezier(0, 0, .25, 1);
    //--kc-animation-easing: linear;
    //--kc-animation-easing: ease-out;

    --kc-sidebar-icon-size: 3rem;
    --kc-sidebar-width: 15rem;
    --kc-button-height: 2.5rem;
    --kc-modal-max-height: 50vh;
}

.kc {
    -webkit-tap-highlight-color: transparent;
}

// dark theme ready (experiment)
@media (prefers-color-scheme: dark) {
    :root {
        --kc-base-color: #333;
        --kc-key-color: #fff;
    }
}

/*
@media (min-width: @responsive-breakpoint-medium) {
    :root {
        --kc-base-color: #fed;
        //--kc-container-width: 960px;
        //--kc-sidebar-width: 10rem;
    }
}
*/

/*
@media (min-width: @responsive-breakpoint-large) {
    :root {
        --kc-base-color: #fde;
        --kc-container-width: 960px;
    }
}
*/


@import "./base.less";
@import "./utility.less";
@import "./typography.less";
@import "./main.less";
@import "./sidebar.less";
@import "./intro.less";
@import "./form.less";
@import "./input.less";
@import "./checkbox.less";
@import "./button.less";
@import "./modal.less";
@import "./blocker.less";
@import "./body.less";