// ============================================================
//          SPECIFIC STYLE VARIABLES                                  
// ------------------------------------------------------------

// ---- General Colors ----

// Color can be modified with SASS Functions 
// http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html

$c-primary   : #2597e3 
$c-secondary : #0bcfed
$c-third     : #e74c3c
$c-fourth    : #f1c40f 
$c-fifth     : #9b59b6
$c-sixth     : #2ecc71

$c-alert     : #ef462a
$c-success   : #38cc3b
$c-warning   : #f5a11c
$c-highlight : #f8e64b

$c-black     : #212121
$c-white     : #fbfbfb
$c-darkgray  : #454545
$c-gray      : #a2a2a2
$c-lightgray : #d4d4d3
             
$c-body      : #fff

// ---- Typo Colors ----

//**
// @variable    $tc-text
// Description: Normal Text Color (used for p, body, lists)
// @datatype    {value}
// @usage       $tc-text: #000
//**
$tc-text              : lighten($c-black,10)

//**
// @variable    $tc-text-soft
// Description: A softer text color (used for p, body, lists eg.)
// @datatype    {value}
// @usage       $tc-text-soft: #ccc
//**
$tc-text-soft         : lighten($c-black,20)

//**
// @variable    $tc-heading
// Description: Text Color for Headings. With 'false' the Basetextcolor is used
// @datatype    {mix}
// @usage       $tc-heading: #ccc
//**
$tc-heading           : $c-primary

//**
// @variable    $tc-heading-sub
// Description: A colorvariant for the Headings. With 'false' the Basetextcolor is used
// @datatype    {mix}
// @usage       $tc-heading-sub: #ddd
//**
$tc-heading-sub       : darken($c-primary,5)

//**
// @variable    $tc-blockquote
// Description: Text Color for Quotes. With 'false' the Basetextcolor is used
// @datatype    {mix}
// @usage       $tc-blockquote: #ddd
//**
$tc-blockquote        : lighten($c-black,30)

//**
// @variable    $tc-caption
// Description: Text color for Image Captions. With 'false' the Basetextcolor is used
// @datatype    {mix}
// @usage       $tc-caption: #ddd
//**
$tc-caption           : lighten($c-black,30)

//**
// @variable    $tc-form-label 
// Description: Text Color for Labels. With 'false' the Basetextcolor is used
// @datatype    {mix}
// @usage       $tc-form-label : #000
//**
$tc-form-label            : lighten($c-black,30)

//**
// @variable    $tc-form-fieldset
// Description: Text Color for Fieldset. With 'false' the Basetextcolor is used
// @datatype    {mix}
// @usage       $tc-form-fieldset: #000
//**
$tc-form-fieldset         : lighten($c-black,30)

//**
// @variable    $tc-form-input
// Description: Text Color for all Inputfields and Textarea. With 'false' the Basetextcolor is used
// @datatype    {mix}
// @usage       $tc-form-input: #000
//**
$tc-form-input            : lighten($c-black,30)

//**
// @variable    $tc-form-placeholder
// Description: Text Color for Placeholder. With 'false' the Basetextcolor is used
// @datatype    {mix}
// @usage       $tc-form-placeholder: #000
//**
$tc-form-placeholder      : lighten($c-black,40)

//**
// @variable    $tc-highlight
// Description: Style the Highlight. 
// @datatype    {list}
// @usage       $tc-highlight: backgroundcolor textcolor
//**
$tc-highlight         : $c-highlight lighten($c-black,15)

// ---- Links ----

//**
// @variable    $tc-link
// Description: Color the Link States
// @datatype    {list}
// @usage       $tc-link: linkcolor hovercolor activecolor
//**
$tc-link              : $c-primary lighten($c-primary,5) lighten($c-primary,5)

//**
// @variable    $tc-decoration
// Description: Style the Link Decoration
// @datatype    {list}
// @usage       $tc-decoration: linkdeco hoverdeco
//**
$tc-decoration           : false true 

// ---- Typo Style ----

// Instead of defining the FontFamily itself, can also be called function font stack.

//**
// @variable    $font-style-text
// Description: Font Family and Font Weight for base Texts
// @datatype    {mix} fontfamily fontweight - the last argument can 'false'
// @usage       $font-style-text: ff("Helvetica Neue") normal
//**
$font-style-text         : ff("Helvetica Neue") normal

