//
// Variables
// --------------------------------------------------

// Config
// -------------------------

// set to false to make responsive
// mixin give only xs- versions of
// responsive classes
$generate-responsive-classes: true !default;

// Controls whether or not we use font sizing.
// See the font-smoothing mixin in _mixins.scss
$font-smoothing: true !default;

// Fonts
// -------------------------

$sans: "Proxima Nova", Helvetica, Arial, sans-serif !default;
$slab: "Caponi-Slab-Semibold", "Proxima Nova", Helvetica, Arial, sans-serif !default;

// Borders
// -------------------------

$border:         1px solid rgba(0, 0, 0, .2) !default;
$border-lighter: 1px solid rgba(0, 0, 0, .1) !default;
$border-radius:  3px !default;


// Spacing
// -------------------------

$space-05: .25rem !default; // 4px
$space-1: .5rem   !default; // 8px
$space-2:   1rem  !default; // 16px
$space-3: 1.5rem  !default; // 24px
$space-4:   2rem  !default; // 32px
$space-5:   3rem  !default; // 48px
$space-6: 4.5rem  !default; // 72px

// Z-index
// -------------------------
$z1: 100 !default;
$z2: 200 !default;
$z3: 300 !default;
$z4: 400 !default;

// Colors
// -------------------------

// Fills
$fill-red:             #e32    !default;
$fill-red-lighter:     #feebe9 !default;
$fill-pink:            #e40c78 !default;
$fill-blue:            #0f65ef !default;
$fill-purple:          #6645dd !default;
$fill-yellow:          #ffee00 !default;
$fill-yellow-lighter:  #fffab6 !default;
$fill-teal:            #007c7c !default;
$fill-green:           #68af15 !default;
$fill-green-lighter:   #e1efd0 !default;
$fill-orange:          #f47f16 !default;
$fill-promoted-orange: #bf5608 !default;
$fill-gray-lighter:    #f4f4f4 !default;
$fill-gray-light:      #d7d7d7 !default;
$fill-gray:            #aaa    !default;
$fill-gray-darker:     #222    !default;
$fill-white:           #fff    !default;

// Social Fills
$fill-facebook:  #1877f2    !default;
$fill-twitter:   #55acee    !default;
$fill-google:    #dd4b39    !default;
$fill-linkedin:  #2867b2    !default;
$fill-pinterest: #e60019    !default;
$fill-tumblr:    #001935    !default;
$fill-youtube:   #FF0000    !default;
$fill-instagram: #000000    !default;
$fill-buzzfeed:  $fill-red  !default;
$fill-vine:      #00b488    !default;
$fill-snapchat:  #fffc00    !default;

// Type Colors
$text-white:           #fff    !default;
$text-gray:            #222    !default;
$text-gray-lighter:    #666    !default;
$text-gray-lightest:   #757575 !default;
$text-red:             #e32    !default;
$text-pink:            #e40c78 !default;
$text-orange:          #f47f16 !default;
$text-promoted-orange: #f7ad19 !default;
$text-purple:          #6645dd !default;
$text-green:           #68af15 !default;
$text-blue:            #0f65ef !default;

// Social Type Colors
$text-facebook:  #3b5998 !default;
$text-twitter:   #55acee !default;
$text-google:    #dd4b39 !default;
$text-linkedin:  #0077b5 !default;
$text-pinterest: #bd081c !default;
$text-tumblr:    #36465d !default;
$text-youtube:   #FF0000 !default;
$text-instagram: #000000 !default;

// Interface Colors
$highlight-outline: #7a9ff3;

// Typography Sizes and Weights
// -------------------------

$base-font-size: 16px !default;

$text-1: 1.75rem  !default; // 28px
$text-2: 1.375rem !default; // 22px
$text-3: 1.125rem !default; // 18px
$text-4: 1rem     !default; // 16px
$text-5: .875rem  !default; // 14px
$text-6: .75rem   !default; // 12px

$regular: 400 !default;
$bold: 600    !default;
$xbold: 700   !default;

// Line height
// -------------------------
// Using a unitless system for consistency.
// https://css-tricks.com/almanac/properties/l/line-height/

$line-height-1: 1.2 !default; // set on h1-h3 and .text-1-.text-3
$line-height-2: 1.3 !default; // set on h4-h6 and .text-4-.text-6
$line-height-3: 1.5 !default; // default line-height set on the body

// Line heights specific to forms, buttons and tags.
$line-height-form:       1.5rem  !default;
$line-height-form-small: 1.25rem !default;

// Disabled opacity for buttons, forms, pagination
$opacity-disabled: .3 !default;

// SVG
// -------------------------
// encoding this as utf8 is good!
// https://css-tricks.com/probably-dont-base64-svg/
// but like url encode it first or IE/FF will hate you
// http://codepen.io/yoksel/details/JDqvs/
// svg icons saved as variables

