// ============================================================
//          BASE STYLE VARIABLES                                  
// ------------------------------------------------------------

//**
// @variable    $style-variant 
// Description: The Styling direction (Single CSS, Split CSS or Child CSS)
// @datatype    {boolean} [true / false]
// @usage       $style-variant: true
//**
$style-variant              : '<%= styleVariant %>'

// ---- Activate ----

//**
// @variable    $activate-grid
// Description: Activate the Grid System
// @datatype    {boolean} [true / false]
// @usage       $activate-grid: true
//**
$activate-grid              : true

//**
// @variable    $activate-box-sizing
// Description: Use the new Box Model box-sizing: border-box. Attention with IE7 (dosent Support Box-Sizing)
// @datatype    {boolean} [true / false]
// @usage       $activate-box-sizing: true
//**
$activate-box-sizing        : true

//**
// @variable    $activate-baseline
// Description: Use the Baseline for height calculation
// @datatype    {boolean} [true / false]
// @usage       $activate-baseline: true
//**
$activate-baseline          : false

//**
// @variable    $activate-antialias
// Description: Activate the Browser Antialias for Fonts
// @datatype    {boolean} [true / false]
// @usage       $activate-antialias: true
//**
$activate-antialias         : true

// ---- Compatibility ----

<% if (compIE7) { %>
//**
// @variable    $comp-ie7
// Description: Include some IE7 Fallbacks CSS2.1
// @datatype    {boolean} [true / false]
// @usage       $comp-ie7: true
//**
$comp-ie7                 : true
<% } else { %>
//**
// @variable    $comp-ie7
// Description: Include some IE7 Fallbacks CSS2.1
// @datatype    {boolean} [true / false]
// @usage       $comp-ie7: true
//**
$comp-ie7                 : false
<% } %>

<% if (compIE8) { %>
//**
// @variable    $comp-ie8
// Description: Include some Fallbacks CSS2.1 / CSS3
// @datatype    {boolean} [true / false]
// @usage       $comp-ie8: true
//**
$comp-ie8                 : true
<% } else { %>
//**
// @variable    $comp-ie8
// Description: Include some Fallbacks CSS2.1 / CSS3
// @datatype    {boolean} [true / false]
// @usage       $comp-ie8: true
//**
$comp-ie8                 : false
<% } %>

//**
// @variable    $comp-webkit
// Description: Activate the Webkit Prefixes for CSS3
// @datatype    {boolean} [true / false]
// @usage       $comp-webkit: true
//**
$comp-webkit              : true

//**
// @variable    $comp-opera
// Description: Activate the Opera Prefixes for CSS3
// @datatype    {boolean} [true / false]
// @usage       $comp-opera: true
//**
$comp-opera               : false

//**
// @variable    $comp-mozilla
// Description: Activate the Mozilla Prefixes for CSS3
// @datatype    {boolean} [true / false]
// @usage       $comp-mozilla: true
//**
$comp-mozilla             : true

//**
// @variable    $comp-ms
// Description: Activate the Microsoft Prefixes for CSS3
// @datatype    {boolean} [true / false]
// @usage       $comp-ms: true
//**
$comp-ms                  : true

<% if (compBoxSizing) { %>
//**
// @variable    $comp-borderbox
// Description: Starts a Fallback for IE7 when the new Box Model is activated
// @datatype    {boolean} [true / false]
// @usage       $comp-borderbox: true
//**
$comp-borderbox           : true
<% } else { %>
//**
// @variable    $comp-borderbox
// Description: Starts a Fallback for IE7 when the new Box Model is activated
// @datatype    {boolean} [true / false]
// @usage       $comp-borderbox: true
//**
$comp-borderbox           : false
<% } %>

<% if (bowerBackgroundSize) { %>
//**
// @variable    $comp-background-size
// Description: Activate the Background Size Fallback
// @datatype    {boolean} [true / false]
// @usage       $comp-background-size: true
//**
$comp-background-size           : true
<% } else { %>
//**
// @variable    $comp-background-size
// Description: Activate the Background Size Fallback
// @datatype    {boolean} [true / false]
// @usage       $comp-background-size: true
//**
$comp-background-size           : false
<% } %>