//**
// @variable    $font-style-bold 
// Description: Font Family and Font Weight for Bold Text
// @datatype    {mix} fontfamily fontweight [or: false]
// @usage       $font-style-bold : false normal
//**
$font-style-bold         : false bold

//**
// @variable    $font-style-italic 
// Description: Font Family and Font Weight for Italic Text
// @datatype    {mix} fontfamily fontweight [or: false]
// @usage       $font-style-italic : false normal
//**
$font-style-italic       : false italic

//**
// @variable    $font-heading-family
// Description: Font Family for Headings, can be 'false'
// @datatype    {mix}
// @usage       $font-heading-family: arial, sans-serif
//**
$font-heading-family     : ff("Futura")

//**
// @variable    $font-heading-weight
// Description: The Font Weight for h2, h3, h4, h5, h5 - every argument disable with 'false'
// @datatype    {mix}
// @usage       $font-heading-weight: 600 600 600 600 false false
//**
$font-heading-weight     : 100 100 100 100 100 100

//**
// @variable    $font-style-quote
// Description: Font Family and Font Weight for Quotes
// @datatype    {mix} fontfamily fontweight [or: false]
// @usage       $font-style-quote: ff("Garamond") normal
//**
$font-style-quote        : ff("Garamond") false false

//**
// @variable    $font-style-caption
// Description: Font Family and Font Weight for Captions
// @datatype    {mix} fontfamily fontweight [or: false]
// @usage       $font-style-caption: false normal
//**
$font-style-caption      : false false

//**
// @variable    $font-style-code
// Description: Font Family and Font Weight for Code Elements
// @datatype    {mix} fontfamily fontweight [or: false]
// @usage       $font-style-code: ff("monospace") normal
//**
$font-style-code         : ff("monospace") normal

//**
// @variable    $hr-style-color
// Description: Styling the HR (Border Style)
// @datatype    {mix} Width, Style, Color
// @usage       $hr-style-color: 1px dashed #eee
//**
$hr-style-color      : 1px dashed #eee

//**
// @variable    $round-normal
// Description: Normal rounding value
// @datatype    {value}
// @usage       $round-normal: 4
//**
$round-normal        : 4

//**
// @variable    $round-slight
// Description: Slight rounding value, can be 'false'
// @datatype    {value}
// @usage       $round-slight: false
//**
$round-slight        : false

//**
// @variable    $round-light
// Description: Light rounding value, can be 'false'
// @datatype    {value}
// @usage       $round-light: false
//**
$round-light             : false

//**
// @variable    $image-dir-single
// Description: Directory of the Single Images (Retina Images must have @2x at the end)
// @datatype    {string}
// @usage       $image-dir-single: single
//**
$image-dir-single        : single

//**
// @variable    $image-dir-textures
// Description: Directory of the Texture Images (Retina Images must have @2x at the end)
// @datatype    {string}
// @usage       $image-dir-textures: textures
//**
$image-dir-textures      : textures

<% if (spriteName != false) { %>
//**
// @variable    $image-dir-sprite
// Description: Directory of the Sprite Images (Retina Images come in the same named folder with a -2x at the end)
// @datatype    {string}
// @usage       $image-dir-sprite: mysprites
//**
$image-dir-sprite        : <%= spriteName %>
<% } else { %>
//**
// @variable    $image-dir-sprite
// Description: Directory of the Sprite Images (Retina Images come in the same named folder with a -2x at the end)
// @datatype    {string}
// @usage       $image-dir-sprite: mysprites
//**
$image-dir-sprite        : false
<% } %>

<% if (useSpriteRetina) { %>
//**
// @variable    $image-sprite-retina
// Description: Activate the Retina Sprite Generation
// @datatype    {boolean}
// @usage       $image-sprite-retina: true
//**
$image-sprite-retina     : true
<% } else { %>
//**
// @variable    $image-sprite-retina
// Description: Activate the Retina Sprite Generation
// @datatype    {boolean}
// @usage       $image-sprite-retina: true
//**
$image-sprite-retina     : false
<% } %>

//**
// @variable    $image-inline-svg-out
// Description: When activated the inline SVG Images compiled in a external CSS File (SVGSprite)
// @datatype    {boolean}
// @usage       $image-inline-svg-out: true
//**
$image-inline-svg-out    : false

