@font-face {
  font-family: "HankenGrotesk";
  src: url("/files/HankenGrotesk-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "HankenGrotesk";
  src: url("/files/HankenGrotesk-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "HankenGrotesk";
  src: url("/files/HankenGrotesk-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "HankenGrotesk";
  src: url("/files/HankenGrotesk-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Stolzl";
  src: url("/files/Stolzl-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Stolzl";
  src: url("/files/Stolzl-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Stolzl";
  src: url("/files/Stolzl-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* @font-face {
  font-family: "SourceSerif4";
  src: url("/files/SourceSerif4-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
} */

@font-face {
  font-family: "SourceSerif4";
  src: url("/files/SourceSerif4-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Fonts */
  --font-body: "HankenGrotesk", sans-serif;
  --font-sans: "Stolzl", sans-serif;
  --font-serif: "SourceSerif4", serif;
  --font-alt: "Myriad-Pro", "Myriad Pro", Arial, sans-serif;
  --font-code: Menlo, Monaco, Consolas, "Courier New", monospace;
  /* Brand Color */
  --color-brand-primary-800: #0c3436;
  --color-brand-primary-700: #17686b;
  --color-brand-primary-600: #239ba1;
  --color-brand-primary-500: #2cc9d0;
  --color-brand-primary-400: #58d9de;
  --color-brand-primary-300: #82e2e6;
  --color-brand-primary-200: #abecef;
  --color-brand-primary-100: #d5f5f7;
  --color-brand-primary: var(--color-brand-primary-500);
  --color-brand-secondary-800: #051009;
  --color-brand-secondary-700: #0a1f13;
  --color-brand-secondary-600: #0e2f1c;
  --color-brand-secondary-500: #143622;
  --color-brand-secondary-400: #426651;
  --color-brand-secondary-300: #718b7c;
  --color-brand-secondary-200: #a1b2a8;
  --color-brand-secondary-100: #d0d8d3;
  --color-brand-secondary: var(--color-brand-secondary-500);
  --color-brand-sandstone: #fff8ee;
  --color-brand-sandstone-shade: #eadbca;
  --color-brand-sea-blue-tint: #66f6f3;
  --color-brand-sea-blue: #00f0eb;
  --color-brand-sea-blue-shade: #00b4b0;
  --color-brand-marigold-tint: #fe9e67;
  --color-brand-marigold: #fd5720;
  --color-brand-marigold-shade: #d34600;
  --color-brand-peony-tint: #ffd0f2;
  --color-brand-peony: #ffa9e6;
  --color-brand-peony-shade: #dd90cb;
  --color-brand-citrus-tint: #ffe975;
  --color-brand-citrus: #ffe255;
  --color-brand-citrus-shade: #e2c549;
  --color-brand-aubergine-tint: #814875;
  --color-brand-aubergine: #561a48;
  --color-brand-aubergine-shade: #49143e;
  --color-brand-granite-tint: #e9e5e2;
  --color-brand-granite: #e0dbd7;
  --color-brand-granite-shade: #aaa7a4;
  --color-brand-charcoal-tint: #605957;
  --color-brand-charcoal: #382f2d;
  --color-brand-charcoal-shade: #2a2322;

  --color-brand-dark: var(--color-brand-charcoal-shade);
  --color-brand-red: var(--color-brand-marigold);
  --color-brand-red-dark: var(--color-brand-marigold-shade);
  --color-brand-yellow: var(--color-brand-citrus);
  --color-brand-green: var(--color-brand-secondary);
  --color-brand-gray: var(--color-brand-charcoal);

  /* Color */
  --color-white: #fff;
  --color-black: #000;

  --color-success: #3c763d;
  --color-success-bg: #dff0d8;
  --color-success-border: #d6e9c6;
  --color-success-dark: var(--color-brand-secondary-400);
  --color-warning: #8a6d3b;
  --color-warning-bg: #fcf8e3;
  --color-warning-border: #faebcc;
  --color-info: #31708f;
  --color-info-bg: #d9edf7;
  --color-info-border: var(--color-brand-sandstone);
  --color-danger: #a94442;
  --color-danger-border: #ebccd1;
  --color-danger-bg: #f2dede;
  --color-green-pastel: var(--color-brand-secondary-400);
  --color-red-pastel: #ab4b3b;
  --color-blue-pastel: #23527c;
  --color-neutral-100: #fcfafa;
  --color-neutral-150: #f5f5f5;
  --color-neutral-200: #f3f3f3;
  --color-neutral-210: #f0eded;
  --color-neutral-240: #dbdbdb;
  --color-neutral-300: #e5e2e2;
  --color-neutral-325: #e5e3df;
  --color-neutral-340: #eeeeee;
  --color-neutral-350: #ddd;
  --color-neutral-360: #d1d2d3;
  --color-neutral-400: #d9d9d9;
  --color-neutral-430: #d4d6d7;
  --color-neutral-450: #dcdcdc;
  --color-neutral-500: #ccc;
  --color-neutral-520: #c0c3c5;
  --color-neutral-600: #bfc2c5;
  --color-neutral-625: #b8bcc0;
  --color-neutral-645: #b5b7ba;
  --color-neutral-650: #b5b5b7;
  --color-neutral-670: #bbb;
  --color-neutral-680: #8d8d8d;
  --color-neutral-700: #999;
  --color-neutral-750: #858a8f;
  --color-neutral-800: #777777;
  --color-neutral-850: #64696d;
  --color-neutral-900: #333;
  --color-red-100: #ce272d;
  --color-blue-fb: #3e5c9a;
  --color-blue-tw: #55acee;
  --color-blue-riverbed: #49575d;
  --color-blue-astral: #337ab7;
  --color-green-patina: var(--color-brand-secondary-400);
  --color-green-como: var(--color-brand-secondary-600);
  --color-brown-rust: var(--color-brand-marigold-shade);
  --color-peach-yellow: var(--color-brand-citrus-tint);
  --color-snow-drift: #eef3f0;
  --color-glacier: #76b6c2;
  --color-pink-pastel: #f7dad7;
  --color-yellow-creek: #857d57;
  /* General link */
  --color-link: var(--color-brand-secondary);
  --color-link-hover: var(--color-brand-secondary-400);
  --color-textlink: var(--color-brand-secondary);
  --color-textlink-hover: var(--color-brand-secondary-400);
  /* Buttons */
  --btn-primary-bg: var(--color-brand-marigold);
  --btn-primary-text: var(--color-white);
  --btn-primary-hover-bg: var(--color-brand-marigold-shade);
  --btn-primary-hover-text: var(--color-white);

  --btn-white-bg: var(--color-white);
  --btn-white-text: var(--color-brand-dark);
  --btn-white-hover-bg: #ec6851;
  --btn-white-hover-text: var(--color-brand-dark);
  --btn-green-bg: var(--color-brand-primary);
  --btn-green-text: var(--color-white);
  --btn-green-hover-bg: #67a087;
  --btn-green-hover-text: var(--color-white);
  --btn-lightgreen-bg: #76b89b;
  --btn-lightgreen-text: var(--color-white);
  --btn-lightgreen-hover-bg: #54826e;
  --btn-lightgreen-hover-text: var(--color-white);
  --btn-gray-bg: #999a9c;
  --btn-gray-text: #d4d4d4;
  --btn-gray-hover-bg: #999a9c;
  --btn-gray-hover-text: #d4d4d4;
  --btn-darkgray-bg: #5f6366;
  --btn-darkgray-text: var(--color-white);
  --btn-darkgray-hover-bg: #333333;
  --btn-darkgray-hover-text: var(--color-white);
  --btn-darkblue-bg: var(--color-brand-darkblue);
  --btn-darkblue-text: var(--color-white);
  --btn-darkblue-hover-bg: #333333;
  --btn-darkblue-hover-text: var(--color-white);
}