/* ==========================================================================
   Capital Framework theme overrides
   ========================================================================== */


/* cf-core
   ========================================================================== */

// Sizing variables

@base-font-size-px:             16px;
@base-line-height-px:           22px;
@base-line-height:              unit(@base-line-height-px / @base-font-size-px);


@bp-xs-max:                     600px;
@bp-sm-min:                     @bp-xs-max + 1px;
@bp-sm-max:                     900px;
@bp-med-min:                    @bp-sm-max + 1px;
@bp-med-max:                    1020px;
@bp-lg-min:                     @bp-med-max + 1px;
@bp-lg-max:                     1230px;
@bp-xl-min:                     @bp-lg-max + 1px;

// To be deprecated
@mobile-max:                    @bp-xs-max;
@tablet-min:                    @bp-sm-min;


// Color variables

// body
@body-text-color:               @black;
@text:                          @black;

// a
@link-text:                     @pacific;
@link-underline:                @pacific;
@link-text-visited:             @dark-teal;
@link-underline-visited:        @dark-teal;
@link-text-hover:               @pacific-60;
@link-underline-hover:          @pacific-60;
@link-text-active:              @dark-navy;
@link-underline-active:         @dark-navy;

// thead
@thead-text:                    @white;
@thead-bg:                      @dark-gray;
@td-bg:                         @gray-5;
@td-bg-alt:                     @gray-10;

// input
@input-bg:                      @white;
@input-border:                  @gray-80;
@input-border-focus:            @pacific;

@input-placeholder:             @gray-80;
@input-warning:                 @gold;

// .figure__bordered
@figure__bordered:              @gray-40;


/* cf-buttons
   ========================================================================== */

// Color variables

// .btn
@btn-text:                      @white;
@btn-bg:                        @pacific;
@btn-bg-hover:                  @pacific-80;
@btn-bg-active:                 @navy;

// .btn__secondary
@btn__secondary-text:           @white;
@btn__secondary-bg:             @gray-80;
@btn__secondary-bg-hover:       @gray-60;
@btn__secondary-bg-active:      @dark-gray;

// .btn__warning
@btn__warning-text:             @white;
@btn__warning-bg:               @red;
@btn__warning-bg-hover:         @red-80;
@btn__warning-bg-active:        @dark-red;

// .btn__disabled
@btn__disabled-text:            @gray-80;
@btn__disabled-bg:              @gray-10;
@btn__disabled-outline:         @gray-10;

// Sizing variables

// .btn
@btn-font-size:                 14px;
@btn-v-padding:                 8px;
@btn-v-padding-modifier-ie:     .8;
@super-btn-font-size:           18px;


/* cf-expandables
   ========================================================================== */

// Color variables

// .expandable
@expandable-focus:              @black;

// .expandable_label
@expandable_label-text:         @black;

// .expandable_link
@expandable_link-text:          @pacific;

// .expandable__padded
@expandable__padded-bg:         @gray-10;
@expandable__padded-bg-hover:   @gray-10;
@expandable__padded-divider:    @gray-40;

// .expandable-group
@expandable-group_header-text:  @gray-80;
@expandable-group_header-bg:    @gray-10;
@expandable-group-bg: @white;
@expandable-group-divider:      @gray-60;

// Sizing variables

// .expandable_link
@expandable_link-font-size:     @btn-font-size;


/* cf-forms
   ========================================================================== */

// Color variables

// .error
@input-error:                   @red;

// .success
@input-success:                 @green;

// Sizing variables

// .input__super
@input__super-font-size:        @super-btn-font-size;


/* cf-grid
   ========================================================================== */

@grid_box-sizing-polyfill-path: '/static/vendor/box-sizing-polyfill';
@grid_wrapper-width:            1230px;
@grid_gutter-width:             30px;
@grid_total-columns:            12;
@grid_debug:                    false;
@grid_column-breakpoint:        720px;

.grid_nested-col-group() {
  display: block;
  position: relative;
  margin-left: ( @grid_gutter-width / 2 ) * -1;
  margin-right: ( @grid_gutter-width / 2 ) * -1;
}

/* cf-icons
   ========================================================================== */

@cf-icon-prefix:                cf-icon;
@cf-icon-path:                  '../fonts';
@cf-icon-ie7-support:           true;


/* cf-layout
   ========================================================================== */

// Color variables

// .block
@block__border-top:             @gray-40;
@block__border-bottom:          @gray-40;
@block__bg:                     @gray-5;

// .content_main
@content_main-border:           @gray-40;

// .content_sidebar
@content_sidebar-bg:            @gray-10;
@content_sidebar-border:        @gray-40;

// .content_bar
@content_bar:                   @green;

// .content_line
@content_line:                  @gray-40;

// .grid_column__top-divider
@grid_column__top-divider:      @gray-40;

// .grid_column__top-divider
@grid_column__left-divider:     @gray-40;


/* cf-pagination
   ========================================================================== */

// Color variables

@pagination-text:               @gray-80;
@pagination-bg:                 @gray-10;

// Sizing variables

@pagination-font-size:          16px;
@pagination-bp:                 640px;


/* cf-typography
   ========================================================================== */

// Color variables

// .pull-quote
@pull-quote_body:               @black;
@pull-quote_citation:           @gray-80;

// .micro-copy
@micro-copy-text:               @gray-80;

// .date
@date-text:                     @gray-80;

// .category-slug
@category-slug-text:            @black;
@category-slug-hover:           @link-text-hover;

// .header-slug
@header-slug-thin-border:       @gray-10;
@header-slug-thick-border:      @green;

// .padded-header
@padded-header-text:            @dark-gray;
@padded-header-bg:              @gray-10;
@padded-header-border:          @gray-40;

// .fancy-slug
@fancy-slug-text:               @black;
@fancy-slug-bg:                 @white;
@fancy-slug-border:             @gray-40;

// .meta-header
@meta-header-border:            @gray-40;

// .jump-link
@jump-link__bg:                 @gray-10;
@jump-link__bg-border:          @gray-10;

// .list__branded
@list__branded-bullet:          @green;