//**
// @variable    $comp-unresponsive-browser
// Description: Set the Browser without a responsive Behavior (ie7, ie8) - with true browser is unresponsive
// @datatype    {list} ie7, ie8
// @usage       $comp-unresponsive-browser: true true
//**
$comp-unresponsive-browser: true true

//**
// @variable    $comp-unresponsive-size
// Description: Set the unresponsive Size (for old Browsers) - when the two values the same the layout is static
// @datatype    {list} Max-Width, Min-Width
// @usage       $comp-unresponsive-size: 1100 860
//**
$comp-unresponsive-size   : 1100 1100

//**
// @variable    $comp-polyfill-path
// Description: Path to Polyfils (start from Root without Slashes at begin and end) 
// @datatype    {string}
// @usage       $comp-polyfill-path: 'js/polyfills'
//**
$comp-polyfill-path     : '<%= jsfolder %>'

//**
// @variable    $comp-absolute-path
// Description: The Absolute Path to Page Dir (root)
// @datatype    {string}
// @usage       $comp-absolute-path: 'http://localhost/saffron/'
//**
$comp-absolute-path       : '<%= absolutePath %>'

<% if (compCss3Pie) { %>
//**
// @variable    $comp-css3pie
// Description: Only needed to set the Directory in the HTML Tag
// @datatype    {boolean}[true / false]
// @usage       $comp-css3pie: true
//**
$comp-css3pie             : true
<% } else { %>
//**
// @variable    $comp-css3pie
// Description: Only needed to set the Directory in the HTML Tag
// @datatype    {boolean}[true / false]
// @usage       $comp-css3pie: true
//**
$comp-css3pie             : false
<% } %>
// ---- Breakpoints ----

//**
// @variable    $breakpoints
// Description: List of Breakpoints for the Layout
// @datatype    {value}
// @usage       $breakpoints: 0px 320px 480px 760px 1024px 1180px
//**
$breakpoints              : 0px 320px 480px 760px 1024px 1180px
$slicer-breakpoints       : $breakpoints

//**
// @variable    $responsive-fonts
// Description: Should use the responsive Fontscaling
// @datatype    {boolean} 
// @usage       $responsive-fonts: true
//**
$responsive-fonts         : true

//**
// @variable    $res-fontsize
// Description: List of the Fontscaling based on the Breakpoint list
// @datatype    {value} Zero Values not rendered in CSS
// @usage       $res-fontsize: 60 70 85 90 95 100 
//**
$res-fontsize             : 60  70     85    90    95     100 

//**
// @variable    $mobile-first
// Description: When the responsive behavior is oriented to mobile first - set it on true
// @datatype    {boolean} 
// @usage       $mobile-first: false
//**
$mobile-first             : false 

//**
// @variable    $bp-desktop
// Description: End Width of Desktop
// @datatype    {value}
// @usage       $bp-desktop: 1180
//**
$bp-desktop           : bp(6)

//**
// @variable    $bp-tablet
// Description: End Width of a Tablet
// @datatype    {value}
// @usage       $bp-tablet: 1024
//**
$bp-tablet            : bp(5)

//**
// @variable    $bp-small-tablet
// Description: Start Width of a Tablet
// @datatype    {value}
// @usage       $bp-small-tablet: 768
//**
$bp-small-tablet      : bp(4)

//**
// @variable    $bp-mobile
// Description: End Width from Mobile
// @datatype    {value}
// @usage       $bp-mobile: 480
//**
$bp-mobile            : bp(3)

//**
// @variable    $site-minimal-width
// Description: The smallest width of the Site - so the site not scale to 0
// @datatype    {value}
// @usage       $site-minimal-width: 320
//**
$site-minimal-width    : bp(2)

// ---- Grid ----

//**
// @variable    $site-position
// Description: The Main Position of the Site - can be left (default), center or right. The Second argument is needed to set the Margin for left/right
// @datatype    {list} position - margin
// @usage       $site-position: center
//**
$site-position        : center 20

