@font-face {
  font-display: swap;
  font-family: 'Geist Light';
  font-style: normal;
  src: url('/asset/font/geist/statics-otf/Geist-Light.otf') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Geist Regular';
  font-style: normal;
  src: url('/asset/font/geist/statics-otf/Geist-Regular.otf') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Geist Medium';
  font-style: normal;
  src: url('/asset/font/geist/statics-otf/Geist-Medium.otf') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Geist Bold';
  font-style: normal;
  src: url('/asset/font/geist/statics-otf/Geist-Bold.otf') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Geist Black';
  font-style: normal;
  src: url('/asset/font/geist/statics-otf/Geist-Black.otf') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Norse Bold';
  font-style: normal;
  font-weight: 900;
  src: url('/asset/font/norse/Norsebold.otf') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Caudex Bold';
  font-style: normal;
  font-weight: 900;
  src: url('/asset/font/caudex/Caudex-Bold.ttf') format('woff2');
}

:root {
  --color-black-200: hsla(0, 0%, 95%, 1);
  --color-black-250: hsla(0, 0%, 92%, 1);
  --color-black-300: hsla(0, 0%, 75%, 1);
  --color-black-350: hsla(0, 0%, 60%, 1);
  --color-black-400: hsla(0, 0%, 40%, 1);
  --color-black-850: hsla(0, 0%, 20%, 1);
  --color-black-900: hsla(0, 0%, 9%, 1);

  --color-white-100: #fff;
  --color-white-200: #fafafa;

  --color-grey-100: #f4f4f4;
  --color-grey-150: #eeeeee;
  --color-grey-200: #d7d7d7;
  --color-grey-500: #acacac;
  --color-grey-600: #797979;
  --color-grey-700: #686868;

  --color-red-600: #eb1700;

  --color-orange-600: #fe7a1a;

  --color-green-100: #b4fed2;
  --color-green-600: #33a95e;
  --color-green-900: #0c5132;

  --color-blue-100: #d5ebff;
  --color-blue-600: #0070f3;
  --color-blue-900: #003a5a;

  /* -------------------- */

  --size-xs: 14px;
  --size-sm: 16px;
  --size-md: 18px;
  --size-lg: 24px;
  --size-xl: 32px;

  /* -------------------- */

  --box-shadow-level-1:
    0rem 0.3125rem 0.3125rem -0.15625rem rgba(0, 0, 0, 0.03),
    0rem 0.1875rem 0.1875rem -0.09375rem rgba(0, 0, 0, 0.02),
    0rem 0.125rem 0.125rem -0.0625rem rgba(0, 0, 0, 0.02),
    0rem 0.0625rem 0.0625rem -0.03125rem rgba(0, 0, 0, 0.03),
    0rem 0.03125rem 0.03125rem 0rem rgba(0, 0, 0, 0.04),
    0rem 0rem 0rem 0.0625rem rgba(0, 0, 0, 0.06);
}

:root {
  --primary-box-shadow: var(--box-shadow-level-1);

  --primary-background-color: var(--color-black-900);
  --primary-light-background-color: var(--color-black-400);
  --secondary-background-color: var(--color-grey-100);
  --light-background-color: var(--color-white-100);

  --primary-border-color: var(--color-black-900);
  --primary-light-border-color: var(--color-black-400);
  --secondary-border-color: var(--color-grey-200);
  --info-border-color: var(--color-blue-600);

  --primary-text-color: var(--color-black-900);
  --secondary-text-color: var(--color-grey-700);
  --info-text-color: var(--color-blue-600);
  --success-text-color: var(--color-green-600);
  --warning-text-color: var(--color-orange-600);
  --danger-text-color: var(--color-red-600);

  --xs-text-size: var(--size-xs);
  --sm-text-size: var(--size-sm);
  --md-text-size: var(--size-md);
  --lg-text-size: var(--size-lg);
}

*,
::backdrop,
:after,
:before {
  box-sizing: border-box;
  border: 0 solid;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--secondary-background-color);
  font-family: 'Geist Regular', sans-serif;
  color: var(--default-text-color);
  font-size: 16px;
  line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.2;
}

body,
html {
  padding: 0;
  margin: 0;
  height: 100%;
}

input,
select,
textarea,
button {
  font-family: inherit;
}

strong {
  font-weight: 900;
  font-family: 'Geist Bold', sans-serif;
}