<% if(useIconfont != false) { %>
//**
// @variable    $icon-font-name
// Description: The Fontname for the Iconfont
// @datatype    {string}
// @usage       $icon-font-name: false
//**
$icon-font-name          : <%= useIconfont %>
<% } else { %>
//**
// @variable    $icon-font-name
// Description: The Fontname for the Iconfont
// @datatype    {string}
// @usage       $icon-font-name: false
//**
$icon-font-name          : false
<% } %>
// ---- Buttons ----

//**
// @variable    $btn-border
// Description: Set the Width of the Button Border
// @datatype    {list} Borderwidth as array - when false it generate on Button Border Class
// @usage       $btn-border: 1 2 3
//**
$btn-border              : 1 2 4

//**
// @variable    $btn-c-primary
// Description: Color Values Button Primary (the Hover can be 'false')
// @datatype    {list} background-normal, border-normal, fontcolor-normal, background-hover, border-hover, fontcolor-hover
// @usage       $btn-c-primary: #aaa #bbb #ccc false false false
//**
$btn-c-primary            : $c-primary darken($c-primary,4) #fff darken($c-primary,5) darken($c-primary,8) #fff

//**
// @variable    $btn-c-secondary
// Description: Color Values Button secondary (the Hover can be 'false'), when first Value == 'false' button is not compiled
// @datatype    {list} background-normal, border-normal, fontcolor-normal, background-hover, border-hover, fontcolor-hover
// @usage       $btn-c-secondary: #aaa #bbb #ccc false false false
//**
$btn-c-secondary          : $c-secondary darken($c-secondary,4) #fff darken($c-secondary,5) darken($c-secondary,8) #fff    

//**
// @variable    $btn-c-third
// Description: Color Values Button third (the Hover can be 'false'), when first Value == 'false' button is not compiled
// @datatype    {list} background-normal, border-normal, fontcolor-normal, background-hover, border-hover, fontcolor-hover
// @usage       $btn-c-third: #aaa #bbb #ccc false false false
//**
$btn-c-third              : $c-third darken($c-third,4) #fff darken($c-third,5) darken($c-third,8) #fff  

//**
// @variable    $btn-c-fourth
// Description: Color Values Button fourth (the Hover can be 'false'), when first Value == 'false' button is not compiled
// @datatype    {list} background-normal, border-normal, fontcolor-normal, background-hover, border-hover, fontcolor-hover
// @usage       $btn-c-fourth: #aaa #bbb #ccc false false false
//**
$btn-c-fourth              : $c-fourth darken($c-fourth,4) #fff darken($c-fourth,5) darken($c-fourth,8) #fff 

//**
// @variable    $btn-c-fifth
// Description: Color Values Button fifth (the Hover can be 'false'), when first Value == 'false' button is not compiled
// @datatype    {list} background-normal, border-normal, fontcolor-normal, background-hover, border-hover, fontcolor-hover
// @usage       $btn-c-fifth: #aaa #bbb #ccc false false false
//**
$btn-c-fifth              : $c-fifth darken($c-fifth,4) #fff darken($c-fifth,5) darken($c-fifth,8) #fff 

//**
// @variable    $btn-c-sixth
// Description: Color Values Button sixth (the Hover can be 'false'), when first Value == 'false' button is not compiled
// @datatype    {list} background-normal, border-normal, fontcolor-normal, background-hover, border-hover, fontcolor-hover
// @usage       $btn-c-sixth: #aaa #bbb #ccc false false false
//**
$btn-c-sixth              : $c-sixth darken($c-sixth,4) #fff darken($c-sixth,5) darken($c-sixth,8) #fff 

//**
// @variable    $btn-c-alert
// Description: Color Values Button alert (the Hover can be 'false'), when first Value == 'false' button is not compiled
// @datatype    {list} background-normal, border-normal, fontcolor-normal, background-hover, border-hover, fontcolor-hover
// @usage       $btn-c-alert: #aaa #bbb #ccc false false false
//**
$btn-c-alert              : $c-alert darken($c-alert,4) #fff darken($c-alert,5) darken($c-alert,8) #fff  

//**
// @variable    $btn-c-success
// Description: Color Values Button success (the Hover can be 'false'), when first Value == 'false' button is not compiled
// @datatype    {list} background-normal, border-normal, fontcolor-normal, background-hover, border-hover, fontcolor-hover
// @usage       $btn-c-success: #aaa #bbb #ccc false false false
//**
$btn-c-success            : $c-success darken($c-success,4) #fff darken($c-success,5) darken($c-success,8) #fff  

