// =========== Settings

// Most of the variables are based on some kind of percentages to maintain stability.
// So $variable-10 is small or light and $variable-100 is big or dark.


// Set your own font
$font-family-body: "Source Sans Pro", sans-serif;
$font-family-heading: "Source Sans Pro";

// The base font-size, all other elements will adjust to this value
$font-size-base: 15px;

$font-size-10: 0.75rem;
$font-size-20: 0.875rem;
$font-size-30: 1rem;
$font-size-40: 1.125rem;
$font-size-50: 1.313rem;
$font-size-60: 1.5rem;
$font-size-70: 1.625rem;
$font-size-80: 1.75rem;
$font-size-100: 2rem;

// The grid columns will be used in the grid mixin, 48 is standard
$grid-columns: 48;


// Adjust the website's maximum width.
$max-width: 85rem;


// Use the spacing variable on margins and paddings
$spacing: 1rem;


// Adjust the border-radius
$border-radius-10: 0.125rem;
$border-radius-20: 0.313rem;


// Media queries
// Adjust them to you needs or add more
$breakpoint-property: min-width;
$breakpoint-10: 590px;
$breakpoint-20: 769px;
$breakpoint-30: 960px;
$breakpoint-40: 1152px;

// Z-index plan
$z-index-10: 10;
$z-index-20: 20;
$z-index-30: 30;


// Colors
// Add your own color variables

// Color brand
$color-brand-40: darken(#FF9925, 25%);
$color-brand-50: #FF9925; // Default
$color-brand-60: lighten(#FF9925, 10%);

// Color success
$color-success-50: #39b924; // Default
$color-success-60: #249c11;

// Color alert
$color-alert-50: #f3490d; // Default
$color-alert-60: #d33e09;

// Color neutral
$color-neutral-10: #eef2f0;
$color-neutral-30: #ccd6d2;
$color-neutral-50: #8d9994;
$color-neutral-70: #3f4542;
$color-neutral-90: #232725;

// Color basics
$black: #000;
$almost-black: #111111;
$white: #fff;