/**
 * The raw values of our utilities, along with their corresponding variables.
 * The human-friendly aliases for these variables live in _utility-aliases.scss.
 * It’s the aliases that are used to generate the `.u-property` utility classes.
 */

/* Border
   ========================================================================== */

$border-width--0: 0;
$border-width--1: 0.5px;
$border-width--2: 1px;
$border-width--3: 2px;
$border-width--4: 3px;
$border-width--5: 4px;


/* Border radius
   ========================================================================== */

$border-radius--0: 0;
$border-radius--1: 2px;
$border-radius--2: 4px;
$border-radius--3: 6px;
$border-radius--4: 8px;
$border-radius--5: 10px;


/* Breakpoints
   ========================================================================== */

$small-breakpoint:    0;
$medium-breakpoint:   44rem;
$large-breakpoint:    60rem;
$x-large-breakpoint:  76rem;
$xx-large-breakpoint: 92rem;


/* Colors
   ========================================================================== */

/* Primary palette */
$color--fa-amber:  rgb(255, 157, 2);
$color--fa-blue:   rgb(0,   122, 191);
$color--fa-green:  rgb(124, 192, 74);
$color--fa-purple: rgb(118, 54,  142);
$color--fa-red:    rgb(253, 81,  39);
$color--fa-yellow: rgb(255, 182, 8);

/* Dark and light variants */
$color--fa-amber--dark:     adjust_hue(lighten($color--fa-amber, 0.5), 354);
$color--fa-blue--dark:      adjust_hue(darken($color--fa-blue, 3.5), 2);
$color--fa-blue--x-dark:    adjust_hue(darken($color--fa-blue, 8.5), 2);
$color--fa-blue--xx-dark:   adjust_hue(darken($color--fa-blue, 15), 2);
$color--fa-blue--x-light:   desaturate(lighten($color--fa-blue, 55), 50);
$color--fa-blue--xx-light:  desaturate(lighten($color--fa-blue, 59), 50);
$color--fa-green--dark:     adjust_hue(saturate(darken($color--fa-green, 7), 1), 0);
$color--fa-green--text:     adjust_hue(saturate(darken($color--fa-green, 10), 0), 0);
$color--fa-green--x-light:  desaturate(lighten($color--fa-green, 36), 10);
$color--fa-purple--x-light: desaturate(lighten($color--fa-purple, 53), 20);
$color--fa-red--dark:       desaturate(darken(adjust_hue($color--fa-red, 2), 10), 1);
$color--fa-red--text:       adjust_hue(desaturate(darken($color--fa-red, 3), 0), 1);
$color--fa-red--x-light:    desaturate(lighten($color--fa-red, 38), 2);
$color--fa-yellow--x-light: lighten($color--fa-yellow, 39);

/* Grays */
$color--gray-1:  #111;
$color--gray-2:  #222;
$color--gray-3:  #333;
$color--gray-4:  #444;
$color--gray-5:  #555;
$color--gray-6:  #666;
$color--gray-7:  #777;
$color--gray-8:  #888;
$color--gray-9:  #999;
$color--gray-10: #aaa;
$color--gray-11: #bbb;
$color--gray-12: #ccc;
$color--gray-13: #ddd;
$color--gray-14: #e4e4e4;
$color--gray-15: #eee;
$color--gray-16: #f5f5f5;


/* `font-family`
   ========================================================================== */

$font-family--1: "Source Sans Pro", "Helvetica Neue", Arial, Helvetica, sans-serif;
$font-family--2: "Helvetica Neue", Arial, Helvetica, sans-serif;
$font-family--3: "effra", "Helvetica Neue", Arial, Helvetica, sans-serif;
$font-family--4: "swister", "Helvetica Neue", Arial, Helvetica, sans-serif;
$font-family--5: "Monaco", "Courier New", Courier, monospace;


/* `font-size`
   ========================================================================== */

$base-unit: 16;

/* Function to convert `px` to `rem` */
@function rem($pixels, $context: $base-unit) {
  @return #{$pixels/$context}rem;
}

$font-size--1:  rem(9);
$font-size--2:  rem(10);
$font-size--3:  rem(11);
$font-size--4:  rem(12);
$font-size--5:  rem(14);
$font-size--6:  rem(16);
$font-size--7:  rem(18);
$font-size--8:  rem(21);
$font-size--9:  rem(24);
$font-size--10: rem(28);
$font-size--11: rem(32);
$font-size--12: rem(36);
$font-size--13: rem(42);
$font-size--14: rem(48);
$font-size--15: rem(54);
$font-size--16: rem(60);
$font-size--17: rem(72);


/* `font-weight`
   ========================================================================== */

$font-weight--1: 100;
$font-weight--2: 200;
$font-weight--3: 300;
$font-weight--4: 400;
$font-weight--5: 500;
$font-weight--6: 600;
$font-weight--7: 700;
$font-weight--8: 800;
$font-weight--9: 900;


/* `line-height`
   ========================================================================== */

$line-height--1:  90%;
$line-height--2:  100%;
$line-height--3:  110%;
$line-height--4:  120%;
$line-height--5:  125%;
$line-height--6:  130%;
$line-height--7:  135%;
$line-height--8:  140%;
$line-height--9:  145%;
$line-height--10: 150%;
$line-height--11: 155%;


/* Spacing
   ========================================================================== */

$spacing--0:  0;
$spacing--1:  0.15rem;
$spacing--2:  0.25rem;
$spacing--3:  0.5rem;
$spacing--4:  0.75rem;
$spacing--5:  1rem;
$spacing--6:  1.25rem;
$spacing--7:  1.5rem;
$spacing--8:  1.75rem;
$spacing--9:  2rem;
$spacing--10: 2.25rem;
$spacing--11: 2.5rem;
$spacing--12: 2.75rem;
$spacing--13: 3rem;
$spacing--14: 3.5rem;
$spacing--15: 4rem;
$spacing--16: 4.5rem;
$spacing--17: 5rem;


/* `z-index`
   ========================================================================== */

$z-index--0:  0;
$z-index--1:  1;
$z-index--2:  2;
$z-index--3:  3;
$z-index--4:  4;
$z-index--5:  5;
$z-index--6:  6;
$z-index--7:  7;
$z-index--8:  8;
$z-index--9:  9;
$z-index--10: 10;