// Theme Colors *show in editor*
@theme-1: #debe18; //orange #color
@theme-1-text: #fff; // #color
//--
@theme-2: #282526; // dark brown #color
@theme-2-text: #d3cec5; // #color
//--
@theme-3: #c2b8a7; // header tan #color
@theme-3-text: #6a6a6a; // #color
//--
@theme-4: #dbd5cb; // page title #color
@theme-4-text: #413c35;  // #color
//--
@theme-5: #e3ded7; // badge bar #color
@theme-5-text: #817b72; // #color
//--
@theme-6: #edeae6; // family bar #color
@theme-6-text: #6a6a6a; // #color
//--
@theme-7: #8cc63e; // green #color
@theme-7-text: #fff; // #color
//--
@theme-8: #6a6a6a; // action buttons / type labels #color
@theme-8-text: #fff; // #color
//--
@body-bg:           #edeae6; // The background color of the page. #color
@panel-bg:          #fcfaf8; // The background color of the panel body.

// Text *show in editor*
@text-color:             #6a6a6a;                   // The default text color. #color
@link-color:             #4f89bd;                   // The color for all links. #color

@text-selection-bg:      #afd074;                   // Text selection background color (used when people select text with the mouse). #color
@text-selection-color:   #fff;                      // Text selection text color (used when people select text with the mouse). #color
@font-family-sans-serif: 'OpenSans', 'Helvetica Neue', Helvetica, Arial, sans-serif;    // The base font to use for text. Be sure when defining this font that the various weights are configured.
@font-size-base:          14px;         // The default text size.
@line-height-base:        1.428571429;  // The default line height.
//--
@help-color: #86b8cc;                   // The color of the help icon used in SF. #color
@required-field-color: #eca9a7;         // Color of the small dot that denotes required fields. #color

//// Heading Sizes
@font-size-h1:            floor(@font-size-base * 2.60);    // ~36px
@font-size-h2:            floor(@font-size-base * 2.15);    // ~30px
@font-size-h3:            ceil(@font-size-base * 1.70);     // ~24px
@font-size-h4:            ceil(@font-size-base * 1.25);     // ~18px
@font-size-h5:            @font-size-base;
@font-size-h6:            ceil(@font-size-base * 0.85);     // ~12px


// Bootstrap Colors *show in editor*