//**
// @variable    $layout-fluid-behavior
// Description: First Layout Behavior - when the second value is 'false' the site is static. 
// @datatype    {list}
// @usage       $layout-fluid-behavior: 1180 767
//**
$layout-fluid-behavior  : $bp-desktop  $bp-small-tablet 

//**
// @variable    $layout-base-style
// Description: The Base Grid Layout Style
// @datatype    {list} columns, columgutter, sitegutter
// @usage       $layout-base-style: arguments
//**
$layout-base-style      : 16 10 20

//**
// @variable    $layout-second-grid 
// Description: The Extended Grid - first argument 'false' deactivate second grid
// @datatype    {list} startwidth, columns ,columsgutter, sitegutter,
// @usage       $layout-second-grid : 700 10 
//**
$layout-second-grid     : ($bp-small-tablet - 1) 8 10 10 

//**
// @variable    $grid-offset-option
// Description: When you need an offset Class, to push your colums more, activate it
// @datatype    {boolean}
// @usage       $grid-offset-option: false
//**
$grid-offset-option     : false

//**
// @variable    $grid-pushpull-option 
// Description: Activates the Push and Pull Classes
// @datatype    {boolean}
// @usage       $grid-pushpull-option : true
//**
$grid-pushpull-option   : false

//**
// @variable    $grid-height-generate
// Description: Generate Height and Margin Classes. Normaly based on the Baseline when active, is not active the Variable $spacing-vertical used for the Calculation
// @datatype    {list} Number of height Classes / Number of Margin Classes / Number of Padding Classes / Small Size Classes
// @usage       $grid-height-generate: 10 5 4 true
//**
$grid-height-generate    : 2 2 2 true

//**
// @variable    $grid-res-height-generate
// Description: Generate Responsive Height and Margin Classes. Normaly based on the Baseline when active, is not active the Variable $spacing-vertical used for the Calculation
// @datatype    {list} Number of height Classes / Number of Margin Classes / Number of Padding Classes / Small Size Classes
// @usage       $grid-res-height-generate: 10 5 5 true
//**
$grid-res-height-generate: 0 0 0 true

//**
// @variable    $grid-blockgrid
// Description: Generate a regulated Blockgrid. First argument must heigher than 1 to activate
// @datatype    {list} Max Blocks, Gutter
// @usage       $grid-blockgrid: 10 10
//**
$grid-blockgrid          : 0 10 

//**
// @variable    $visibility-classes
// Description: Generate responsive visibility and hidden classes
// @datatype    {boolean} activate with true
// @usage       $visibility-classes: false
//**
$visibility-classes      : false

// ---- Typography Globals ----

//**
// @variable    $body-font-size
// Description: Set the Base fontsize
// @datatype    {value} in px
// @usage       $body-font-size: 16
//**
$body-font-size           : 16

//**
// @variable    $body-line-height
// Description: Set the Base Lineheight - needed for Baseline
// @datatype    {value}
// @usage       $body-line-height: 20
//**
$body-line-height         : 20

//**
// @variable    $body-typo-based 
// Description: Set the Font Size Value - REM With PX Fallback
// @datatype    {value} "px" or "rem"
// @usage       $body-typo-based : px
//**
$body-typo-based          : rem

<% if (bowerRemToPx) { %>
//**
// @variable    $rem-js-fallback 
// Description: Set on true when the Fallback comes over the REMtoPx Polyfill
// @datatype    {boolean} "px" or "rem"
// @usage       $rem-js-fallback : false
//**
$rem-js-fallback          : true
<% } else { %>
//**
// @variable    $rem-js-fallback 
// Description: Set on true when the Fallback comes over the REMtoPx Polyfill
// @datatype    {boolean} "px" or "rem"
// @usage       $rem-js-fallback : false
//**
$rem-js-fallback          : false
<% } %>  

//**
// @variable    $body-font-scale
// Description: Set the percentage Font Scaling
// @datatype    {value}
// @usage       $body-font-scale: 100
//**
$body-font-scale          : 100


// ---- Headings ----
// The sizes based on px, there can be dynamic resized