//**
// @variable    $btn-c-warning
// Description: Color Values Button warning (the Hover can be 'false'), when first Value == 'false' button is not compiled
// @datatype    {list} background-normal, border-normal, fontcolor-normal, background-hover, border-hover, fontcolor-hover
// @usage       $btn-c-warning: #aaa #bbb #ccc false false false
//**
$btn-c-warning            : $c-warning darken($c-warning,4) #fff darken($c-warning,5) darken($c-warning,8) #fff 

//**
// @variable    $btn-c-gray
// Description: Color Values Button gray (the Hover can be 'false'), when first Value == 'false' button is not compiled
// @datatype    {list} background-normal, border-normal, fontcolor-normal, background-hover, border-hover, fontcolor-hover
// @usage       $btn-c-gray: #aaa #bbb #ccc false false false
//**
$btn-c-gray         : $c-lightgray darken($c-lightgray,4) $c-darkgray darken($c-lightgray,5) darken($c-lightgray,8) $c-darkgray
// ---- Forms ----

// $form-label: 

//**
// @variable    $form-input-style
// Description: Styling the Input and Textarea Fields
// @datatype    {list} background-color, text color, background-color:focus, text-color:focus
// @usage       $form-input-style: #f2f2f2 #686868 #eaeaea #4c4c4c
//**
$form-input-style         : #f5f5f5 #999 #fefefe #4c4c4c

//**
// @variable    $form-placeholder
// Description: Coloring the Placeholder
// @datatype    {value} Color
// @usage       $form-placeholder: #bbb
//**
$form-placeholder         : #bbb

//**
// @variable    $form-input-border
// Description: Styling the Input Border
// @datatype    {list} Width, Color
// @usage       $form-input-border: 1px #ddd
//**
$form-input-border        : 1px #ddd

//**
// @variable    $form-input-label
// Description: Styling the Label
// @datatype    {list} Fontsize, Color, Padding-bottom
// @usage       $form-input-label: 16 #aaa 4
//**
$form-input-label         : 16 #aaa 4

//**
// @variable    $form-input-label-block
// Description: Styling a Label BoxBlock
// @datatype    {list} Text Color, Background Color
// @usage       $form-input-label-block: #c4c4c4 #fdfdfd 
//**
$form-input-label-block   : #c4c4c4 #fdfdfd

//**
// @variable    $sidr-font-size
// Description: Fontsize of the Sidr Sidebar Menu
// @datatype    {value}
// @usage       $sidr-font-size: 15
//**  
$sidr-font-size           : 15

//**
// @variable    $sidr-background
// Description: Sidr Background Color
// @datatype    {Value} Background Color
// @usage       $sidr-background: #333
//**
$sidr-background      : #333

//**
// @variable    $sidr-shadow-color
// Description: Color of the Shadow
// @datatype    {value} Shadow Color
// @usage       $sidr-shadow-color: #222
//**
$sidr-shadow-color        : #222

//**
// @variable    $sidr-text-color
// Description: Font Color of the Sidr Sidebar
// @datatype    {value}
// @usage       $sidr-text-color: #fff
//**
$sidr-text-color          : #FFF


//**
// @variable    $spinner-hole-color
// Description: Hole Color 
// @datatype    {value}
// @usage       $spinner-hole-color: transparent
//**
$spinner-hole-color: transparent

//**
// @variable    $spinner-size
// Description: Size of the Spinner
// @datatype    {value}
// @usage       $spinner-size: 46
//**
$spinner-size: 46

//**
// @variable    $spinner-bkg-color-light
// Description: Background Color Light
// @datatype    {value}
// @usage       $spinner-bkg-color-light: #ddd
//**
$spinner-bkg-color-light: #ddd

//**
// @variable    $spinner-bkg-color-dark
// Description: Background Color dark
// @datatype    {value}
// @usage       $spinner-bkg-color-dark: red
//**
$spinner-bkg-color-dark: $c-primary

//**
// @variable    $spinner-opacity
// Description: Spinner Opacity
// @datatype    {value}
// @usage       $spinner-opacity: 0.8
//**
$spinner-opacity: .8

//**
// @variable    $spinner-duration
// Description: Spinner animation duration
// @datatype    {value}
// @usage       $spinner-duration: 3s
//**
$spinner-duration: 3s