/**
 * Variables
 *
 * `src/styles/varialbles.styl`
 *
 * Variables used in the styles of the demo pages.
 *
 * Weight: -100
 *
 * Styleguide: variables
 */

/**
 * Sizes
 *
 * $max-width - Max width of the page: set to `1000px`
 * $block-spacing - Spacing used for various block elements: set to `20px`
 *
 * Styleguide: variables.1
 */
$max-width = 1000px
$block-spacing = 20px

/**
 * Colors
 *
 * $main-color - Main color: set to `#dd6e6e`
 * $sub-color - Sub color: set to `#51997d`
 * $base-black - A color treated as black: set to `#333`
 * $border-opacity - Opacity used for borders: set to `0.3`
 *
 * Colors:
 * main - $main-color
 * sub - $sub-color
 * black - $base-black
 *
 * Styleguide: variables.2
 */
$main-color = #dd6e6e
$sub-color = #51997d
$base-black = #333
$border-opacity = 0.3

/**
 * Forms
 *
 * $form-input-spacing - Base padding for the form related elements: set to `0.5em`
 * $form-border-radius - Border radius of the form related elements: set to `3px`
 * $form-hover-opacity - Opacity setting for the form related elelemt at hover state: set to `0.8`
 *
 * Styleguide: variables.3
 */
$form-input-spacing = 0.5em
$form-border-radius = 3px
$form-hover-opacity = 0.8