@font-face {
  font-family: "Inter";
  src: url("/src/assets/fonts/inter.ttf") format("truetype");
}

@font-face {
  font-family: "Noto Sans JP";
  src: url("/src/assets/fonts/notosansjp.ttf") format("truetype");
}

:root {
  --background: #ffffff;

  --panel: #f5f5f5;
  --panel-odd: #f5f5f5;
  --panel-even: #fff;

  --button: #e0e0e0;
  --button-hover: #d5d5d5;

  --text: #333333;
  --text-transparent: #333333cc;

  --text-on-primary: #ffffff;
  --text-on-primary-transparent: #ffffffcc;

  --divider: #e0e0e0;

  --primary: #4e7682;
  --primary-darken-1: #1f4752;
  --primary-darken-2: #001b25;

  --secondary: #7e6c49;
  --secondary-darken-1: #604f2d;
  --secondary-darken-2: #3b2b07;

  --font-family: "Inter", "Noto Sans JP", sans-serif;
  
  --font-size: 15px;
  --font-size-small: 12px;
  --font-size-large: 18px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: var(--font-family);
  font-size: var(--font-size);
  font-weight: 400;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-color: var(--background);
  color: var(--text);
}

button {
  all: unset;
}