$down-caret: "%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2712%27%20height%3D%278%27%20viewBox%3D%270%200%20488%20285%27%3E%3Cpath%20d%3D%27M483.11%2029.381l-24.449-24.485c-2.934-2.938-7.335-4.897-11.246-4.897-3.912%200-8.313%201.959-11.246%204.897l-192.168%20192.448-192.168-192.448c-2.934-2.938-7.335-4.897-11.246-4.897-4.401%200-8.313%201.959-11.246%204.897l-24.449%2024.485c-2.934%202.938-4.89%207.345-4.89%2011.263s1.956%208.325%204.89%2011.263l227.864%20228.196c2.934%202.938%207.335%204.897%2011.246%204.897%203.912%200%208.313-1.959%2011.246-4.897l227.864-228.196c2.934-2.938%204.89-7.345%204.89-11.263s-1.956-8.325-4.89-11.263z%27%20fill%3D%27%23000%27/%3E%3C/svg%3E" !default;
$checkmark: "%3Csvg%20width%3D%2710%27%20height%3D%2710%27%20viewBox%3D%270%200%20512%20512%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27M491.185%20120.619l-42.818-42.818c-5.667-5.667-13.538-8.815-21.409-8.815-7.871%200-15.742%203.148-21.409%208.815l-206.534%20206.849-92.563-92.877c-5.667-5.667-13.538-8.815-21.409-8.815-7.871%200-15.742%203.148-21.409%208.815l-42.818%2042.818c-5.667%205.667-8.815%2013.538-8.815%2021.409%200%207.871%203.148%2015.742%208.815%2021.409l113.972%20113.972%2042.818%2042.818c5.667%205.667%2013.538%208.815%2021.409%208.815%207.871%200%2015.742-3.148%2021.409-8.815l42.818-42.818%20227.943-227.943c5.667-5.667%208.815-13.538%208.815-21.409%200-7.871-3.148-15.742-8.815-21.409z%27%20fill%3D%27%23fff%27/%3E%3C/svg%3E" !default;
$solid-logo: "%3Csvg%20width%3D%22100%22%20height%3D%2234%22%20viewBox%3D%220%200%20100%2034%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Asketch%3D%22http%3A//www.bohemiancoding.com/sketch/ns%22%3E%3Ctitle%3EArtboard%3C/title%3E%3Cdesc%3ECreated%20with%20Sketch.%3C/desc%3E%3Cg%20sketch%3Atype%3D%22MSPage%22%20fill%3D%22none%22%3E%3Cg%20sketch%3Atype%3D%22MSShapeGroup%22%3E%3Cpath%20d%3D%22M12.241%208.043c-.355%200-.709.142-.97.424l-10.7%2011.533c-.497.535-.467%201.372.07%201.869l11.533%2010.701c.255.237.578.354.9.354.355%200%20.709-.142.969-.423l10.702-11.533c.497-.536.465-1.373-.07-1.87l-11.533-10.7c-.255-.237-.578-.353-.9-.353%22%20opacity%3D%22.9%22%20fill%3D%22%2307e%22/%3E%3Cpath%20d%3D%22M23.218%200l-.283.031-15.37%203.352c-.715.156-1.168.86-1.012%201.575l3.353%2015.372c.134.619.681%201.041%201.29%201.041l.285-.031%2015.37-3.352c.715-.156%201.167-.86%201.01-1.575l-3.35-15.372c-.137-.618-.684-1.041-1.293-1.041%22%20id%3D%22Shape%22%20opacity%3D%22.9%22%20fill%3D%22%23fe0%22/%3E%3Cpath%20d%3D%22M23.224%206.522c-.387%200-.764.177-1.001.511l-8.521%2011.948c-.395.556-.255%201.334.313%201.739l12.24%208.729c.227.162.487.24.744.24.387%200%20.764-.177%201.001-.512l8.522-11.947c.395-.557.255-1.334-.313-1.739l-12.24-8.728c-.227-.162-.488-.241-.746-.241%22%20id%3D%22Shape%22%20opacity%3D%22.9%22%20fill%3D%22%23e32%22/%3E%3Cpath%20d%3D%22M50.388%2025.715c5.05%200%207.238-2.665%207.238-5.78%200-6.986-10.886-4.826-10.886-8.305%200-1.403%201.235-2.329%203.17-2.329%201.964%200%203.956.673%205.415%202.132l1.88-2.441c-1.74-1.683-4.096-2.609-7.014-2.609-4.096%200-6.818%202.385-6.818%205.471%200%206.902%2010.914%204.461%2010.914%208.389%200%201.235-1.066%202.553-3.76%202.553-2.609%200-4.629-1.207-5.92-2.581l-1.824%202.525c1.655%201.768%204.152%202.974%207.603%202.974zm15.648%200c4.349%200%206.986-3.227%206.986-7.126%200-3.872-2.637-7.098-6.986-7.098-4.293%200-6.958%203.227-6.958%207.098%200%203.9%202.665%207.126%206.958%207.126zm0-2.609c-2.497%200-3.9-2.104-3.9-4.517%200-2.385%201.403-4.489%203.9-4.489%202.525%200%203.928%202.104%203.928%204.489%200%202.413-1.403%204.517-3.928%204.517zm12.254%202.273v-18.713h-2.946v18.713h2.946zm4.405-15.207c1.01%200%201.824-.814%201.824-1.824%200-1.01-.814-1.824-1.824-1.824-.982%200-1.824.814-1.824%201.824%200%201.01.842%201.824%201.824%201.824zm1.487%2015.207v-13.551h-2.946v13.551h2.946zm15.648%200v-18.713h-2.946v7.042c-1.094-1.431-2.665-2.217-4.349-2.217-3.507%200-6.032%202.75-6.032%207.126%200%204.461%202.553%207.098%206.032%207.098%201.74%200%203.311-.842%204.349-2.188v1.852h2.946zm-6.453-2.273c-2.329%200-3.816-1.88-3.816-4.489%200-2.637%201.487-4.517%203.816-4.517%201.403%200%202.834.814%203.507%201.824v5.387c-.673%201.01-2.104%201.796-3.507%201.796z%22%20fill%3D%22%23333%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E" !default;
$close-icon: "%3Csvg%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Asketch%3D%22http%3A//www.bohemiancoding.com/sketch/ns%22%3E%3Ctitle%3EArtboard%201%3C/title%3E%3Cdesc%3ECreated%20with%20Sketch.%3C/desc%3E%3Cpath%20d%3D%22M256%20302.855l-187.452%20187.452c-12.952%2012.952-33.885%2012.907-46.823-.032-12.912-12.912-12.952-33.902-.032-46.823l187.452-187.452-187.452-187.452c-12.952-12.952-12.907-33.885.032-46.823%2012.912-12.912%2033.902-12.952%2046.823-.032l187.452%20187.452%20187.452-187.452c12.952-12.952%2033.885-12.907%2046.823.032%2012.912%2012.912%2012.952%2033.902.032%2046.823l-187.452%20187.452%20187.452%20187.452c12.952%2012.952%2012.907%2033.885-.032%2046.823-12.912%2012.912-33.902%2012.952-46.823.032l-187.452-187.452z%22/%3E%3C/svg%3E" !default;
$close-icon--thick: "%3Csvg%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Ctitle%3Eclose-thick%3C/title%3E%3Cpath%20d%3D%22M164.874%20258.048L50.198%20139.276c-25.597-25.597-25.597-63.48%200-89.078%2025.597-25.597%2063.48-25.597%2089.078%200l114.676%20114.676L368.628%2050.198c25.597-25.597%2068.09-25.597%2093.174%200%2025.597%2025.597%2025.597%2068.09%200%2093.174L347.126%20258.048l114.676%20114.676c25.597%2025.597%2025.597%2063.48%200%2089.078-25.597%2025.597-63.48%2025.597-89.078%200L258.048%20347.126%20143.372%20461.802c-25.597%2025.597-68.09%2025.597-93.174%200-25.597-25.597-25.597-68.09%200-93.174l114.676-110.58z%22%20fill%3D%22%234A4A4A%22%20fill-rule%3D%22evenodd%22/%3E%3C/svg%3E" !default;
$close-icon--light: "%3Csvg%20width%3D%22450%22%20height%3D%22450%22%20viewBox%3D%220%200%20450%20450%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Ctitle%3Eclose-thick%3C/title%3E%3Cpath%20d%3D%22M133.874%20227.048L19.198%20108.276C-6.4%2082.68-6.4%2044.796%2019.198%2019.198c25.597-25.597%2063.48-25.597%2089.078%200l114.676%20114.676L337.628%2019.198c25.597-25.597%2068.09-25.597%2093.174%200%2025.597%2025.597%2025.597%2068.09%200%2093.174L316.126%20227.048l114.676%20114.676c25.597%2025.597%2025.597%2063.48%200%2089.078-25.597%2025.597-63.48%2025.597-89.078%200L227.048%20316.126%20112.372%20430.802c-25.597%2025.597-68.09%2025.597-93.174%200-25.597-25.597-25.597-68.09%200-93.174l114.676-110.58z%22%20fill%3D%22%23B3B3B3%22%20fill-rule%3D%22evenodd%22/%3E%3C/svg%3E" !default;

// @TODO Remove in 3.0
$exclamation-circle: "%3Csvg%20width%3D%22488%22%20height%3D%22488%22%20viewBox%3D%220%200%20488%20488%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%09%3Cpath%20d%3D%22M244%200c-134.708%200-244%20109.292-244%20244s109.292%20244%20244%20244%20244-109.292%20244-244-109.292-244-244-244zm40.667%20396.182c0%205.719-4.448%2010.484-9.849%2010.484h-61c-5.719%200-10.484-4.766-10.484-10.484v-60.365c0-5.719%204.766-10.484%2010.484-10.484h61c5.401%200%209.849%204.766%209.849%2010.484v60.365zm-.635-109.292c-.318%204.448-5.083%207.943-10.802%207.943h-58.776c-6.036%200-10.802-3.495-10.802-7.943l-5.401-197.297c0-2.224.953-4.448%203.177-5.719%201.906-1.589%204.766-2.542%207.625-2.542h69.896c2.859%200%205.719.953%207.625%202.542%202.224%201.271%203.177%203.495%203.177%205.719l-5.719%20197.297z%22%20fill%3D%22%23e32%22/%3E%3C/svg%3E" !default;
