:root {
  --button-radius: 100px;
  --card-radius: 0;
  --input-radius: 0;

  /* Black */
  --color-brand-black-50: #f5f5f6;
  --color-brand-black-100: #e6e6e7;
  --color-brand-black-200: #cfd0d2;
  --color-brand-black-300: #adaeb3;
  --color-brand-black-400: #84858c;
  --color-brand-black-500: #696a71;
  --color-brand-black-600: #5a5b60;
  --color-brand-black-700: #4c4d52;
  --color-brand-black-800: #434347;
  --color-brand-black-900: #3b3b3e;
  --color-brand-black-950: #1e1e20;

  /* Key */
  --color-brand-key-off-white: #ffffff;
  --color-brand-key-main-light: #01a7c9;
  --color-brand-key-main: #01a7c9;
  --color-brand-key-main-shade: #df7229;
  --color-brand-key-darkest: #111111;
  --color-brand-key-off-white-shade: #fefaeb;

  /* Global */
  --color-brand-global-white: #ffffff;
  --color-brand-global-error: #ff0000;
  --color-brand-global-white-alpha-50: #ffffff80;
  --color-brand-global-white-alpha-5: #ffffff0d;
  --color-brand-global-white-alpha-75: #ffffffbf;
  --color-brand-global-attention: #ffcf56;
  --color-brand-global-success: #00d656;

  --color-text-primary: black;
  --color-text-secondary: black;
  /* --color-text-note-dark: black; */
  /* --color-text-note-light: black; */
  --color-text-error: red;
  /* --color-text-success: green; */
  --color-text-invert: black;

  --color-shadow: transparent;

  /* --color-action-primary-default: black; */
  /* --color-action-primary-disabled: black; */
  /* --color-action-primary-pressed: black; */
  /* --color-action-primary-focused: black; */
  /* --color-action-primary-hovered: black; */

  --color-action-secondary-default: #01a7c9;
  --color-action-secondary-disabled: #01a7c9;
  --color-action-secondary-pressed: #01a7c9;
  --color-action-secondary-focused: #01a7c9;
  --color-action-secondary-hovered: #01a7c9;

  /* --color-action-tertiary-default: black; */
  /* --color-action-tertiary-disabled: black; */
  /* --color-action-tertiary-pressed: black; */
  /* --color-action-tertiary-focused: black; */
  /* --color-action-tertiary-hovered: black; */

  /* --color-modal: white; */

  /* --color-card-primary: white; */
  /* --color-card-secondary: #df7229; */

  --color-bg-primary: black;
  --color-bg-secondary: white;
  /* --color-bg-tertiary: white; */
  /* --color-bg-transparent: white; */
  /* --color-bg-unfilled: white; */
  /* --color-bg-attention: yellow; */
  /* --color-bg-success: green; */
  /* --color-bg-error: red; */

  /* --color-icon-primary: #01a7c9; */
  /* --color-icon-secondary: #df7229; */
  /* --color-icon-tertiary: white; */
  /* --color-icon-success: green; */
  /* --color-icon-error: red; */

  --color-stroke-primary: black;
  --color-stroke-secondary: black;
  --color-stroke-tertiary: black;
  --color-stroke-light: black;
  --color-stroke-error: black;
  --color-stroke-placeholder: black;
  --color-stroke-focus: black;
}

@font-face {
  font-family: "Figtree-Regular";
  src: url("/fonts/Figtree-Regular.ttf");
  font-weight: normal;
  font-display: swap;
}

@font-face {
  font-family: "Figtree-Medium";
  src: url("/fonts/Figtree-Medium.ttf");
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Figtree-SemiBold";
  src: url("/fonts/Figtree-SemiBold.ttf");
  font-weight: 600;
  font-display: swap;
}

* {
  font-family: "Figtree-Regular", Arial, Helvetica, sans-serif;
}

.font-medium,
.font-medium * {
  font-family: "Figtree-Medium", Arial, Helvetica, sans-serif;
}

.font-semibold,
.font-semibold * {
  font-family: "Figtree-SemiBold", Arial, Helvetica, sans-serif;
}