
//
// Kary Foundation's Brand Color Scheme
//    Copyright 2016 Kary Foundation, Inc - All Rights Reserved.
//
// IMPORTANT
//    Premission to use this color scheme is ONLY granted for use within Kary
//    Foundation Branded Projects. As a brand property you get no right to use
//    this theme with any other project.
//

//
// ─── KARY FOUNDATION LIGHT ──────────────────────────────────────────────────────
//

    :root {

        //
        // ─── COLORS ──────────────────────────────────────────────────────
        //

            @kary-orange:                           #B36D00;
            @kary-red:                              #C03207;
            @kary-magenta:                          #AD39A4;
            @kary-blue:                             #2A75C0;
            @kary-green:                            #317410;

            @kary-foreground:                       #141414;
            @kary-comment:                          #BBB7B5;
            @kary-background:                       #F7F7F7;

            @kary-selection:                        #C2E8F4;
            @kary-highlights:                       #ECECEC;

        //
        // ─── EXPORTS ─────────────────────────────────────────────────────
        //

            --kary-orange:                          @kary-orange;
            --kary-red:                             @kary-red;
            --kary-magenta:                         @kary-magenta;
            --kary-blue:                            @kary-blue;
            --kary-green:                           @kary-green;

            --kary-foreground:                      @kary-foreground;
            --kary-comment:                         @kary-comment;
            --kary-background:                      @kary-background;

            --kary-selection:                       @kary-selection;
            --kary-highlights:                      @kary-highlights;

            --color-1:                              @kary-background;
            --color-2:                              white;
            --color-3:                              @kary-foreground;
            --color-4:                              @kary-blue;
            --color-5:                              #EEEEEE;

            --acent-color:                          @kary-magenta;

        //
        // ─── RIBBON ──────────────────────────────────────────────────────
        //

            --ribbon-border-bottom:                 #f5f5f5;
            --ribbon-hover-border:                  #ccc;
            --ribbon-active-border:                 @kary-red;
            --ribbon-separator:                     #eee;

        //
        // ─── CONSOLE ─────────────────────────────────────────────────────
        //

            --console-color:                        #F5F5F5;
            --console-hover-color:                  rgba( 245, 245, 245, 0.9 );
            --console-title:                        #CACACA;
            --console-regexp:                       @kary-blue;
            --console-copy-text:                    @kary-foreground;

        //
        // ─── SIDE CONSOLE ────────────────────────────────────────────────
        //

            --side-console-background:              #f2f2f2;
            --side-console-title:                   @kary-foreground;
            // --side-console-border-color:            #ededed;
            --side-console-border-color:            #ECECEC;
            --side-console-title-color:             #bbb;
            --side-console-invisible-char:          #bbb;
            --side-console-active-back:             white;
            --side-console-active-color:            @kary-magenta;
            --side-console-active-shadow:           rgba(0, 0, 0, 0.1);

            --side-console-flag-inactive-back:      #E9E9E9;
            --side-console-flag-inactive-color:     #bbb;
            // --side-console-flag-active-back:        #D6EEFF;
            // --side-console-flag-active-color:       #2A75C0;
            --side-console-flag-active-back:        #E9E9E9;
            --side-console-flag-active-color:       @kary-blue;

            --side-console-option-inactive-back:    #EAEAEA;
            --side-console-option-active-back:      #F7F7F7;
            --side-console-option-active-color:     @kary-blue;
            --side-console-option-active-shadow:    0 0 4pt 1pt rgba(0, 0, 0, 0.05);

        //
        // ─── BLOCKLY ─────────────────────────────────────────────────────
        //

            --blockly-scrollbar-knob:               #cacaca;

        //
        // ─── PLAYGROUND ──────────────────────────────────────────────────
        //

            --playground-background:                @kary-background;
            --playground-text:                      @kary-foreground;
            --playground-match-text:                @kary-blue;
            --playground-match-back:                #D6EEFF;
            --playground-caret:                     #00BBEC;
            --playground-line-nums:                 #EEEEEE;
            --playground-selection-back:            @kary-selection;
            --playground-hover-back:                white;
            --playground-hover-shadow:              0px 1px 2px 0px #D2D2D2;
            --playground-hover-border:              none;
            --playground-hover-hr-back:             #eee;
            --playground-hover-strong-color:        @kary-blue;
            --playground-hover-code-back:           @kary-background;
            --playground-hover-code-text:           #A9A9A9;

        // ─────────────────────────────────────────────────────────────────

    }

// ────────────────────────────────────────────────────────────────────────────────