@font-face {
  font-family: 'Segoe UI';
  src: url('/app.font/Segoe UI.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Segoe UI';
  src: url('/app.font/Segoe UI Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Segoe UI';
  src: url('/app.font/Segoe UI Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Segoe UI';
  src: url('/app.font/Segoe UI Bold Italic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  /* font usage mapping */
  --font-monospace:'IBM Plex Mono', monospace;

  /* color Palette */
  --color-black: #000000;
  --color-white: #FFFFFF;

  /* grayscale */
  --gray-900: #212121;
  --gray-800: #333333;
  --gray-700: #555555;
  --gray-600: #777777;
  --gray-500: #999999;
  --gray-300: #DDDDDD;
  --gray-200: #EAEBEC;
  --gray-100: #F8F9FA;
   
  /* red palette */
  --red-700: #C4100E;
  --red-400: #FF0000; /* pure red */
  --red-100: rgba(255, 0, 0, 0.15); /* used in prism.js highlight (transparency is required) */
  --red-50:  #FFE6F2; /* used in .article-text .highlight */
  
  /* orange palette */
  --orange-700: #E65729;

  /* pink palette */
  --pink-500: #a626a4;
  --pink-400: #FE017E;
  
  /* semantic colors */
  --color-link: #0477a2;
  --color-link-hover: #4399b9;
}