$colours: (
  "gray": [
    #1f1b17,
    #3d3833,
    #4e4a46,
    #706965,
    #8f8983,
    #b1aca6,
    #cac3bd,
    #e3e1df,
    #f6f5f4
  ],
  "blue": [
    #062243,
    #0f3462,
    #0e4276,
    #225994,
    #4182c7,
    #72a7e3,
    #9dc4f0,
    #b5d2f3,
    #e4f0fd
  ],
  "red": [
    #340e03,
    #681f0b,
    #883017,
    #a33d21,
    #c95e40,
    #ed947c,
    #f2ac99,
    #fbc2b3,
    #fef1ed
  ],
  "yellow": [
    #302100,
    #563600,
    #795b00,
    #a07501,
    #c79b0e,
    #f4ce3f,
    #fee577,
    #fef1c1,
    #fff8e8
  ],
  "green": [
    #172f03,
    #244608,
    #407713,
    #548f19,
    #7fc644,
    #a1e06e,
    #c0ed9c,
    #dbf6c5,
    #effbe6
  ]
);

$box-types: (
	"primary": "blue",
	"accent": "yellow",
	"alert": "red",
	"warning": "yellow",
	"success": "green",
	"hint": "blue"
);

$gray-100: nth(map-get($colours, "gray"), 1);
$gray-200: nth(map-get($colours, "gray"), 2);
$gray-300: nth(map-get($colours, "gray"), 3);
$gray-400: nth(map-get($colours, "gray"), 4);
$gray-500: nth(map-get($colours, "gray"), 5);
$gray-600: nth(map-get($colours, "gray"), 6);
$gray-700: nth(map-get($colours, "gray"), 7);
$gray-800: nth(map-get($colours, "gray"), 8);
$gray-900: nth(map-get($colours, "gray"), 9);

$primary-100: nth(map-get($colours, "blue"), 1);
$primary-200: nth(map-get($colours, "blue"), 2);
$primary-300: nth(map-get($colours, "blue"), 3);
$primary-400: nth(map-get($colours, "blue"), 4);
$primary-500: nth(map-get($colours, "blue"), 5);
$primary-600: nth(map-get($colours, "blue"), 6);
$primary-700: nth(map-get($colours, "blue"), 7);
$primary-800: nth(map-get($colours, "blue"), 8);
$primary-900: nth(map-get($colours, "blue"), 9);

$alert-100: nth(map-get($colours, "red"), 1);
$alert-200: nth(map-get($colours, "red"), 2);
$alert-300: nth(map-get($colours, "red"), 3);
$alert-400: nth(map-get($colours, "red"), 4);
$alert-500: nth(map-get($colours, "red"), 5);
$alert-600: nth(map-get($colours, "red"), 6);
$alert-700: nth(map-get($colours, "red"), 7);
$alert-800: nth(map-get($colours, "red"), 8);
$alert-900: nth(map-get($colours, "red"), 9);

$accent-100: nth(map-get($colours, "yellow"), 1);
$accent-200: nth(map-get($colours, "yellow"), 2);
$accent-300: nth(map-get($colours, "yellow"), 3);
$accent-400: nth(map-get($colours, "yellow"), 4);
$accent-500: nth(map-get($colours, "yellow"), 5);
$accent-600: nth(map-get($colours, "yellow"), 6);
$accent-700: nth(map-get($colours, "yellow"), 7);
$accent-800: nth(map-get($colours, "yellow"), 8);
$accent-900: nth(map-get($colours, "yellow"), 9);

$success-100: nth(map-get($colours, "green"), 1);
$success-200: nth(map-get($colours, "green"), 2);
$success-300: nth(map-get($colours, "green"), 3);
$success-400: nth(map-get($colours, "green"), 4);
$success-500: nth(map-get($colours, "green"), 5);
$success-600: nth(map-get($colours, "green"), 6);
$success-700: nth(map-get($colours, "green"), 7);
$success-800: nth(map-get($colours, "green"), 8);
$success-900: nth(map-get($colours, "green"), 9);

