/* ==========================================================================

Variables.scss
========================================================================== */

// —————————– // // Table of Contents: // // 1. Colors // 2. Typography // 3. Globals // 4. Breakpoints // 5. Buttons // 6. Content // —————————–

// ========================================================================== // 1. Colors // ==========================================================================

$red: #962D27; $orange: #EB7F4C; $dark-orange: darken($orange, 2%); $yellow: #EBD15C; $green: #00e581; $blue: #377CAD; $pink: #FF3366;

// TODO: sort out the use of gray. use the sass-map version $neutral1: #F6F5F3; $neutral2: darken($neutral1, 2%); $neutral3: darken($neutral2, 2%); $neutral4: darken($neutral3, 2%); $neutral5: darken($neutral4, 2%); $neutral6: darken($neutral5, 2%); $neutral7: darken($neutral6, 2%); $neutral8: darken($neutral7, 2%); $neutral9: darken($neutral8, 2%); $neutral10: darken($neutral9, 2%);

$lightest-grey: #D9D9D9; $light-grey: #999999; $medium-grey: #595959; $dark-grey: #393939;

$gray-1: e5e5e5; $gray-2: ccc; $gray-3: bfbfbf; $gray-4: #999; $gray-5: #7f7f7f; $gray-6: #666; $gray-7: #4c4c4c; $gray-8: #333; $gray-9: #191919;

// Neutral Colors // use map-get($gray, #) for gray tones $white: fff; $gray: (

1: #e5e5e5,
2: #ccc,
3: #bfbfbf,
4: #959595,
5: #7f7f7f,
6: #666,
7: #464646,
8: #333,
9: #191919

); $black: #000;

$text: #292929; $light-text: a6a6a6; $body-bg: f4f9f9;

$gradient-blue: linear-gradient(to top right,#257491,#008b86);

// ========================================================================== // 2. Typography // ==========================================================================

/* $serif-font: Palatino, “Palatino Linotype”, “Palatino LT STD”, “Book Antiqua”, Georgia, serif; $sans-font: “proxima-nova”, “Helvetica Neue”, Helvetica, Arial, sans-serif; $font-family-monospace: Consolas, 'Liberation Mono', Courier, monospace; $icon-font: “Ionicons”;

$body-font-family: $serif-font;

$header-font-family: $sans-font; $header-font-weight: 700; $header-font-style: normal; $header-color: $black; $header-line-height: 1.4; $header-margin-bottom: 0.5rem; $header-text-rendering: optimizeLegibility;

$h1-size: 1.8rem; $h2-size: 1.6rem; $h3-size: 1.4rem; $h4-size: 1.2rem; $h5-size: 1rem; $h6-size: .8rem;

$header-small-font-color: rgba($header-color, .4); $paragraph-font-size: 1rem; $paragraph-lineheight: 1.6; $paragraph-margin: 1rem; $paragraph-text-rendering: optimizeLegibility; $paragraph-anchor-color: $primary-color;

$small-font-size: 80%;

$blockquote-color: $gray-5; $blockquote-padding: 2rem; $blockquote-border: 4px solid $primary-color;

// ========================================================================== // 3. Globals // ==========================================================================

$global-font-size: 100%; $global-lineheight: 1.5; $global-letter-spacing: .03em;

$body-bg: $white; $body-antialiased: true;

$global-width: rem-calc(1200);

$global-margin: 1rem; $global-padding: 1rem; $global-weight-normal: normal; $global-weight-bold: bold;

$global-transition: .2s all linear; $global-text-rendering: optimizeLegibility;

*/

$global-radius: 4px; $global-rounded: 999px;

// ========================================================================== // 4. Breakpoints // ==========================================================================

// Edit the breakpoints to your liking // When writing Sass, always use breakpoint variables if possible // Use the 'breakpoint-mixin' whenever possible to keep consistent // $small-breakpoint : 0; // should stay at zero $medium-breakpoint : 640px; $large-breakpoint : 800px; $xlarge-breakpoint : 1100px; $xxlarge-breakpoint : 1280px;

// Set to true for debugging message // See debugging message code in base/utilities/_breakpoint-debugger.scss $show-query: false;

// ========================================================================== // 5. Buttons // ==========================================================================

// ========================================================================== // 6. Content // ==========================================================================

$spacing-small: 1rem; $spacing-default: 2rem; $spacing-medium: 3rem; $spacing-large: 4rem;