//////////////////////////////
// Full list of all available variables: https://github.com/alienresident/style-tiles/blob/master/stylesheets/style-tiles/core/_variables.scss
//////////////////////////////

// Project Name and Version Header 
$project-name: "Sassy Style Tiles";
$version-number: "1.0";

/// Design Variables
// sample 5 colors and 3 textures (add figures to html for more)
$colors: #BEE8E0, #373C40, #2E2621, #73320B, #FF5E00;
$textures: "cotton-shirt.png", "denim.jpg";
$adjectives:  current, clean, sleek, technical ;

$link-color: #FF5E00;

$font-name: 'peraltaregular';
$font-file-name: 'Peralta/peralta-regular-webfont';


$body-background-color: #fff;
$body-background-image: "textures/cotton-shirt.png"; //replace with linen tile
$body-background-gradient-position-1: 90deg;
$body-background-gradient-1: rgba(242,40,40,.5) 24%, rgba(0,180,255,.35) 25%,rgba(0,180,255,.35) 50%, rgba(0,0,83,.5) 51%, rgba(0,0,83,.5) 74%, transparent 75%;
$body-background-gradient-position-2: 0deg;
$body-background-gradient-2: $body-background-gradient-1;
$body-background-size: calc-em(80px, $base-font-size) calc-em(80px, $base-font-size);
$body-background-repeat: repeat;

$page-background-color: #fff;
$page-background-image: "textures/denim.jpg";
$page-box-shadow: calc-em(5px, $base-font-size) calc-em(5px, $base-font-size) calc-em(10px, $base-font-size) rgba(0,0,0,.75), calc-em(-5px, $base-font-size) calc-em(5px, $base-font-size) calc-em(10px, $base-font-size) rgba(0,0,0,.75);
$page-corners: calc-em(5px, $base-font-size);
$page-margin: 0 auto ($standard-spacing * 4) auto;
$page-text-color: #ccc;

// Logo is added as a background. Adjust height and width and source
$logo-margin: 0 $standard-spacing $standard-spacing  0;
$logo-box-shadow: false;

$header-padding: $standard-spacing;
$header-background-color: false;
$header-background-image: false;
$header-background-gradient-position-1: bottom;
$header-background-gradient-1: false;
$header-background-gradient-position-2: top;
$header-background-gradient-2: false;
$header-text-color: #eee;

$heading-h1-font-color: rgba(255,160,20,.85);
$heading-h1-font-name: $font-name;
$heading-h1-font-size: calc-em(32px, $base-font-size);
$main-text-shadow: 0 calc-em(1px, $base-font-size) 0 rgba(255,255,255,.35);

$heading-h2-font-name: $font-name;

$aside-margin: 0 0 ($standard-spacing * 2) 0;
$aside-padding: ($standard-spacing * 2);
$aside-background-color: none;
$aside-background-image: "textures/denim.jpg";
$aside-background-gradient-position-1: 135deg;
$aside-background-gradient-1: false;
$aside-background-gradient-position-2: 45deg;
$aside-background-gradient-2: false;
$aside-background-size: false;
$aside-background-repeat: repeat;
$aside-box-shadow: calc-em(3px, $base-font-size) calc-em(6px, $base-font-size) calc-em(5px, $base-font-size) rgba(0,0,0,.5), calc-em(-3px, $base-font-size) calc-em(-1px, $base-font-size) calc-em(5px, $base-font-size) rgba(0,0,0,.5);
$aside-border: calc-em(1px, $base-font-size) dashed rgba(255,160,20,.5);
$aside-border-radius: calc-em(5px, $base-font-size) calc-em(5px, $base-font-size) calc-em(12px, $base-font-size) calc-em(12px, $base-font-size);
$aside-outline: $aside-border;
$aside-outline-offset: -1em;
$aside-text-color: #aaa;

// Figure (colors and textures boxes)
$figure-width: calc-em(40px, $base-font-size);
$figure-height: calc-em(40px, $base-font-size);
$texture-width: $figure-width * 2;
$texture-height: $figure-height * 2;
$figure-border: calc-em(1px, $base-font-size) #888 solid;
$figure-caption-text-size: calc-em(12px, $base-font-size);

$button-corners: calc-em(10px, $base-font-size);
$button-background-color: #FF5E00;
$button-gradient: true;
$button-text-color: #e5e5e5;
$button-font-size: 1.2em;
$button-text-shadow: 0 calc-em(1px, $base-font-size) calc-em(1px, $base-font-size) rgba(0,0,0,.5);
$button-border: calc-em(1px, $base-font-size) shade($button-background-color, 10%) solid;
$button-box-shadow: inset calc-em(2px, $base-font-size) calc-em(4px, $base-font-size) calc-em(5px, $base-font-size) rgba(0,0,0,.5);
$button-text-color-over: adjust-lightness($button-text-color, 10%);
$button-background-color-over: tint($button-background-color, 10%);

$footer-background-color: rgba(0,0,0,.25);
$footer-background-image: false;
$footer-text-color: rgba(255,255,255,.75);
$footer-text-shadow: calc-em(1px, $base-font-size) 0 calc-em(1px, $base-font-size) rgba(0,0,0,.5), 0 calc-em(1px, $base-font-size) calc-em(1px, $base-font-size) rgba(255,255,255,.35);