//**
// @variable    $font-h1-style
// Description: Styles the h1
// @datatype    {list}
// @usage       $font-h1-style: fontsize lineheight margin
//**
$font-h1-style            : 38 42 15

//**
// @variable    $font-h2-style
// Description: Styles the h2
// @datatype    {list}
// @usage       $font-h2-style: fontsize lineheight margin
//**
$font-h2-style            : 34 38 15

//**
// @variable    $font-h3-style
// Description: Style the h3
// @datatype    {list}
// @usage       $font-h3-style: fontsize lineheight margin
//**
$font-h3-style            : 30 34 15

//**
// @variable    $font-h4-style
// Description: Style the h4
// @datatype    {list}
// @usage       $font-h4-style: fontsize lineheight margin
//**
$font-h4-style            : 26 30 15

//**
// @variable    $font-h5-style
// Description: Style the h5
// @datatype    {list}
// @usage       $font-h5-style: fontsize lineheight margin
//**
$font-h5-style            : 22 26 15

//**
// @variable    $font-h6-style
// Description: Style the h6
// @datatype    {list}
// @usage       $font-h6-style: fontsize lineheight margin
//**
$font-h6-style            : 18 22 15

// ---- Paragraph ----

//**
// @variable    $font-p-style
// Description: Style the Paragraph, Size and Lineheight can be disabled with 'false'
// @datatype    {list}
// @usage       $font-p-style: fontsize lineheight margin
//**
$font-p-style           : $body-font-size $body-line-height 10

//**
// @variable    $font-ul-style 
// Description: Style the UL, Size and Lineheight can be disabled with 'false'
// @datatype    {list}
// @usage       $font-ul-style : fontsize lineheight margin
//**
$font-ul-style          : $body-font-size $body-line-height 10

//**
// @variable    $font-blockquote-style 
// Description: Style the blockquote, Size and Lineheight can be disabled with 'false'
// @datatype    {list}
// @usage       $font-blockquote-style : fontsize lineheight margin
//**

$font-blockquote-style  : ($body-font-size + 4) ($body-line-height + 4) 10 

//**
// @variable    $font-cite-style 
// Description: Style the cite, Size and Lineheight can be disabled with 'false'
// @datatype    {list}
// @usage       $font-cite-style : fontsize lineheight
//**
$font-cite-style        : ($body-font-size - 2) ($body-line-height - 2) 

// ---- HR ----

//**
// @variable    $hr-style 
// Description: Style the HR can be disabled with 'false'
// @datatype    {list}
// @usage       $hr-style : margin-bottom
//**
$hr-style               : 20

// ---- Code ----

//**
// @variable    $font-code-style
// Description: Styling Code Elements
// @datatype    {list}
// @usage       $font-code-style: fontsize lineheight margin
//**
$font-code-style        : 14 16 10

//**
// @variable    $font-quote-style
// Description: Styling Quote Elements
// @datatype    {list}
// @usage       $font-quote-style: fontsize lineheight margin
//**
$font-quote-style       : 20 22 10

// ---- Global Spacing Unit ----

$spacing-vertical       : 20
$spacing-vertical-half  : 10
$spacing-horizontal     : 20
$spacing-allsides       : 20
$spacing-half-allsides  : 10

$arrow-size : 6px

// ---- Buttons ----

//**
// @variable    $btn-size-alpha
// Description: Layout for a Button - Padding Values with PX can automatical convert in REM when needed
// @datatype    {list} Fontsize, Fontweight, Padding Vert, Padding Horz
// @usage       $btn-size-alpha: 13 normal 2 5
//**
$btn-size-alpha       : 13 normal 2px 5px

//**
// @variable    $btn-size-bravo
// Description: Layout for a Button - Padding Values with PX can automatical convert in REM when needed
// @datatype    {list} Fontsize, Fontweight, Padding Vert, Padding Horz
// @usage       $btn-size-bravo: 13 normal 2 5
//**
$btn-size-bravo       : 14 normal 5px 10px

