/* Inter */
@font-face {
  font-family: "Inter";
  font-weight: 400;
  src: url("/fonts/Inter-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Inter";
  font-weight: 500;
  src: url("/fonts/Inter-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "Inter";
  font-weight: 600;
  src: url("/fonts/Inter-SemiBold.ttf") format("truetype");
}
@font-face {
  font-family: "Inter";
  font-weight: 700;
  src: url("/fonts/Inter-Bold.ttf") format("truetype");
}

/* Lora */
@font-face {
  font-family: "Lora";
  font-weight: 400;
  src: url("/fonts/Lora-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Lora";
  font-weight: 500;
  src: url("/fonts/Lora-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "Lora";
  font-weight: 600;
  src: url("/fonts/Lora-SemiBold.ttf") format("truetype");
}
@font-face {
  font-family: "Lora";
  font-weight: 700;
  src: url("/fonts/Lora-Bold.ttf") format("truetype");
}

/* Fira Code */
@font-face {
  font-family: "Fira Code";
  font-weight: 400;
  src: url("/fonts/FiraCode-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Fira Code";
  font-weight: 500;
  src: url("/fonts/FiraCode-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "Fira Code";
  font-weight: 600;
  src: url("/fonts/FiraCode-SemiBold.ttf") format("truetype");
}
@font-face {
  font-family: "Fira Code";
  font-weight: 700;
  src: url("/fonts/FiraCode-Bold.ttf") format("truetype");
}

/* CSS reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

html, body {
  height: 100%;
  overflow: hidden;
}

body {
  font-family: var(--font-family, "Fira Code"), monospace;
  font-size: 13px;
  background-color: var(--color-surface, #F3F3F3);
  color: var(--color-on-surface, #1C1B1F);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Purple theme defaults */
:root {
  --font-family: "Fira Code";

  --color-primary: #6750A4;
  --color-on-primary: #FFFFFF;
  --color-primary-container: #EADDFF;
  --color-on-primary-container: #21005D;

  --color-secondary: #625B71;
  --color-on-secondary: #FFFFFF;
  --color-secondary-container: #E8DEF8;
  --color-on-secondary-container: #1D192B;

  --color-surface: #F3F3F3;
  --color-on-surface: #1C1B1F;
  --color-surface-variant: #E7E0EC;
  --color-on-surface-variant: #49454F;

  --color-error: #B3261E;
  --color-on-error: #FFFFFF;

  --color-outline: #79747E;
  --color-outline-variant: #CAC4D0;

  --color-bubble-interviewer: #E8E8E8;
  --color-bubble-customer: #FFFFFF;
  --color-bubble-assistant: #F3D8B3;

  --space-xs: 4px;
  --space-s: 8px;
  --space-m: 16px;
  --space-l: 24px;
  --space-xl: 32px;

  --radius-s: 4px;
  --radius-m: 8px;
  --radius-l: 12px;
  --radius-xl: 16px;
}

#app {
  height: 100%;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 2px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--color-outline-variant);
  border-radius: 1px;
}