@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  @font-face {
    font-family: "Inter";
    font-weight: 400;
    src: url("./assets/fonts/Inter-Regular.ttf") format("truetype");
  }

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

  @font-face {
    font-family: "Roboto Mono";
    font-weight: 400;
    src: url("./assets/fonts/RobotoMono-Regular.ttf") format("truetype");
  }

  @font-face {
    font-family: "Roboto Mono";
    font-weight: 500;
    src: url("./assets/fonts/RobotoMono-Medium.ttf") format("truetype");
  }

  :root {
    @apply bg-ui-bg-subtle text-ui-fg-base antialiased;
    text-rendering: optimizeLegibility;
  }
}

@layer components {
  .worfklow-grid {
    background-image: radial-gradient(black 1px, transparent 0);
    background-size: 40px 40px;
    background: repeat;
  }
}

.worfklow-grid {
  background-image: radial-gradient(black 1px, transparent 0);
  background-size: 40px 40px;
  background: repeat;
}

.dark .rdp-selected {
  background-color: rgba(255, 255, 255, 0.3) !important;
}

.dark .rdp-range_end {
  border-radius: 0 50% 50% 0 !important;
  background-image: none;
}

.dark .rdp-range_start {
  border-radius: 50% 0 0 50% !important;
  background-image: none;
}
