// ====================================================================
// 1. Palette - These variables should not be used directly inside of a class. Please reference the "Colors" section below
$palette-sunset: #e74f29;
$palette-orange: #ff9505;
$palette-blood-orange: #c4300b;
$palette-peach: #f58753;
$palette-lemonade: #ffc70c;
$palette-sea-salt: #048486;
$palette-denim: #067eb3;
$palette-eastern-blue: #0cd3d5;
$palette-key-lime-pie: #b2bb1c;
$palette-elm: #107c84;
$palette-sea-green: #358555;
$palette-desert: #a36a1e;
$palette-golden-bell: #df8913;
$palette-sun: #faa719;
$palette-ripe-lemon: #f6eb26;
$palette-san-juan: #253a55;
$palette-tuatara: #353531;
$palette-jumbo: #7f8084;
$palette-alto: #dddddd;
$palette-success: green;
$palette-warning: orange;
$palette-danger: red;

// ====================================================================
// 2. Colors

// 2.a Primary
$color-primary-1: $palette-sunset;
$color-primary-2: $palette-eastern-blue;
$color-primary-3: $palette-key-lime-pie;
$color-primary-4: $palette-peach;
$color-primary-5: $palette-orange;

// 2.b Secondary
$color-secondary-1: $palette-elm;
$color-secondary-2: $palette-sea-green;
$color-secondary-3: $palette-desert;
$color-secondary-4: $palette-golden-bell;
$color-secondary-5: $palette-sun;
$color-secondary-6: $palette-ripe-lemon;
$color-secondary-7: $palette-san-juan;
$color-secondary-8: $palette-peach;
$color-secondary-9: $palette-blood-orange;
$color-secondary-10: $palette-lemonade;
$color-secondary-11: $palette-sea-salt;

// 2.c Greys
$color-grey-1: $palette-tuatara;
$color-grey-2: $palette-jumbo;
$color-grey-3: $palette-alto;

// 2.d State
$color-state-success: $palette-success;
$color-state-warning: $palette-warning;
$color-state-danger: $palette-danger;

// 2.e Gradients
$color-gradient-1: linear-gradient(135deg, $palette-blood-orange, $palette-orange);
$color-gradient-2: linear-gradient(135deg, $color-primary-4, $color-secondary-10);
$color-gradient-3: linear-gradient(135deg, $color-secondary-11, $color-primary-2);

// ====================================================================
// 3. Fonts

// 3.a Primary
$font-family-primary: "Open Sans",
arial,
sans-serif;
$font-family-primary-bold: "Open Sans Bold",
arial,
sans-serif;
$font-family-primary-header: "Open Sans Bold",
arial,
sans-serif;
$font-family-primary-cta: "Rock Salt",
arial,
sans-serif;
$font-family-primary-footer: "Rock Salt",
arial,
sans-serif;

// 3.b Secondary
$font-family-secondary: "Calibri",
arial,
sans-serif;
$font-family-secondary-bold: "Calibri Bold",
arial,
sans-serif;
$font-family-secondary-header: "Calibri Bold",
arial,
sans-serif;
$font-family-handwritten: "Sriracha",
cursive;

// 3.c Default
$font-color-default-header: $color-grey-1;
$font-color-display-header: $color-primary-1;
$font-color-content: $color-grey-1;

// 3.d Sizes
$font-size-xs: 10px;
$font-size-sm: 12px;
$font-size-md: 14px;
$font-size-lg: 16px;
$font-size-xl: 18px;
$font-size-content: $font-size-md;

// ====================================================================
// 4. Breakpoints
$breakpoint-xs: 576px;
$breakpoint-sm: 768px;
$breakpoint-md: 992px;
$breakpoint-lg: 1200px;
$breakpoint-xl: 1400px;

// ====================================================================
// 5. UI
$border: 1px solid $color-grey-3;

// ====================================================================
// 6. Buttons
$btns: (),
(color: $color-primary-1, variation: "primary-1", outline: false),
(color: $color-primary-2, variation: "primary-2", outline: false),
(color: $color-primary-3, variation: "primary-3", outline: false),
(color: $color-primary-4, variation: "primary-4", outline: false),
(color: $color-primary-5, variation: "primary-5", outline: false),
(color: $color-secondary-1, variation: "secondary-1", outline: false),
(color: $color-secondary-2, variation: "secondary-2", outline: false),
(color: $color-secondary-3, variation: "secondary-3", outline: false),
(color: $color-secondary-4, variation: "secondary-4", outline: false),
(color: $color-secondary-5, variation: "secondary-5", outline: false),
(color: $color-secondary-6, variation: "secondary-6", outline: false),
(color: $color-secondary-7, variation: "secondary-7", outline: false),
(color: $color-secondary-8, variation: "secondary-8", outline: false),
(color: $color-secondary-9, variation: "secondary-9", outline: false),
(color: $color-secondary-10, variation: "secondary-10", outline: false),
(color: $color-grey-1, variation: "grey-1", outline: false),
(color: $color-grey-2, variation: "grey-2", outline: false),
(color: $color-grey-3, variation: "grey-3", outline: false),
(color: $color-state-success, variation: "state-success", outline: false),
(color: $color-state-warning, variation: "state-warning", outline: false),
(color: $color-state-danger, variation: "state-danger", outline: false),
(color: $color-gradient-1, variation: "gradient-1", outline: false),
(color: $color-gradient-2, variation: "gradient-2", outline: false),
(color: $color-primary-1, variation: "primary-1", outline: true),
(color: $color-primary-2, variation: "primary-2", outline: true),
(color: $color-primary-3, variation: "primary-3", outline: true),
(color: $color-primary-4, variation: "primary-4", outline: true),
(color: $color-primary-5, variation: "primary-5", outline: true),
(color: $color-secondary-1, variation: "secondary-1", outline: true),
(color: $color-secondary-2, variation: "secondary-2", outline: true),
(color: $color-secondary-3, variation: "secondary-3", outline: true),
(color: $color-secondary-4, variation: "secondary-4", outline: true),
(color: $color-secondary-5, variation: "secondary-5", outline: true),
(color: $color-secondary-6, variation: "secondary-6", outline: true),
(color: $color-secondary-7, variation: "secondary-7", outline: true),
(color: $color-secondary-8, variation: "secondary-8", outline: true),
(color: $color-secondary-9, variation: "secondary-9", outline: true),
(color: $color-secondary-10, variation: "secondary-10", outline: true),
(color: $color-grey-1, variation: "grey-1", outline: true),
(color: $color-grey-2, variation: "grey-2", outline: true),
(color: $color-grey-3, variation: "grey-3", outline: true),
(color: $color-state-success, variation: "state-success", outline: true),
(color: $color-state-warning, variation: "state-warning", outline: true),
(color: $color-state-danger, variation: "state-danger", outline: true),
(color: $color-gradient-1, variation: "gradient-1", outline: true),
(color: $color-gradient-2, variation: "gradient-2", outline: true),
(color: "#ffffff", variation: "white", outline: false);



// ====================================================================
// 6. Utilities
$directions: top,
right,
bottom,
left;
$attributes: padding,
margin;