//**
// @variable    $btn-size-charlie
// Description: Layout for a Button - Padding Values with PX can automatical convert in REM when needed
// @datatype    {list} Fontsize, Fontweight, Padding Vert, Padding Horz
// @usage       $btn-size-charlie: 13 normal 2 5
//**
$btn-size-charlie        : 17 normal 8px 15px

//**
// @variable    $btn-size-delta
// Description: Layout for a Button - Padding Values with PX can automatical convert in REM when needed
// @datatype    {list} Fontsize, Fontweight, Padding Vert, Padding Horz
// @usage       $btn-size-delta: 13 normal 2 5
//**
$btn-size-delta         : 20 normal 12px 20px

//**
// @variable    $btn-size-echo
// Description: Layout for a Button - Padding Values with PX can automatical convert in REM when needed
// @datatype    {list} Fontsize, Fontweight, Padding Vert, Padding Horz
// @usage       $btn-size-echo: 13 normal 2 5
//**
$btn-size-echo          : 24 normal 15px 26px

// ---- Formelements ----

//**
// @variable    $input-size-alpha
// Description: Layout for the Input Fields - Padding Values with PX can automatical convert in REM when needed 
// @datatype    {list} Fontsize, Padding-Top/Bottom, Padding-Left/Right
// @usage       $input-size-alpha: 13 3 5
//**
$input-size-alpha       : 13 nth($btn-size-alpha,3) 5

//**
// @variable    $input-size-bravo
// Description: Layout for the Input Fields - Padding Values with PX can automatical convert in REM when needed 
// @datatype    {list} Fontsize, Padding-Top/Bottom, Padding-Left/Right
// @usage       $input-size-bravo: 13 3 5
//**
$input-size-bravo       : 14 nth($btn-size-bravo,3) 7px

//**
// @variable    $input-size-charlie
// Description: Layout for the Input Fields - Padding Values with PX can automatical convert in REM when needed 
// @datatype    {list} Fontsize, Padding-Top/Bottom, Padding-Left/Right
// @usage       $input-size-charlie: 13 3 5
//**
$input-size-charlie      : 17 nth($btn-size-charlie,3) 10px

//**
// @variable    $input-size-delta
// Description: Layout for the Input Fields - Padding Values with PX can automatical convert in REM when needed 
// @datatype    {list} Fontsize, Padding-Top/Bottom, Padding-Left/Right
// @usage       $input-size-delta: 13 3 5
//**
$input-size-delta       : 20 nth($btn-size-delta,3) 15px

//**
// @variable    $input-size-echo
// Description: Layout for the Input Fields - Padding Values with PX can automatical convert in REM when needed 
// @datatype    {list} Fontsize, Padding-Top/Bottom, Padding-Left/Right
// @usage       $input-size-echo: 13 3 5
//**
$input-size-echo        : 26 nth($btn-size-echo,3) 20px

// ---- Helper ----

//**
// @variable    $helper-baseline
// Description: Activate the Baseline Helper
// @datatype    {boolean} [true / false]
// @usage       $helper-baseline: false
//**
$helper-baseline           : false

//**
// @variable    $helper-highlight-frame
// Description: Highlight the Frame Elements
// @datatype    {boolean} [true / false]
// @usage       $helper-highlight-frame: false
//**
$helper-highlight-frame    : false

//**
// @variable    $helper-highlight-layout
// Description: Highlight the Layout Elements
// @datatype    {boolean} [true / false]
// @usage       $helper-highlight-layout: false
//**
$helper-highlight-layout   : false

//**
// @variable    $helper-highlight-modules
// Description: Hightlight all Modules Elements
// @datatype    {boolean} [true / false]
// @usage       $helper-highlight-modules: false
//**
$helper-highlight-modules  : false

//**
// @variable    $helper-highlight-elements
// Description: Highlight all Elements, like tags
// @datatype    {boolean} [true / false]
// @usage       $helper-highlight-elements: false
//**
$helper-highlight-elements : false

//**
// @variable    $helper-hightlight-grid
// Description: Highlight all grid classes with colors
// @datatype    {boolean}
// @usage       $helper-hightlight-grid: false
//**
$helper-hightlight-grid    : false