/*
$primary-100: $gray-100;
$primary-200: $gray-200;
$primary-300: $gray-300;
$primary-400: $gray-400;
$primary-500: $gray-500;
$primary-600: $gray-600;
$primary-700: $gray-700;
$primary-800: $gray-800;
$primary-900: $gray-900;

$alert-100: $gray-100;
$alert-200: $gray-200;
$alert-300: $gray-300;
$alert-400: $gray-400;
$alert-500: $gray-500;
$alert-600: $gray-600;
$alert-700: $gray-700;
$alert-800: $gray-800;
$alert-900: $gray-900;

$accent-100: $gray-100;
$accent-200: $gray-200;
$accent-300: $gray-300;
$accent-400: $gray-400;
$accent-500: $gray-500;
$accent-600: $gray-600;
$accent-700: $gray-700;
$accent-800: $gray-800;
$accent-900: $gray-900;

$success-100: $gray-100;
$success-200: $gray-200;
$success-300: $gray-300;
$success-400: $gray-400;
$success-500: $gray-500;
$success-600: $gray-600;
$success-700: $gray-700;
$success-800: $gray-800;
$success-900: $gray-900;
*/


$w-s5: 0.0625rem;
$w-s4: 0.125rem;
$w-s3: 0.25rem;
$w-s2: 0.5rem;
$w-s1: 0.75rem;
$w-0: 1rem;
$w-l1: 1.5rem;
$w-l2: 2rem;
$w-l3: 3rem;
$w-l4: 4rem;
$w-l5: 6rem;
$w-l6: 8rem;
$w-l7: 12rem;
$w-l8: 16rem;

$font-sans: "Noto Sans", sans-serif;
$font-serif: serif;
$font-monospace: monospace;

$font-heading: $font-sans;
$font-bulk: $font-sans;
$font-code: $font-monospace;

/**
 * On the scaling of the headers. I’m a nerd, so here we go.
 *
 * I tried to determine a good scale a priori. It was clear to me that the
 * observed difference between a 48px and 64px font is much smaller than the
 * perceived difference between a 8px and 16px font size.
 *
 * Thus, the perception is *not* linear in the font size.
 *
 * I set the edge points to 200% and 100% (the h6 would get a bold font face)
 * to compensate.
 *
 * The first attempt to get a visually appealing header size scale was thus to
 * generate a logarithmic scale:
 *
 *     numpy.logspace(np.log10(200), 2, 6, base=10)
 *
 * This leads to the following sizes:
 *
 *     $_h-sizes: [200%, 174.11011266%, 151.57165665%, 131.95079108%, 114.8698355%, 100%];
 *
 * This scale has too large differences between the larger font sizes, and too
 * small differences between the smaller font sizes. Thus, I tried to invert
 * this:
 *
 *     200 - numpy.logspace(2, np.log10(200), 6, base=10) + 100
 *
 * This leads to the following sizes:
 *
 *     $_h-sizes: [200.0%, 185.13016450029647%, 168.0492089227105%, 148.42834334896025%, 125.88988734077518%, 100%];
 *
 * While this was better, it still didn’t look quite right yet. The next
 * attempt was to go about a square function instead of log. The idea behind
 * this is that the font size is essentially one edge of a rectangle, where the
 * second edge depends on the first. A square function should thus generate a
 * nicely appealing sequence:
 *
 * Again, we want the large differences to be on the large scales, too:
 *
 *     xs = numpy.linspace(5, 0, 6); 4*xs*xs + 100
 *
 * This leads to the following sizes:
 *
 *     $_h-sizes: [200.0%, 164.0%, 136.0%, 116.0%, 104.0%, 100.0%];
 *
 * While the first three headings looked nice with that, the others did not.
 * Further research has shown me that others use an exponential scale (instead
 * of a log scale), but with a rather small base (<1.6).
 *
 * Instead of taking one of the well-known factors (like golden ratio or major
 * second), I opted for choosing a factor which gives me a clean 200%-100%
 * range:
 *
 *     numpy.power(math.pow(2, 1/5), numpy.linspace(5, 0, 6)) * 100
 *
 * The result (rounded to 8 digits) is:
 *
 *     $_h-sizes: [200.0%, 174.11011266%, 151.57165665%, 131.95079108%, 114.8698355%, 100.0%];
 *
 * And... This is the first logspace range. Derp. So why did I discard it in
 * the first place? Now that I look at it, it looks amazing. Brains are weird.
 */
$h-sizes: [200.0%, 174.11011266%, 151.57165665%, 131.95079108%, 114.8698355%, 100.0%];

/**
 * And for mobile devices, we want an even less aggressive scale. Let’s try
 * 150%-100%.
 */
$h-small-sizes: [150.0%, 138.31618672%, 127.54245006%, 117.60790225%, 108.44717712%, 100.0%];
$small-screen-threshold: 40rem;
$medium-screen-threshold: 60rem;
$large-screen-threshold: 80rem;