//// Bootstrap Colors {The primary colors defined by the Bootstrap framework. [More Information](http://getbootstrap.com/customize/#colors)}
@brand-primary:         @theme-1;   // #color
@brand-success:         #5c9e7d;    // #color
@brand-warning:         #ecc759;    // #color
@brand-danger:          #bb5454;    // #color
@brand-info:            #4099ad;    // #color
@brand-critical:        #ee7624;    // #color
//--
@gray-darker:            lighten(#000, 13.5%); // #color
@gray-dark:              lighten(#000, 20%);   // #color
@gray:                   lighten(#000, 33.5%); // #color
@gray-light:             lighten(#000, 46.7%); // #color
@gray-lighter:           lighten(#000, 93.5%); // #color

// Calculated Colors 
@link-hover-color:       lighten(@link-color, 15%); // The rollover color for all links. #color
@text-muted:             lighten(@text-color, 30%); // The muted color for text #color

// Page Areas 

//// Header
@header-bg:         @theme-3;       // The header background color. #color
@header-text-color: @theme-3-text;  // The header text color. #color
//--
@header-hambuger-color: #fff;               // The text color of the header minimizer. #color
@header-hambuger-bg: @brand-primary;        // The background color of the header minimizer. #color
@header-hamburger-border: @brand-primary;   // The border color of the header minimizer. #color

//// Main Navigation
@nav-bg: @theme-2;                                              // The background color of the main navigation. #color
@nav-color: @theme-2-text;                                      // The text color of the main navigation. #color
@nav-logo-bg: darken(@nav-bg, 5%);                              // The background color of the icon corner. #color
@nav-sub-bg: lighten(@theme-2, 5%);                             // The background of the secondary navigation. #color
@nav-sub-color: @theme-2-text;                                  // The text color of the secondary navigation. #color
@nav-sub-title-color: @theme-1;                                 // The text color of the title on the secondary navigation. #color
@nav-sub-heading-color: darken(@theme-2-text, 20%);             // The text color of the heading on the secondary navigation. #color
@nav-sub-heading-border: fade(@nav-sub-heading-color, 35%);   // The border color of the heading on the secondary navigation. #color
@nav-sub-text-rollover-color: @nav-sub-color;                   // The text color on roll-over for the secondary navigation. #color
@nav-sub-text-rollover-bg: @nav-bg;                             // The background color for text on roll-over for the seconday navigation. #color

//// Page Title
@pagetitle-bg: @theme-4;                // The background color of the page title section. #color
@pagetitle-text-color: @theme-4-text;   // The text color of the page title section. #color

//// Breadcrumbs
@breadcrumb-bg:               @theme-4;                     // Background color for the breadcrumbs. #color
@breadcrumb-color:            lighten(@theme-4-text, 20%);  // Text color for the breadcrumbs. #color
@breadcrumb-active-color:     @breadcrumb-color;            // The color of the active item in the breadcrumbs. #color
@breadcrumb-separator:        "/";                          // Separator character in the breadcrumbs.

//// Footer
@footer-bg: @header-bg;             // The background color of the footer. #color
@footer-color: @header-text-color;  // The text color of the footer. #color

//// Admin Bar
@adminbar-bg: @theme-2; // #color
@adminbar-text-color: @theme-2-text; // #color

// Global Styles 
@border-radius-base: 4px;               // The global setting for rounding corners.
@well-bg: @body-bg;                     // The backgroud color for wells. Wells are used to group like content. #color
@photo-border: @theme-3;                // Standard border color for photos. #color
@hr-border: lighten(@text-color, 40%);  // The color horizontal rule lines. #color
//--
@legend-color:                   @gray-dark; // Text color for html legend element. The legend element is not used much in the core blocks (provided here for theme developers.) #color
@legend-border-color:            @input-border; // Border color for html legend element. The legend element is not used much in the core blocks (provided here for theme developers.) #color

//// Scroll Bars
@scroll-track-color: #aaa; // Color of the scrollbar track line.
@scroll-thumb-color: #ccc; // Color of the scrollbar thumb which moves up and down the track line.

//// Scroll Bars
@spinner-bg: @btn-primary-bg;       // The background color of the wait spinner.
@spinner-color: @btn-primary-color; // The bar color of the wait spinner.


// Control Variables
//// Inputs
@input-bg:                       #fff;                      // The background color of input fields.
@input-bg-disabled:              @gray-lighter;             // The background of inputs in a disabled state.
@input-color:                    @gray;                     // The text color of inputs.
@input-border:                   #ccc;                      // The border color of inputs.
@input-border-radius:            @border-radius-base;       // The border radius of input fields.
@input-border-focus:             #66afe9;                   // The border color of active inputs.
@input-color-placeholder:        lighten(@text-color, 40%); // The text color of input placeholder text.
@input-group-addon-bg:           @theme-6;                   // Used for pre (dollar signs, etc.) and post ( percent signs) input addons as well as picker backgrounds.
@input-group-addon-border-color: @input-border;             // Used for pre (dollar signs, etc.) and post ( percent signs) input addons as well as picker borders (highly recommended that you use the same color as the input border).

//// Picker
@picker-action-bg: #e3ded7;     // The background color of the actions bar at the bottom of the picker dropdown.


//// Date Picker
@datepicker-highlight-bg: @theme-7;         // Background color for highlighting dates and selector elements of the datepicker.
@datepicker-highlight-color: @theme-7-text; // Text color for highlighting dates and selector elements of the datepicker.

//// Image Editor
@imageeditor-bg: @photo-border;              // The background for the image editor roll-over. This control is used to upload images.
@imageeditor-color: contrast(@photo-border); // The icon color for the image editor roll-over. This control is used to upload images.


// Panel
@panel-text:                  @text-color;                  // The text color of the panel.
@panel-border:                darken(@theme-6, 10%);        // The panel's border color.
@panel-top-border-color:      @theme-3;    // Color of the panel's top border often used as an accent color.
@panel-border-radius:         @border-radius-base;
//--
@panel-heading-bg:            @theme-6;                  // The background color of the panel's header.
@panel-heading-text-color:    @theme-6-text;             // The heading's text color.
@panel-heading-border:        @panel-border;             // The headings border color.
//--
@panel-following-active-bg:   @panel-top-border-color;   // The background color of the following square when it's active at the top of panels that support the following feature (e.g. Group Details block).
//--
@panel-footer-bg:             @panel-bg;                 // The background color of the panel's footer.
@panel-footer-color:          @panel-text;              // The color text of the panel's footer.

// Grid
@grid-border-color: @panel-border;   // The border color of the grids cells.
@grid-padding: 8px;         // The default padding of the grid cells.

//// Filter Section
@grid-filter-bg: @panel-heading-bg;        // The background color of the filter section of the grid.
@grid-filter-color: @panel-heading-text-color; // The text color of the filter section of the grid.

//// Grid Header
@grid-column-header-bg: @panel-heading-bg;                        // The background color of the grid header.
@grid-column-header-text-color: @panel-heading-text-color;     // The text color of the grid header.
@grid-column-header-font-size: 14px;                    // The font size of the grid header.
@grid-column-header-font-weight: @font-weight-semibold; // The font weight of the grid header.
@grid-column-header-border-color: @grid-border-color;    // The border color of the grid header.
//--
@grid-column-header-bold-bg: @nav-bg;                   // Background color for bold table headers like the merge person page.
@grid-column-header-bold-color: @nav-color;             // The text color for bold table headers like the merge person page.

//// Row Striping
@grid-row-even-bg: @panel-bg;         // The even rows background color.
@grid-row-even-color: @text-color;  // The even rows text color.
@grid-row-odd-bg: #f5f2ee;         // The odd rows background color.
@grid-row-odd-color: @text-color;   // The odd rows text color.

//// Hover
@grid-hover-bg: darken(@panel-heading-bg, 2%);            // Row background color when hovered over.
@grid-hover-color: @text-color;     // Row text color when hovered over.

//// Section Headers
@grid-section-bg: @theme-4;          // Some grids like the person merge grid have section headers to group like rows. This styles the background of these rows.
@grid-section-color: @theme-4-text;  // Some grids like the person merge grid have section headers to group like rows. This styles the text of these rows.

//// Pager Section
@grid-pager-bg: @panel-heading-bg;
@grid-pager-color: @panel-heading-text-color;
//--
@grid-pager-button-bg: @panel-heading-bg;
@grid-pager-button-color: @text-color;
@grid-pager-button-border: darken(@grid-pager-button-bg, 15%);
@grid-pager-button-active-bg: lighten(@grid-pager-button-bg, 5%);

//// Footer
@grid-footer-bg: @panel-heading-bg;
@grid-footer-text-color: @panel-heading-text-color;
@grid-footer-font-size: 10px;
@grid-footer-font-weight: 300;
//--
@grid-footer-button-bg: darken(@grid-footer-bg, 5%);
@grid-footer-button-text-color: @text-color;
@grid-footer-button-border: darken(@grid-footer-bg, 15%);

// Popover
@popover-title-bg: @panel-heading-bg; // The background color for popovers

// Person Profile
//// Bio Bar
@persondetails-bio-bg: @theme-4;
@persondetails-bio-color: @theme-4-text;
@persondetails-bio-action-color: #fff;
@persondetails-bio-action-bg: #6a6a6a;
@persondetails-bio-action-border: darken(@persondetails-bio-action-bg, 5%);
@persondetails-bio-photo-border: @header-bg;
@persondetails-bio-photo-following: #817b72;

//// Badge Bar
@persondetails-badge-bg: @theme-5;
@persondetails-badge-color: @theme-5-text;

//// Family Bar
@persondetails-familybar-bg: @theme-6;
@persondetails-familybar-color: @theme-6-text;
@persondetails-familybar-action-color: #fff;
@persondetails-familybar-action-bg: #6a6a6a;
@persondetails-familybar-action-border: darken(@persondetails-bio-action-bg, 5%);
@persondetails-familybar-photo-bg: darken(@persondetails-familybar-bg, 20%);

// Note Types

//// Alert / Hightlight Note
@note-highlight-bg: @alert-danger-bg;
@note-highlight-text: @alert-danger-text;
@note-highlight-border: @alert-danger-border;

//// Private / Personal Note
@note-personal-bg: @alert-info-bg;
@note-personal-text: @alert-info-text;
@note-personal-border: @alert-info-border;

// Modals
@modal-header-bg: @theme-2;
@modal-header-text-color: @theme-2-text;
@modal-body-bg: @body-bg;
@modal-body-text-color: @text-color;
@modal-footer-bg: @theme-4;
@modal-footer-text-color: @theme-4-text;
@modal-dropshadow-color: rgba(0,0,0,0.6);

//// Backdrop
@modal-backdrop-bg:           #fff;
@modal-backdrop-opacity:      .4;

// Tooltip
@tooltip-header-bg: @theme-8;
@tooltip-header-text-color: @theme-8-text;
@tooltip-bg: @theme-8;

// Pills
@nav-pills-active-link-hover-bg:         @theme-7;
@nav-pills-active-link-hover-color:      @theme-7-text;
@nav-pills-link-color: @text-color;  // The color of the none active pill link.
//--
@nav-pills-container-bg:                @body-bg; // the background color for the well-pillwrap class used on the security dialog, communication mediums and template details.
@nav-pills-container-border:            darkend(@nav-pills-container-bg, 20%); // The border color of the well-pillwrap classed used on the security dialog, communication mediums and template details.

// List As Blocks { Used on many administration pages and pages like 'My Workflows', 'Connections' and 'Calendar'. }
@listasblocks-bg: @theme-6;
@listasblocks-border-color: darken(@theme-6, 10%);
@listasblocks-color: @theme-6-text;
@listasblocks-rollover-bg: @theme-8;
@listasblocks-rollover-text-color: @theme-8-text;
@listasblocks-rollover-border-color: darken(@listasblocks-rollover-bg, 5%);
@listasblocks-active-bg: @theme-8;
@listasblocks-active-border-color: darken(@listasblocks-active-bg, 10%);
@listasblocks-active-color: @theme-8-text;

// Tags { Styles for the tag control used on the person profile. }
@tag-bg: #c2b8a7;
@tag-text-color: #231f20;
@tag-border-radius: @border-radius-base;
@tag-dot-color: #dbd5cb;
@tag-bg-alt: #d0c6b4;

// Autocomplete Styles
@autocomplete-bg: @body-bg;
@autocomplete-border: darken(@autocomplete-bg, 10%);
@autocomplete-text: @theme-4-text;
@autocomplete-rollover-bg: darken(@autocomplete-bg, 5);  // the background color of the rollover for autocompletes.

// Smart Search
@smartsearch-bg: rgba(255, 255, 255, .1);
@smartsearch-border-color: #2c2c2c;
@smartsearch-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.15);
@smartsearch-input-text-color: @header-text-color;
@smartsearch-input-selection-background: #2e2e2e;
@smartsearch-input-selection-text-color: #fff;
@smartsearch-text-color: @header-text-color;

// Wizard Styles { Used on pages like 'Calendar' and 'Event Registration' to help guide the user through a complex series of screens. }
@wizard-bg: @pagetitle-bg;
@wizard-item-bar-color: darken(@wizard-bg, 10%);
@wizard-item-bar-complete-color: darken(@wizard-item-bar-color, 10%);
//--
@wizard-item-label-active-color: @pagetitle-text-color;
@wizard-item-icon-active-color: @nav-pills-active-link-hover-color;
@wizard-item-icon-active-bg: @nav-pills-active-link-hover-bg;
//--
@wizard-item-label-complete-color: @wizard-item-label-active-color;
@wizard-item-icon-complete-color: @wizard-item-icon-color;
@wizard-item-icon-complete-bg: @wizard-item-icon-active-bg;
//--
@wizard-item-label-color: lighten(@wizard-item-label-active-color, 25%);
@wizard-item-icon-color: lighten(@wizard-item-icon-bg, 15%);
@wizard-item-icon-bg: darken(@wizard-bg, 10%);

// Tree Viewer
@tree-rollover-bg: lighten(@tree-selected-bg, 20%);         // Background color of the rollover for items in the treeview.
@tree-rollover-color: @tree-selected-color;      // Text color of the rollover for items in the treeview.
@tree-selected-bg: #6a6a6a;         // Background color of selected items in the treeview.
@tree-selected-color: #ffffff;      // Text color of selected items in the treeview.

// Buttons
@btn-font-weight:                normal;
//--
@btn-default-color:              @text-color;
@btn-default-bg:                 @body-bg;
@btn-default-border:             darken(@body-bg, 20%);
//--
@btn-primary-color:              #fff;
@btn-primary-bg:                 @brand-primary;
@btn-primary-border:             darken(@btn-primary-bg, 5%);
//--
@btn-success-color:              #fff;
@btn-success-bg:                 @brand-success;
@btn-success-border:             darken(@btn-success-bg, 5%);
//--
@btn-warning-color:              #fff;
@btn-warning-bg:                 @brand-warning;
@btn-warning-border:             darken(@btn-warning-bg, 5%);
//--
@btn-danger-color:               #fff;
@btn-danger-bg:                  @brand-danger;
@btn-danger-border:              darken(@btn-danger-bg, 5%);
//--
@btn-info-color:                 #fff;
@btn-info-bg:                    @brand-info;
@btn-info-border:                darken(@btn-info-bg, 5%);
//--
@btn-action-color:              @theme-8-text;
@btn-action-bg:                 @theme-8;
@btn-action-border:             darken(@btn-action-bg, 5%);
//--
@btn-security-color:            @btn-default-color;
@btn-security-bg:               @btn-default-bg;
@btn-security-border:           @btn-default-border;
//--
@btn-link-disabled-color:        @gray-light;

// Custom Alerts
@alert-default-bg: @theme-6; 
@alert-default-border: darken(@alert-default-bg, 10%); 
@alert-default-text: @theme-6-text;

// Custom Labels { The bootstrap labels use the brand colors. }
@label-campus-bg: #83758f;               // Used for identifing campuses.
@label-type-bg: @theme-8;  // Used for showing the 'type' of an idea. For instance on the group viewer this highlights the group's type.

// Form States and Actions Colors
@state-warning-text:             #c09853;
@state-warning-bg:               #fcf8e3;
@state-warning-border:           darken(spin(@state-warning-bg, -10), 3%);
//--
@state-danger-text:              #b94a48;
@state-danger-bg:                #f2dede;
@state-danger-border:            darken(spin(@state-danger-bg, -10), 3%);
//--
@state-success-text:             #468847;
@state-success-bg:               #dff0d8;
@state-success-border:           darken(spin(@state-success-bg, -10), 5%);
//--
@state-info-text:                #3a87ad;
@state-info-bg:                  #d9edf7;
@state-info-border:              darken(spin(@state-info-bg, -10), 7%);

// Code
@code-color:                  #c7254e;
@code-bg:                     #f9f2f4;
//--
@pre-bg:                      #f5f5f5;
@pre-color:                   @gray-dark;
@pre-border-color:            #ccc;
@pre-scrollable-max-height:   340px;

// Dropdowns
@dropdown-bg:                    #fff;
@dropdown-border:                rgba(0,0,0,.15);
@dropdown-fallback-border:       #ccc;
@dropdown-divider-bg:            #e5e5e5;
//--
@dropdown-link-color:            @gray-dark;
@dropdown-link-hover-color:      darken(@gray-dark, 5%);
@dropdown-link-hover-bg:         #f5f5f5;
//--
@dropdown-link-active-color:     @component-active-color;
@dropdown-link-active-bg:        @component-active-bg;
//--
@dropdown-link-disabled-color:   @gray-light;
//--
@dropdown-header-color:          @gray-light;
//--
@dropdown-caret-color:           @link-color;
